React Native Expo Plugin

Learn to integrate Smartech SDK with your React Native Expo application.

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.

  1. 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
  1. 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
  1. 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.
  1. 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
  1. 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
ParameterDescriptionExample Value
isNewArchEnabled Indicates if the React Native New Architecture is enabled. Set to true to enable or false to disable.true
deepLinkDelay3
android.isLogEnabledEnables or disables logging for Android. Set to true to enable logging or false to disable.true
android: backupXMLFilesThis is the path of your XML files.assets
android.isKotlinProjectSpecifies whether the project is using Kotlin. It is set to true if the project is in Kotlin or false otherwise.true
android.smartechMetaDataMetadata key-value pairs are used to configure Smartech on Android.[{"name": "SMT_APP_ID", "value": "06b57d52c914803e4de8cbcb978da09f"}]
ios.appIdThe Smartech App ID for iOS.3bdc168fce4668fab6aca8885cc03221
ios.bundleIdentifierThe bundle identifier for the iOS app.com.netcore.SmartechApp
ios.groupIdentifierThe group identifier for the iOS app.com.netcore.SmartechApp
ios.autoFetchLocationIt automatically fetches the device's location in iOS when it is set to true.false
ios.useAdvIDEnables the Advertising Identifier (IDFA) to be used in iOS when set to true.true
ios.isLogEnabledEnables or disables logging for iOS.true
2. smartnudges
ParameterOSDescriptionExample 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
useEncryptionAndroidEnables encryption for Smartech Nudges in Android. Set to true to enable, or false to disable.true
addTestDeviceAndroidEnables you to add your device as a test device.true
isLogEnabledAndroidEnables or disables logging for Smartech Nudges in Android. Set to true to enable logging, or false to disable.true
smartechNudgesMetaDataAndroidAn 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"}]
appIdiOSThe Smartech Nudges App ID for iOS.HG7WKEM8KK3V8LVNGGDDO04D4
addTestDeviceiOSEnables you to add your device as a test devicetrue
appKeyiOSThe Smartech Nudges App Key for iOS.XAP23PIPEI1V1BEZZE5PPZ0YSWQFN45SQTV9MO353OODNSUSU0
testDeviceURLNameiOSThe test device URL name for Hansel in iOS.com.netcore.SmartechApp
testDeviceURLSchemaiOSThe test device URL schema for Hansel in iOS.hanselpebbletrace
3. smartech-push-expo-plugin
ParameterDescriptionExample Value
android.SMARTECH_PUSH_SDK_VERSIONSpecifies the Smartech Push SDK version for Android.3.5.1
android.isKotlinProjectIndicates whether the project is using Kotlin.true
android.useSmartechFCMEnable the use of Smartech FCM on Android.true
ios.groupIdentifierGroup identifier for iOS.com.netcore.SmartechApp
ios.modeUsed to configure APNs environment entitlement.development or production
4.smartech-appinbox-expo-plugin
ParameterDescriptionRequiredExample Value
android.SMARTECH_APPINBOX_SDK_VERSIONSpecifies the Smartech AppInbox SDK version for Android.Yes3.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