Smart Message Engage React Native SDK

Last Update: 08.05.2025 Last Version: v2.0.11

Installation

npm install react-native-smartmessage

Android Specific Install

{YOUR_PORJECT}/android/app/build.gradle

...
dependencies {
    ...
   implementation 'io.github.smartmessagesdk:smartmessage-sdk:<latest-version>'
}
...

🔥 Firebase Project

We need google-services.json file.

follow the links

https://firebase.google.com/docs/android/setup https://support.google.com/firebase/answer/7015592

after downloading google-services.json file, move to {YOUR_APP}/android/app/google-services.json

{YOUR_PROJECT}/android/build.gradle

buildscript {
    ...
    dependencies {
        ...
        classpath 'com.github.kezong:fat-aar:1.3.6' // add this line
        classpath 'com.google.gms:google-services:4.3.10' // add this line
    }
}

{YOUR_PROJECT}/android/app/build.gradle (add to the bottom line of dependencies definitions)

...
apply plugin: 'com.google.gms.google-services' // add this line

📝 SmartMessage config file

you can access this file from SmartMessage panel {YOUR_PROJECT}/android/app/src/main/assets/sme-config.json

⚠️ The config file should contain hashed value containing Basic Auth credentials. For Example:

{
    ...
    "credential": "6d6847e878d7076bd6057b4618eec0c79bfc3c93fa661feb4f63d1413b08a3d50e147384eeff624df7d210db0cb4343db67a6923c980a646c7ecffea6b8736819fe75998f3b080c2ba11ba301ae81457f5dd5844bf9d0ffae50223601d82bcdc",
    ...
}

🤝 SDK Initilization

Add this line to onCreate method of Application subclass

Like this

...
import tr.com.odc.smartmessage.SmartMessage; // add this line

public class MainApplication extends Application {
    @Override
    public void onCreate() {
        super.onCreate();
        SmartMessage.getInstance().init(this); // add this line
        //..
    }
}

💂‍♂️ ProGuard Rule

If you're using shrinkResources and minifyEnabled, you should add the proguard rule.

-keep class tr.com.odc.smartmessage.** { *; }

🔔 Notification Icon

The drawable folders can contain the file sme_ic_notification.png Check this doc for more information If this drawable file is missing, the app’s default launcher icon will show.

🔔 Notification Sound

If you want to use a different sound than the default notification sound of the device. {YOUR_PROJECT}/android/app/src/main/res/raw folder can contain the file sme_sound.wav If this sound file is missing, the device's default notification sound will play.

🖌 Dialog Designs

We have provided a flexible design structure for you. You should keep the xml Layout files we shared with you in the relevant place. You can change these designs as you wish but you should not change the classes and ids

{YOUR_PROJECT}/android/app/src/main/res/layout

• sme_0_basic_layout.xml
• sme_1_image_layout.xml
• sme_2_14_html_dialog_layout.xml
• sme_3_gif_layout.xml
• sme_4_video_layout.xml
• sme_5_audio_layout.xml
• sme_6_carousel_basic_layout.xml
• sme_7_carousel_rotary_layout.xml
• sme_8_carousel_coverflow_layout.xml
• sme_9_slider_layout.xml
• sme_10_small_dialog_layout.xml
• sme_10_small_dialog_button.xml
• sme_11_medium_dialog_layout.xml
• sme_12_fullscreen_dialog_layout.xml
• sme_13_interactive_dialog_layout.xml
• sme_audio_player.xml
• sme_common_button.xml
• sme_common_header.xml
• sme_common_title_and_message.xml
• sme_slide_layout.xml
• sme_audio_player.xml

{YOUR_PROJECT}/android/app/src/main/res/anim

It is the enter and exit animations of the dialogs of the SDK opened in the application. It enters from right to left. Exits left to right. You can change it as you wish.

• sme_enter_anim.xml
• sme_exit_anim.xml

{YOUR_PROJECT}/android/app/src/main/res/drawable

• sme_ic_play_audio.png
• sme_ic_stop_audio.png
• sme_ic_back_arrow.png

Deep Link

<activity
  android:name=".MainActivity"
  ... 
  >
     <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
    <intent-filter> <!-- add this line -->
        <action android:name="android.intent.action.VIEW" />  <!-- add this line -->
        <category android:name="android.intent.category.DEFAULT" /> <!-- add this line -->
        <category android:name="android.intent.category.BROWSABLE" /> <!-- add this line -->
        <data android:scheme="YOUR_SCHEME" /> <!-- add this line -->
    </intent-filter><!-- add this line -->
</activity>

import { Linking } from 'react-native';

const handleDeeplink = (url) => {
    if (url === 'YOUR_SCHEME://campaigns') {
        // ex: navigationRef.current.navigate('Campaigns')
    }
}

React.useEffect(() => {
    // Handle the deeplink that launches the application.
    Linking.getInitialURL().then((url) => {
        handleDeeplink(url)
    }).catch((error) => {
        // handle error
    })
    
    // Handle the deeplink while the application is running.
    let unsubscribe = Linking.addEventListener('url', ({ url }) => {
        handleDeeplink(url)
    });

    return unsubscribe
}, [])
    

🔎 How do I distinguish it from other SDKs?

It is important that you inherit from the SMEMessagingService class.

public class MyFirebaseService extends SMEMessagingService {

    @Override
    public void onNewToken(String token) {
        super.onNewToken(token);
    }

    @Override
    public void onMessageReceived(RemoteMessage remoteMessage) {
        super.onMessageReceived(remoteMessage);
        // sdk does its own vendor check

        String vendor = remoteMessage.getData().get("vendor");
        // check vendor field
        if (!vendor.equals(SmartMessage.VENDOR)) {
            // your codes
        }
    }
}

iOS Specific Install

It is very similar to the native iOS SDK document. There are a few minor differences.

• Open {PROJECT_PATH}/ios/{PROJECT_NAME}.xcworkspace folder with Xcode.
• Create the SmartMessageSdk folder and move the Config.plist file into it.
• Create an empty swift file to create a Swift bridge in the Objective-C project. After creating the empty swift file, Xcode will ask you if you want to enable bridging. Accept that request. You can edit it from Target > Build Settings> Swift Compiler - General Target > Signing & Capabilities> + Capability Set app group name in SmartMessageSdk > Config.plist > appGroupName

Notification Content Extension

step 1

select Notification Content Extension

step 2

step 3

step 4

⚠️ Create an empty swift file to create a Swift bridge in the Objective-C project. After creating the empty swift file, Xcode will ask you if you want to enable bridging. Accept that request.

step 5

Notification Service Extension

step 1

select Notification Service Extension

step 2

step 3

step 4

⚠️ Create an empty swift file to create a Swift bridge in the Objective-C project. After creating the empty swift file, Xcode will ask you if you want to enable bridging. Accept that request.

step 5

Add search paths to podfile > target 'TARGET_NAME' for extensions and run pod install

target 'BaseNotificationExtension' do
  inherit! :search_paths
end

target 'BaseServiceExtension' do
  inherit! :search_paths
end

AppDelegate.m

didRegisterForRemoteNotificationsWithDeviceToken will be triggered when you get permission from the user to send push notifications. The SDK will register to the server.

// ...
#import <RNSmartMessage/RNSmartMessage.h>  // add this line
// ...
- (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken
{
  [RNSmartMessage initializeSdk:deviceToken];  // add this line
}
// ...

NotificationService.m

#import <RNSmartMessage/RNSmartMessage.h>  // add this line

self.bestAttemptContent.title = [NSString stringWithFormat:@"%@ [modified]", self.bestAttemptContent.title]; // remove this line

// add this lines
[RNSmartMessage configureNotificationService:request
                contentHandler:self.contentHandler
                bestAttemptContent:self.bestAttemptContent];

NotificationViewController.m

#import <RNSmartMessage/RNSmartMessage.h> // add this line

@property IBOutlet UILabel *label; // remove this line

self.label.text = notification.request.content.body; // remove this line

// add this lines
[RNSmartMessage handleNotification:self
                baseView:self.view
                userInfo:notification.request.content.userInfo
                isNotificationWillPresent:false];

Notification Content Extension > Info.plist

Replace this part

<key>NSExtensionAttributes</key>
<dict>
	<key>UNNotificationExtensionCategory</key>
	<string>myNotificationCategory</string>
	<key>UNNotificationExtensionInitialContentSizeRatio</key>
	<real>1</real>
</dict>

with this part

<key>NSExtensionAttributes</key>
<dict>
	<key>UNNotificationExtensionCategory</key>
	<string>smBaseNotification</string>
	<key>UNNotificationExtensionInitialContentSizeRatio</key>
	<real>1</real>
	<key>UNNotificationExtensionDefaultContentHidden</key>
	<true/>
	<key>UNNotificationExtensionUserInteractionEnabled</key>
	<true/>
</dict>

Deep Link

Let's configure the native iOS app to open based on the smerndemo:// URI scheme.

You'll need to link RCTLinking to your project by following the steps described here. To be able to listen to incoming app links, you'll need to add the following lines to APP_NAME/ios/APP_NAME/AppDelegate.m

// Add the header at the top of the file:
#import <React/RCTLinkingManager.h>

// Add this above `@end`:
- (BOOL)application:(UIApplication *)application
   openURL:(NSURL *)url
   options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
{
  return [RCTLinkingManager application:application openURL:url options:options];
}

npx uri-scheme add smerndemo --ios

import { Linking } from 'react-native';

const handleDeeplink = (url) => {
    if (url === 'smerndemo://campaigns') {
        // ex: navigationRef.current.navigate('Campaigns')
    }
}

React.useEffect(() => {
    // Handle the deeplink that launches the application.
    Linking.getInitialURL().then((url) => {
        handleDeeplink(url)
    }).catch((error) => {
        // handle error
    })
    
    // Handle the deeplink while the application is running.
    let unsubscribe = Linking.addEventListener('url', ({ url }) => {
        handleDeeplink(url)
    });

    return unsubscribe
}, [])
    

Usage in React Native

import SmartMessage from 'react-native-smartmessage';

User Info

// GETTER
SmartMessage.getUserInfo().then((userInfo: UserInfo) => {
    // handle userInfo
    setCurrentUserInfo(userInfo)
}).catch((error) => {
    // handle error
});

SmartMessage.getMemberFields((memberFields: {FIELDNAME:string}[])=>{
//  returns [
//      {"FIELDNAME":"YOUR_FIELD_NAME_1"},
//      {"FIELDNAME":"YOUR_FIELD_NAME_2"},
//  ]
});


// SETTER
SmartMessage.setUserInfo({
    ...userInfo, 
    name: 'John',
    surname: 'Doe',
    email: '[email protected]',
    lang: 'tr',
    gender: '1', // or 0
    tags: ['tag1', 'tag2', 'tag3'].join(','),
    rcv_not: true,
    mobile: '08502213900',
    birthdate: '04.02.2020',
    username: 'johndoe',
    id: 'customer_id_123',
    memberfields: [
        { fieldName: 'YOUR_FIELD_NAME_1', fieldValue: 'VALUE_1' },
        { fieldName: 'YOUR_FIELD_NAME_2', fieldValue: 'VALUE_2' },
        //...
    ]
}).then(() => {
    // handle success
}).catch((error) => {
    // handle error
});
        

Device Info

Device information is automatically sent to the server by the SDK.

// GETTER
SmartMessage.getDeviceInfo().then((deviceInfo: DeviceInfo) => {
    // handle deviceInfo
}).catch((err) => {
    // handle error
});

Login & Logout

SmartMessage.reportLoggedIn()
SmartMessage.reportLoggedOut()

Analytics

SmartMessage.reportAnalytic(KEYWORD)

Events

// MESSAGE_ID can be null
SmartMessage.reportEvent(MESSAGE_ID, EVENT_TYPE, EVENT_NAME, DATA)

📬 Inbox

SmartMessage.getMessageList({
    page_index: 1,
    page_size: 20,
    start_date: moment().subtract(1, 'months').format('DD.MM.yyyy HH:mm:ss'),
    end_date: moment().format('DD.MM.yyyy HH:mm:ss'),
    expired_push: true,
    status: ['0', '1', '2'],
    push_type: ['0', '1'],
}).then((messageListResponse: MessageListResponse) => {
    // handle response
}).catch((error) => {
    // handle error
});

If you want to open the notification from the inbox, you can use the displayMessageContent method. The SDK will automatically give feedback to server.

SmartMessage.displayMessageContent(MessageContent)

✅ Status Feedback

DELIVERED(0), VIEW(1), OPEN(2), DELETE(3) status feedback is available.

| Status | Action | When does it happen? | | ------- | --- | ---- | | DELIVERED | SmartMessage.reportMessageDelivered(NOTIFICATION_ID); | When the notification reaches the phone, it is automatically called by the SDK. | | VIEW | SmartMessage.reportMessageView(NOTIFICATION_ID); | When notification is displayed within the application via SDK it is automatically called by the SDK. | | OPEN | SmartMessage.reportMessageOpen(NOTIFICATION_ID); | When the notification is clicked from the notification panel it is automatically called by the SDK. | | DELETE | SmartMessage.reportMessageDeleted(NOTIFICATION_ID); | When it is swiped and deleted from the notification panel it is automatically called by the SDK |