Integrate Smartech with React Native Expo Plugin

Integrating the Smartech SDK with your React Native Expo application enables advanced features such as push notifications and in-app messaging. This document explains how to install and configure Smartech plugins for a React Native Expo Project. Follow the steps given below to integrate Smartech's features into your app, enhancing your ability to connect with users effectively.

Installing Smartech React Native Plugins
Before using the Smartech SDK in your React Native application, you must install the necessary plugins. These plugins enable core functionalities such as push notifications, app inbox, and user nudges. Follow the commands below to install each plugin.

npm install smartech-base-react-native --save

npm install smartech-push-react-native --save

npm install smartech-appinbox-react-native --save

// If you are using the Nudge feature.
npm install smartech-reactnative-nudges --save

Installing Smartech React Native Expo Plugins
After setting up the React Native plugins, the next step is to install the Smartech Expo plugins.

npm install smartech-base-expo-plugin --save

npm install smartech-push-expo-plugin --save

npm install smartech-appinbox-expo-plugin --save

Configure the App.json or App.config.js File
Once the plugins are installed, configure your Expo project to use these plugins. Depending on your project setup, modify the app.json or app.config.js file. These configuration files contain key details such as Smartech App ID, Bundle Name, and other necessary metadata.

Using [app.json](doc:react-native-expo-plugin#appjson): Update the app.json file with the required plugin nodes and configurations.
Using [app.config.js](doc:react-native-expo-plugin#appconfigjs): Update the app.config.js file accordingly.

Build and Run the App
After installing the necessary plugins and updating your configuration file, you can run the below command to delete and recreate the iOS and Android directories. This step ensures the Smartech SDK and plugins are properly integrated into your app.

Command to Prebuild the Project

npx expo prebuild --clean

For iOS, go to the iOS folder and run the command below.

pod install

Command to Run the App on Android

npx expo run:android

Command to Run the App on Android

npx expo run:ios

Configure Plugin Parameters
Configure various parameters in your project files to customize the behavior of Smartech plugins. These parameters include control logging, SDK versions, metadata, and more. Here are the parameters for smartech-base-expo-plugin, smartechNudges (Android & iOS) and deeplink handling (smartech-push-expo-plugin).

1. smartech-base-expo-plugin

Parameter	Description	Example Value
isNewArchEnabled	Indicates if the React Native New Architecture is enabled. Set to true to enable or false to disable.	true
deepLinkDelay		3
android.isLogEnabled	Enables or disables logging for Android. Set to true to enable logging or false to disable.	true
android.isKotlinProject	Specifies whether the project is using Kotlin. It is set to true if the project is in Kotlin or false otherwise.	true
android.smartechMetaData	Metadata key-value pairs are used to configure Smartech on Android.	`[{"name": "SMT_APP_ID", "value": "06b57d52c914803e4de8cbcb978da09f"}]`
ios.appId	The Smartech App ID for iOS.	3bdc168fce4668fab6aca8885cc03221
ios.bundleIdentifier	The bundle identifier for the iOS app.	com.netcore.SmartechApp
ios.groupIdentifier	The group identifier for the iOS app.	com.netcore.SmartechApp
ios.autoFetchLocation	It automatically fetches the device's location in iOS when it is set to true.	false
ios.useAdvID	Enables the Advertising Identifier (IDFA) to be used in iOS when set to true.	true
ios.isLogEnabled	Enables or disables logging for iOS.	true

2. smartnudges

Parameter	OS	Description	Example Value
smartechNudgesEnabled		Enables or disables the Smartech Nudges feature. Set to true to enable, or false to disable.	true
SMARTECH_NUDGE_VERSION (Android)		Specifies the version of the Smartech Nudges SDK to be used for Android.	10.2.0
useEncryption	Android	Enables encryption for Smartech Nudges in Android. Set to true to enable, or false to disable.	true
isLogEnabled	Android	Enables or disables logging for Smartech Nudges in Android. Set to true to enable logging, or false to disable.	true
smartechNudgesMetaData	Android	An array of metadata key-value pairs for configuring Smartech Nudges on Android.	`[{"name": "HANSEL_APP_ID", "value": "your-hansel-app-id"}, {"name": "HANSEL_APP_KEY", "value": "your-hansel-app-key"}]`
appId	iOS	The Smartech Nudges App ID for iOS.	`HG7WKEM8KK3V8LVNGGDDO04D4`
appKey	iOS	The Smartech Nudges App Key for iOS.	`XAP23PIPEI1V1BEZZE5PPZ0YSWQFN45SQTV9MO353OODNSUSU0`
testDeviceURLName	iOS	The test device URL name for Hansel in iOS.	com.netcore.SmartechApp
testDeviceURLSchema	iOS	The test device URL schema for Hansel in iOS.	`hanselpebbletrace`

3. smartech-push-expo-plugin

Parameter	Description	Example Value
android.SMARTECH_PUSH_SDK_VERSION	Specifies the Smartech Push SDK version for Android.	3.5.1
android.isKotlinProject	Indicates whether the project is using Kotlin.	true
android.useSmartechFCM	Enable the use of Smartech FCM on Android.	true
ios.groupIdentifier	Group identifier for iOS.	com.netcore.SmartechApp
ios.mode	Used to configure APNs environment entitlement.	development or production

4.smartech-appinbox-expo-plugin

Parameter	Description	Required	Example Value
android.SMARTECH_APPINBOX_SDK_VERSION	Specifies the Smartech AppInbox SDK version for Android.	Yes	3.5.1

Configuration Code Samples

Below are the essential code samples for configuring your app in App.json and app.config.js.

app.json

{
  "plugins": [
    [
      "smartech-base-expo-plugin",
      {
        "isNewArchEnabled": true/false,
        "deepLinkDelay":3,
        "android": {
          "isLogEnabled": true,
          "SMARTECH_BASE_SDK_VERSION": "3.5.4",
          "isKotlinProject": true,
          "smartechMetaData": [
            {
              "name": "SMT_APP_ID",
              "value": "<your-smartech-app-id>"
            }
          ],
          "smartechNudges": {
            "smartechNudgesEnabled": true,
            "useEncryption": false,
            "isLogEnabled": true,
            "smartechNudgesMetaData": [
              {
                "name": "HANSEL_APP_ID",
                "value": "<your-hansel-app-id>"
              },
              {
                "name": "HANSEL_APP_KEY",
                "value": "<your-hansel-app-key>"
              }
            ]
          }
        },
        "ios": {
          "appId": "<your-smartech-app-id>",
          "bundleIdentifier": "<your-app-bundle-id>",
          "groupIdentifier": "<your-app-group-id>",
          "autoFetchLocation": false,
          "useAdvID": false,
          "isLogEnabled": true,
          "smartechNudges": {
            "smartechNudgesEnabled": true,
            "appId": "<your-hansel-app-id>",
            "appKey": "<your-hansel-app-key>",
            "testDeviceURLName": "<your-url-name>",
            "testDeviceURLSchema": "<your-url-schema>"
          }
        }
      }
    ],
    [
      "smartech-push-expo-plugin",
      {
        "android": {
          "SMARTECH_PUSH_SDK_VERSION": "3.5.1",
          "isKotlinProject": true,
          "useSmartechFCM": true
        },
        "ios": {
          "groupIdentifier": "<your-app-group-id>",
          "mode": "development/ production"
        }
      }
    ],
    [
      "smartech-appinbox-expo-plugin",
      {
        "android": {
          "SMARTECH_APPINBOX_SDK_VERSION": "3.5.1"
        }
      }
    ]
  ]
}

app.config.js

plugins: [ "expo-router",
      [
        "smartech-base-expo-plugin",
        {
          isNewArchEnabled: true/false,
          deepLinkDelay:3,
          android: {
            isLogEnabled: true,
            SMARTECH_BASE_SDK_VERSION: "3.5.4",
            isKotlinProject: true,
            smartechMetaData: [
              {
                name: "SMT_APP_ID",
                value: "<your-smartech-app-id>"
              }
            ],
            smartechNudges: {
              smartechNudgesEnabled: true,
              useEncryption: false,
              isLogEnabled: true,
              smartechNudgesMetaData: [
                {
                  name: "HANSEL_APP_ID",
                  value: "<your-hansel-app-id>"
                },
                {
                  name: "HANSEL_APP_KEY",
                  value: "<your-hansel-app-key>"
                }
              ]
            }
          },
          ios: {
            appId: "<your-smartech-app-id>",
            bundleIdentifier: "<your-app-bundle-id>",
            groupIdentifier: "<your-app-group-id>",
            autoFetchLocation: false,
            useAdvID: false,
            isLogEnabled: true,
            smartechNudges: {
              smartechNudgesEnabled: true,
              appId: "<your-hansel-app-id>",
              appKey: "<your-hansel-app-key>",
              testDeviceURLName: "<your-url-name>",
              testDeviceURLSchema: "<your-url-schema>"
            }
          }
        }
      ],
      [
        "smartech-push-expo-plugin",
        {
          android: {
            SMARTECH_PUSH_SDK_VERSION: "3.5.1",
            isKotlinProject: true,
            useSmartechFCM: true
          },
          ios: {
            groupIdentifier: "<your-app-group-id>",
            mode: "development/ production"
          }
        }
      ],
      [
        "smartech-appinbox-expo-plugin",
        {
          android: {
            SMARTECH_APPINBOX_SDK_VERSION: "3.5.1"
          }
        }
      ]

    ]

Retrieving Deeplink Data

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

Use this 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);

Refer to the links below to learn more about the React Native SDK.

User & Event Tracking

Product Experience

App Inbox Integration