Integration of CleverTap for React Native Applications
The step-by-step integration of cleverTap for React Native application will be explained in this blog. The CleverTap React Native SDK for Customer Engagement and Analytics solutions for mobile applications.
Installing CleverTap for React Native
- npm install clevertap-react-native
- Link CleverTap for React Native version 0.59 or below & Not Using Cocoapods
- Run command react-native link clevertap-react-native
Note:
- For React Native version 0.60 or above linking is not required.
- To disable auto-linking in Android, Add react-native.config.js to the project root folder (where the package.json is) to exempt CleverTap package from auto-linking:
module.exports = { dependencies: { 'clevertap-react-native': { platforms: { ios: null, android: null, }, }, }, };
Steps for IOS
Add a pod ‘clevertap-react-native’, :path => ‘../node_modules/clevertap-react-native’ as the dependency in your ios/Podfile.
For iOS, add the following to the Podfile:
target 'YOUR_TARGET_NAME' do use_frameworks! pod 'clevertap-react-native', :path => '../node_modules/clevertap-react-native' end
From the terminal go to IOS folder and run pod install
Steps for Android setup
Add the clevertap-android-sdk and also firebase-messaging (if you wish to support the push notifications) packages in your root android/app/build.gradlefile.
implementation 'com.google.android.gms:play-services-base:17.6.0' implementation 'com.google.firebase:firebase-messaging:21.0.0' implementation 'com.clevertap.android:clevertap-android-sdk:4.6.6'
In android/settings.gradle
include ':clevertap-react-native' project(':clevertap-react-native').projectDir = new File(settingsDir, '../node_modules/clevertap-react-native/android') android/app/build.gradle dependencies { ... implementation project(':clevertap-react-native') }
Integrating the CleverTap SDK
IOS
In your AppDelegate.m didFinishLaunchingWithOptions: notify CleverTap React SDK of application launch:
[CleverTap autoIntegrate]; // integrate CleverTap SDK using autoIntegrate option [[CleverTapReactManager sharedInstance] applicationDidLaunchWithOptions:launchOptions];
NOTE: Don’t forget to add CleverTap imports to the top of the file.
#import <CleverTap-iOS-SDK/CleverTap.h> #import <clevertap-react-native/CleverTapReactManager.h>
Note: Need to use @import CleverTapSDK; instead of #import <CleverTap-iOS-SDK/CleverTap.h> and @import CleverTapReact; instead of #import <clevertap-react-native/CleverTapReactManager.h> in the AppDelegate class in case if using use_modular_headers! in the podfile.
Android
Follow the integration Steps
Add CleverTapPackage to the packages list in the MainApplication.java
(android/app/src/[...]/MainApplication.java) // CleverTap imports import com.clevertap.android.sdk.ActivityLifecycleCallback; import com.clevertap.react.CleverTapPackage; import com.clevertap.android.sdk.CleverTapAPI; //... // add CleverTapPackage to react-native package list @Override protected List<ReactPackage> getPackages() { List<ReactPackage> packages = new PackageList(this).getPackages(); // Packages that cannot be autolinked yet can be added manually here, for // example: packages.add(new CleverTapPackage());// only needed when not auto-linking the packages return packages; // ... // add onCreate() override @Override public void onCreate() { // Register CleverTap ActivityLifecycleCallback; before calling super ActivityLifecycleCallback.register(this); super.onCreate(); }
Optionally Override the class onCreate in MainActivity.java file to notify CleverTap of the launch deep link (android/app/src/[…]/MainActivity.java)
import com.clevertap.react.CleverTapModule; import android.os.Bundle; public class MainActivity extends ReactActivity { // ... @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); CleverTapModule.setInitialUri(getIntent().getData()); } // ... }
From clevertap-react-native v0.8.1 onwards developers can make their Application class extend CleverTapApplication to support Push Notifications click callback out of the box and register the activity lifecycle events. Before v0.8.1 the developers were forced to write the logic for the push click callback and register the activity lifecycle to their Application class manually which is being abstracted out in CleverTapApplication class.
import com.clevertap.react.CleverTapApplication; // other imports public class MainApplication extends CleverTapApplication implements ActivityLifecycleCallbacks, ReactApplication { // ... }
Usage
const CleverTap = require('clevertap-react-native'); enableDeviceNetworkInfoReporting: () => { CleverTap.enableDeviceNetworkInfoReporting(true); }, ///Push Notification create_NotificationChannel: () => { // alert('Notification Channel Created'); //Creating Notification Channel CleverTap.createNotificationChannel( 'app_channel_id', 'App Channel', 'This is App notification channel.', 5, true, ); }, delete_NotificationChannel: () => { alert('Notification Channel Deleted'); //Delete Notification Channel CleverTap.deleteNotificationChannel('App_channel_id'); }, create_NotificationChannelGroup: () => { // alert('Notification Channel Group Created'); //Creating a group notification channel CleverTap.createNotificationChannelGroup( 'App_group_id', 'App Group', ); }, delete_NotificationChannelGroup: () => { alert('Notification Channel Group Deleted'); //Delete a group notification channel CleverTap.deleteNotificationChannelGroup('App_group_id'); }, cleverTapEnableDebug: () => { CleverTap.setDebugLevel(3); },