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.
- 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
orApp.config.js
File
Once the plugins are installed, configure your Expo project to use these plugins. Depending on your project setup, modify theapp.json
orapp.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: backupXMLFiles | This is the path of your XML files. | assets |
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 |
addTestDevice | Android | Enables you to add your device as a test device. | 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 |
addTestDevice | iOS | Enables you to add your device as a test device | true |
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.
Updated 6 days ago