React Native Integration

Our React Native plugin leverages our native SDKs for iOS and Android. This guide assumes you are adding Sailthru Mobile to an existing React Native project. If you are starting from scratch, follow the Getting Started tutorial from React Native.

Add and link the plugin

First, add the plugin to your project via NPM, then navigate to its folder.

npm i react-native-sailthru-mobile
cd node_modules/react-native-sailthru-mobile

iOS integration

Open your Xcode project or workspace. Drag into Libraries the following files from node_modules/react-native-sailthru-mobile:

RNSailthruMobile.h
RNSailthruMobile.m
RNSailthruMobileBridge.h
RNSailthruMobileBridge.m

Highlight RNSailthruMobile.m and RNSailthruMobileBridge.m. Make sure these files' membership is your main app's target by selecting your project name from the right hand menu's Target Membership section.

Now, link the plugin with the native SDK by adding the iOS SDK to your project. We suggest you use CocoaPods to easily integrate the SDK to your project, but you can also install the framework manually (SailthruMobile.framework can be obtained from node_modules/react-native-sailthru-mobile).

Import the RNSailthruMobileBridge header file #import "RNSailthruMobileBridge.h" into the native UIApplicationDelegate implementation (or the Swift bridging header). You will then need replace the code that creates your RCTRootView with the code below. This adds the Sailthru Mobile React Native modules to the root view.

#import "RNSailthruMobileBridge.h"

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
	    ...
      id<RCTBridgeDelegate> moduleInitialiser = [[RNSailthruMobileBridge alloc] initWithJSCodeLocation:jsCodeLocation appKey:SDK_KEY]; // Obtain SDK key from your Sailthru Mobile app settings

      RCTBridge * bridge = [[RCTBridge alloc] initWithDelegate:moduleInitialiser launchOptions:launchOptions];

      RCTRootView * rootView = [[RCTRootView alloc]
                                initWithBridge:bridge
                                moduleName:@"YOUR_MODULE_NAME"
                                initialProperties:nil];
    ...
}

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
		...
		let moduleInitialiser = RNSailthruMobileBridge(jsCodeLocation: jsCodeLocation,
                                      			 appKey: SDK_KEY) // Obtain SDK key from your Sailthru Mobile app settings
  
		let bridgeModule = RCTBridge(delegate: moduleInitialiser, launchOptions: launchOptions)
    
		let rootView = RCTRootView(bridge: bridgeModule, moduleName: "YOUR_MODULE_NAME", initialProperties: nil)
		...
}

This completes the plugin integration. If you haven't already done so, make sure you setup your app for push notifications in your Xcode project and you upload the push certificates in your app's dashboard.

Additional Options

There are additional options that can be specified on the RNSailthruMobileBridge object:

RNSailthruMobileBridge *sailthruMobileBridge = [[RNSailthruMobileBridge alloc] 
                                    initWithJSCodeLocation:jsCodeLocation
                                    								appKey:SDK_KEY
                                   pushAuthorizationOption: STMPushAuthorizationOptionNoRequest
                                      geoIpTrackingDefault:NO];
sailthruMobileBridge.displayInAppNotifications = NO;

var sailthruMobileBridge = RNSailthruMobileBridge(jsCodeLocation: jsCodeLocation,
                                      										appKey: SDK_KEY,
                                      	 pushAuthorizationOption: .noRequest,
                                      			geoIpTrackingDefault: false)

sailthruMobileBridge?.displayInAppNotifications = false

These can be used to override whether the SDK should:

request push authorization automatically
enable geo IP tracking by default
display in app notifications

Android integration

Add the following to your project's gradle file (android/settings.gradle):

include ':react-native-sailthru-mobile'
project(':react-native-sailthru-mobile').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-sailthru-mobile/android')

Add the following to your app's gradle file (android/app/build.gradle):

repositories {
    google()

    maven {
        url "https://github.com/sailthru/maven-repository/raw/master/"
    }
}

dependencies {
    implementation project(':react-native-sailthru-mobile')
}

Next, you need to link the package in your MainApplication.java.

// Add this import line
import com.sailthru.mobile.rnsdk.RNSailthruMobilePackage;

public class MainApplication extends Application implements ReactApplication {
//  ...

    @Override
    protected List<ReactPackage> getPackages() {
      List<ReactPackage> packages = new PackageList(this).getPackages();
      packages.add(new RNSailthruMobilePackage(getApplicationContext(), SDK_KEY)); // Obtain SDK key from your Sailthru Mobile app settings
      return packages;
    }
//  ...

}

// Add this import line
import com.reactlibrary.RNSailthruMobilePackage


class MainApplication : Application(), ReactApplication {
//  ...
    override fun getPackages(): List<ReactPackage> {
      	return PackageList(this).getPackages().apply {
          	add(RNSailthruMobilePackage(applicationContext, SDK_KEY))
        }
    }
        
//  ...
}

This completes the plugin integration. If you haven't already done so, make sure you setup your app for push notifications in your Android Studio project you have the right FCM details in your app's dashboard.

Additional Options

There are additional options that can be specified on the RNSailthruMobilePackage object:

// Add this import line
import com.sailthru.mobile.rnsdk.RNSailthruMobilePackage;

public class MainApplication extends Application implements ReactApplication {
//  ...

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
          RNSailthruMobilePackage.Builder.createInstance(getApplicationContext(), SDK_KEY)
                            .setGeoIPTrackingDefault(false)
                            .setDisplayInAppNotifications(false)
                            .build()
      );
    }
//  ...

}

// Add this import line
import com.reactlibrary.RNSailthruMobilePackage

class MainApplication : Application(), ReactApplication {
//  ...
    override fun getPackages(): List<ReactPackage> {
        return Arrays.asList(
          MainReactPackage(),
          RNSailthruMobilePackage.Builder.createInstance(applicationContext,
                                                   SDK_KEY))
                            .setDisplayInAppNotifications(false)
                            .setGeoIPTrackingDefault(false)
                            .build()
        )
    }
        
//  ...
}

These can be accessed by using the RNSailthruMobilePackage Builder and can override whether the SDK should:

enable geo IP tracking by default
display in app notifications