React Native Push

Learn how to handle push notifications in React Native.

Push Notifications

Android

Using Default Push Notification Service

To use Push Notifications out of the box using CleverTap, add the following entries to your AndroidManifest.xml.

<application>
         ....
         ....
        <service android:name="com.clevertap.android.sdk.pushnotification.fcm.FcmMessageListenerService"  android:exported="true">
            <intent-filter>
                <action android:name="com.google.firebase.MESSAGING_EVENT" />
            </intent-filter>
        </service>

 </application>

Creating Notification Channel

Note: You must register at least 1 notification channel for Default Push notification Service to work

CleverTap.createNotificationChannel("CtRNS", "Clever Tap React Native Testing", "CT React Native Testing", 5, true) // The notification channel importance can have any value from 1 to 5. A higher value means a more interruptive notification.

Delete Notification Channel

CleverTap.deleteNotificationChannel("RNTesting");

Creating a group notification channel

CleverTap.createNotificationChannelGroup("groupID", "groupName");

Push Notification Callback

The CleverTap SDK gives you a callback when a Push Notification is clicked along with the entire payload. For this You can register the CleverTapPushNotificationClicked callback .

CleverTap.addListener(CleverTap.CleverTapPushNotificationClicked, (e)=>{/*consume the event*/})

Setting a custom Push Notification icon.

By default, our SDK uses the app's icon for both the notification icon and the notification bar icon. However, You can provide a custom app icon by adding the icon in your app's android resources and registering it with clevertap in your AndroidManifest.xml
Checkout this section for more info

Delete a group notification channel

CleverTap.deleteNotificationChannelGroup("groupId");

Using Custom Push Notification Service

If you have your custom implementation for managing Android push notifications, you can inform CleverTap about the user’s FCM registration ID. Refer Advanced Features Section for more information

Deeplink or External URL (Android)

To use external URLs, whitelist the IPs or prefix the URL with http or https. For more information, refer to Deeplinking.

iOS

  1. Please refer to iOS Push Notifications setup and follow the same steps till step 4 in the document and in your application in Xcode, please configure the push notifications in your React Native project.

  2. Call. the following from your Javascript:

CleverTap.registerForPush();
  1. Now go to this page on how to create a push notification Campaign on CleverTap dashboard or you can follow the remaining steps on CleverTap iOS Push Notifications page.

React Native Push Notification Callback on iOS

The CleverTap SDK gives you a callback when a Push Notification is clicked along with the entire payload. For this You can register the CleverTapPushNotificationClicked callback .

CleverTap.addListener(CleverTap.CleverTapPushNotificationClicked, (e)=>{/*consume the event*/})

Deeplink or External URL (iOS)

A deeplink helps you open a particular activity in your app after a click on the notification. If left empty, the notification on click will open the launcher activity of the app. Deep links allow you to land the user on a particular part of your app. Your app's OpenURL method is called with the deep link specified here. If you want to use external URLs, you will have to whitelist the IPs or provide http/https before the URL so that the SDK can appropriately handle them. For more information, refer to Deeplinking.

With CleverTap React Native SDK, you can implement custom handling for URLs of in-app notification CTAs, push notifications, and app Inbox messages.

Check that your class conforms to the CleverTapURLDelegate protocol by first calling setURLDelegate. Use the following protocol method shouldHandleCleverTap(_ : forChannel:) to handle URLs received from channels such as in-app notification CTAs, push notifications, and app Inbox messages:

#import <CleverTapSDK/CleverTapURLDelegate.h>

// Set the URL Delegate
[[CleverTap sharedInstance]setUrlDelegate:self];

// CleverTapURLDelegate method 
- (BOOL)shouldHandleCleverTapURL:(NSURL *)url forChannel:(CleverTapChannel)channel {
    NSLog(@"Handling URL: \(%@) for channel: \(%d)", url, channel);
    return YES;
}
// Set the URL Delegate
CleverTap.sharedInstance()?.setUrlDelegate(self)


 // CleverTapURLDelegate method
public func shouldHandleCleverTap(_ url: URL?, for channel: CleverTapChannel) -> Bool {  
    print("Handling URL: \(url!) for channel: \(channel)") 
    return true 
}

Manually Enabling support for deeplink tracking in the application itself

Please visit iOS Deeplink Tracking for reference.


Did this page help you?