Blog

Customer Engagement

Suggest Edits

Installing Smartech Push React Native

Install CEE React Native plugin using the npm package manager. And then link your native dependencies :

npm install smartech-push-react-native

For Android SDK

If you are building your Android app, follow the Android Customer Engagement steps for integration steps for push notifications & in-app messages.

🚧

Caution

Also you need to add the below code inside the onCreate method of your MainActivity class only if you are using older version before 3.5.0.

SmartechPushReactNativeModule.init(getIntent());

SmartechPushReactNativeModule.init(intent);

Step 1 : Define Latest SDK version

Add below line in gradle.properties

// Version of smartech push SDK to use with React Native
SMARTECH_PUSH_SDK_VERSION=<<push_sdk_android_version>>

Step 2: Integrate the latest CEE SDK

Make the following changes in the app-level build.gradle

api "com.netcore.android:smartech-push:${SMARTECH_PUSH_SDK_VERSION}"

For iOS SDK

If you are building your iOS app, follow the iOS Customer Engagement steps for integration steps for push notifications & in-app messages.

1. Import smartech sdk

#import <Smartech/Smartech.h>
#import <SmartPush/SmartPush.h>
#import <UserNotifications/UserNotifications.h>
#import <UserNotificationsUI/UserNotificationsUI.h>
#import "SmartechBaseReactNative.h"
#import "SmartechRCTEventEmitter.h"

To implement the deeplink in the iOS React Native app, please implement the following steps:

2. Add Smartech Deeplink Delegate methods

#pragma mark Smartech Deeplink Delegate

- (void)handleDeeplinkActionWithURLString:(NSString *)deeplinkURLString andNotificationPayload:(NSDictionary *)notificationPayload {
  NSMutableDictionary *smtData = [[NSMutableDictionary alloc] initWithDictionary:notificationPayload];
  smtData[kDeeplinkIdentifier] = smtData[kSMTDeeplinkIdentifier];
  smtData[kCustomPayloadIdentifier] = smtData[kSMTCustomPayloadIdentifier];
  
  dispatch_after(dispatch_time(DISPATCH_TIME_NOW, 1.5 * NSEC_PER_SEC), dispatch_get_main_queue(), ^{
    NSLog(@"SMTLOGGER DEEPLINK: %@",deeplinkURLString);
    [[NSNotificationCenter defaultCenter] postNotificationName:kSMTDeeplinkNotificationIdentifier object:nil userInfo:smtData];
  });
 
}

func handleDeeplinkAction(with deeplinkURLString: String, andNotificationPayload notificationPayload: [AnyHashable: Any]) {
    var smtData = notificationPayload
    smtData[kDeeplinkIdentifier] = smtData[kSMTDeeplinkIdentifier]
    smtData[kCustomPayloadIdentifier] = smtData[kSMTCustomPayloadIdentifier]

    DispatchQueue.main.asyncAfter(deadline: .now() + 1.5) {
        print("SMTLOGGER DEEPLINK: \(deeplinkURLString)")
        NotificationCenter.default.post(name: NSNotification.Name(kSMTDeeplinkNotificationIdentifier), object: nil, userInfo: smtData)
    }
}

Retrieving Deeplink Data

The below method will provide the deep link value and the custom payload when a push notification is clicked.

Use the below code when your smartech-base-react-native version is 3.5.0 or above, & smartech-push-react-native version is 3.5.0 or above.

import SmartechReact from 'smartech-base-react-native';
import SmartechPushReact from 'smartech-push-react-native';

// Deeplink callback for Push Notification, InappMessage and AppInbox
 SmartechReact.addListener(SmartechReact.SmartechDeeplink, handleDeeplinkWithPayload);

const handleDeeplinkWithPayload = (smartechData) => {
     console.log('Smartech Data :: ', smartechData);
     console.log('Smartech Deeplink :: ', smartechData.smtDeeplink);
     console.log('Smartech CustomPayload:: ', smartechData.smtCustomPayload);
  };

//Remove this listener on cleanup
SmartechReact.removeListener(SmartechReact.SmartechDeeplink);

Use the below code when your smartech-base-react-native version 3.2.6 and above, smartech-push-react-native version 3.2.7 and above

import SmartechReact from 'smartech-base-react-native';
import SmartechPushReact from 'smartech-push-react-native';

// Deeplink callback for Push Notification, InappMessage and AppInbox
 SmartechReact.addListener(SmartechReact.SmartechDeeplink, handleDeeplinkWithPayload);

// Android callback to handle deeplink in terminated/background state.
 SmartechPushReact.getDeepLinkUrl(function (smartechData) {
      console.log('Smartech Data ::', smartechData);
      // Handling the SDK Deeplink Callback.
      console.log('Smartech Deeplink :: ', smartechData.smtDeeplink);
      console.log('Smartech CustomPayload:: ', smartechData.smtCustomPayload);

  });

  const handleDeeplinkWithPayload = (smartechData) => {
     console.log('Smartech Data :: ', smartechData);
     console.log('Smartech Deeplink :: ', smartechData.smtDeeplink);
     console.log('Smartech CustomPayload:: ', smartechData.smtCustomPayload);
  };

//Remove this listener on cleanup
SmartechReact.removeListener(SmartechReact.SmartechDeeplink);

Use the below code when your smartech-push-react-native version 3.2.6 and below

let eventEmitterSubscription;
SmartechPushReact.addDeepLinkListener(SmartechPushReact.SmartechDeeplinkNotification, handleDeeplinkWithPayload, (eventSubscriptionObject) => {
  eventEmitterSubscription = eventSubscriptionObject;
});
// Android callback to handle deeplink in terminated/background state.
SmartechPushReact.getDeepLinkUrl(function (_response) {
  console.log('getDeepLinkUrl Initial Deeplink Response ', _response);
  });
eventEmitterSubscription.remove() // For remove listner
const handleDeeplinkWithPayload = (deeplinkdata) => { 
 };

Add listener for notification received

The below method will provide the push notification payload which is received from Netcore

Use the below code when your smartech-push-react-native version 3.2.7 and above

import SmartechPushReact from 'smartech-push-react-native';

   // Adding the Smartech Deeplink Notification received Listener
  SmartechPushReact.addListener(SmartechPushReact.SmartechNotificationReceived, handleOnNotificationReceived);
 
 const handleOnNotificationReceived = (notificationData) => {
 };

//Remove this listener on cleanup
SmartechPushReact.removeListener(SmartechPushReact.SmartechNotificationReceived);

Use the below code when your smartech-push-react-native version 3.2.6 and below

let notificationReceivedEventEmitterSubscription
   // Adding the Smartech Deeplink Notification received Listener
   SmartechPushReact.addCommonListener(SmartechPushReact.SmartechNotificationReceived, handleOnNotificationReceived, (eventSubscriptionObject) => {
     notificationReceivedEventEmitterSubscription = eventSubscriptionObject;
   });
//Remove this listener on cleanup
notificationReceivedEventEmitterSubscription.remove() // For remove listner
 const handleOnNotificationReceived = (notificationData) => {
 };

Add listener for Custom HTML In-app deep link and custom payload (Only For Android)

The below method will provide the deep link and custom payload on custom HTML in-app message is clicked

Use this code when your smartech-base-react-native version is 3.2.3

let inAppClickedEventEmitterSubscription

   // Adding the Smartech Deeplink Notification received Listener
 Smartech.addCommonListener(Smartech.SmartechInAppOnClick,handleOnInAppCustomHtmlClick, (eventSubscriptionObject) => {
     inAppClickedEventEmitterSubscription = eventSubscriptionObject;
   });


//Remove this listener on cleanup
inAppClickedEventEmitterSubscription.remove() // For remove listner
 const handleOnInAppCustomHtmlClick = (inappPayload) => {
 };

Updated about 1 month ago