@ajitpatel28/react-native-truecaller
v0.7.0
Published
Truecaller Integration with React Native for both Android[SDK v3.0.0] and IOS[SDK v0.1.8]
Downloads
32
Maintainers
Keywords
Readme
@ajitpatel28/react-native-truecaller
React Native library for seamless Truecaller integration, supporting Android SDK v3.0.1 and iOS SDK v0.1.8
Features
- Easy integration with Truecaller SDK for both Android and iOS
- Customizable UI options for Android
- Simplified user authentication flow
- TypeScript support
Installation
npm install @ajitpatel28/react-native-truecaller
# or
yarn add @ajitpatel28/react-native-truecaller
Setup
iOS Setup
To generate a client ID, follow the instructions in the Truecaller IOS Guide.
- Add the following to your
Podfile
:
pod '@ajitpatel28/react-native-truecaller', :path => '../node_modules/@ajitpatel28/react-native-truecaller'
Run
pod install
in your iOS directory.In your iOS project, add URL schemes for Truecaller in your
Info.plist
:
<key>CFBundleURLTypes</key>
<array>
<dict>
<key>CFBundleURLSchemes</key>
<array>
<string>truecallersdk-{YOUR_APP_ID}</string>
</array>
</dict>
</array>
Replace {YOUR_APP_ID}
with your actual Truecaller App ID.
- Add the
truesdk
entry underLSApplicationQueriesSchemes
in yourInfo.plist
file:
<key>LSApplicationQueriesSchemes</key>
<array>
<string>truesdk</string>
</array>
- Add the associated domain provided by Truecaller:
- In Xcode, go to your project's target
- Select the "Signing & Capabilities" tab
- Click on "+ Capability" and add "Associated Domains"
- Add the domain provided by Truecaller with the "applinks:" prefix
For example: applinks:your-provided-domain.com
Note: Do not include "http://" or "https://" in the domain.
Android Setup
To generate a client ID, follow the instructions in the Truecaller Android Guide.
- Add the Truecaller SDK client ID to your
AndroidManifest.xml
file inside the<application>
tag:
<meta-data
android:name="com.truecaller.android.sdk.ClientId"
android:value="YOUR_CLIENT_ID"/>
Replace YOUR_CLIENT_ID
with your actual Truecaller client ID.
- Ensure your app has the
INTERNET
permission in theAndroidManifest.xml
:
<uses-permission android:name="android.permission.INTERNET" />
Usage
import React, { useEffect } from 'react';
import { View, Button } from 'react-native';
import { useTruecaller } from '@ajitpatel28/react-native-truecaller';
const TruecallerLoginComponent = () => {
const {
initializeSDK,
openTruecallerForVerification,
userProfile,
error
} = useTruecaller({
androidClientId: 'YOUR_ANDROID_CLIENT_ID',
iosAppKey: 'YOUR_IOS_APP_KEY',
iosAppLink: 'YOUR_IOS_APP_LINK',
});
useEffect(() => {
// Initialize the Truecaller SDK when the component mounts
initializeSDK();
}, []);
const handleTruecallerLogin = async () => {
try {
await openTruecallerForVerification();
// The userProfile will be updated automatically if verification is successful
} catch (err) {
console.error('Truecaller login error:', err);
// Handle error
}
};
useEffect(() => {
if (userProfile) {
console.log('Truecaller profile:', userProfile);
// Handle successful login, e.g., navigate to a new screen or update app state
}
}, [userProfile]);
useEffect(() => {
if (error) {
console.error('Truecaller error:', error);
// Handle error, e.g., show an error message to the user
}
}, [error]);
return (
<View>
<Button title="Login with Truecaller" onPress={handleTruecallerLogin} />
</View>
);
};
export default TruecallerLoginComponent;
API
useTruecaller(config: TruecallerConfig)
A custom hook that provides access to Truecaller functionality.
Parameters
config
:TruecallerConfig
object with the following properties:androidClientId
: (string) Your Android client IDiosAppKey
: (string) Your iOS app keyiosAppLink
: (string) Your iOS app linkandroidButtonColor
: (optional) Color of the Truecaller button on AndroidandroidButtonTextColor
: (optional) Text color of the Truecaller button on AndroidandroidButtonShape
: (optional) Shape of the Truecaller button on AndroidandroidButtonText
: (optional) Text displayed on the Truecaller button on AndroidandroidFooterButtonText
: (optional) Text displayed on the footer button on AndroidandroidConsentHeading
: (optional) Heading text for the consent screen on Android
Returns
initializeTruecaller(): Promise<void>
: Initializes the Truecaller SDK.requestTruecallerProfile(): Promise<TruecallerUserProfile>
: Requests the user's Truecaller profile.userProfile
: The user's Truecaller profile (if available).error
: Any error that occurred during the Truecaller operations.
Constants
The library provides several constants for customization:
import {
TRUECALLER_ANDROID_CUSTOMIZATIONS,
TRUECALLER_ANDROID_EVENTS,
TRUECALLER_IOS_EVENTS,
TRUECALLER_LANGUAGES,
} from '@ajitpatel28/react-native-truecaller';
These constants include options for button styles, consent modes, event types, and supported languages.
Error Handling
The library throws errors in case of initialization or profile request failures. Implement proper error handling in your application using try-catch blocks or by checking the error
value returned from the useTruecaller
hook.
Notes
- Ensure you have the necessary permissions set up in your app for accessing user information.
- Follow Truecaller's guidelines and policies when implementing this SDK in your application.
- For more detailed customization options, refer to the Truecaller SDK documentation for Android and iOS.
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
MIT
Made with ❤️ by Ajit Patel and create-react-native-library