{"metadata":{"image":[],"title":"","description":""},"api":{"url":"","auth":"required","params":[],"results":{"codes":[]},"settings":"","apiSetting":null},"next":{"description":"","pages":[]},"title":"React Native Integration","type":"basic","slug":"react-native-integration","excerpt":"","body":"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](http://facebook.github.io/react-native/docs/getting-started.html#content) tutorial from React Native.\n\n## Add and link the plugin\n\nFirst, add the plugin to your project via NPM, then navigate to its folder.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"npm i react-native-sailthru-mobile\\ncd node_modules/react-native-sailthru-mobile\",\n      \"language\": \"shell\"\n    }\n  ]\n}\n[/block]\n## iOS integration\n\nOpen your Xcode project or workspace. Drag into **Libraries** the following files from `node_modules/react-native-sailthru-mobile`:\n\n * `RNSailthruMobile.h`\n * `RNSailthruMobile.m`\n * `RNSailthruMobileBridge.h`\n * `RNSailthruMobileBridge.m`\n\nHighlight `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.\n\nNow, link the plugin with the native SDK by [adding the iOS SDK](doc:ios-integration) 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).\n\nImport 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. \n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"#import \\\"RNSailthruMobileBridge.h\\\"\\n\\n- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {\\n\\t    ...\\n      id<RCTBridgeDelegate> moduleInitialiser = [[RNSailthruMobileBridge alloc] initWithJSCodeLocation:jsCodeLocation appKey:SDK_KEY]; // Obtain SDK key from your Sailthru Mobile app settings\\n\\n      RCTBridge * bridge = [[RCTBridge alloc] initWithDelegate:moduleInitialiser launchOptions:launchOptions];\\n\\n      RCTRootView * rootView = [[RCTRootView alloc]\\n                                initWithBridge:bridge\\n                                moduleName::::at:::\\\"YOUR_MODULE_NAME\\\"\\n                                initialProperties:nil];\\n    ...\\n}\",\n      \"language\": \"objectivec\",\n      \"name\": \"Objective-C\"\n    },\n    {\n      \"code\": \"func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {\\n\\t\\t...\\n\\t\\tlet moduleInitialiser = RNSailthruMobileBridge(jsCodeLocation: jsCodeLocation,\\n                                      \\t\\t\\t appKey: SDK_KEY) // Obtain SDK key from your Sailthru Mobile app settings\\n  \\n\\t\\tlet bridgeModule = RCTBridge(delegate: moduleInitialiser, launchOptions: launchOptions)\\n    \\n\\t\\tlet rootView = RCTRootView(bridge: bridgeModule, moduleName: \\\"YOUR_MODULE_NAME\\\", initialProperties: nil)\\n\\t\\t...\\n}\",\n      \"language\": \"swift\"\n    }\n  ]\n}\n[/block]\nThis completes the plugin integration. If you haven't already done so, make sure you [setup your app for push notifications](https://docs.mobile.sailthru.com/docs/push-notifications-for-ios) in your Xcode project and you upload the push certificates in your app's dashboard.\n\n### Additional Options\nThere are additional options that can be specified on the RNSailthruMobileBridge object:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"RNSailthruMobileBridge *sailthruMobileBridge = [[RNSailthruMobileBridge alloc] \\n                                    initWithJSCodeLocation:jsCodeLocation\\n                                    \\t\\t\\t\\t\\t\\t\\t\\tappKey:SDK_KEY\\n                                   pushAuthorizationOption: STMPushAuthorizationOptionNoRequest,\\n                                      geoIpTrackingDefault:NO]\\nsailthruMobileBridge.displayInAppNotifications = NO\",\n      \"language\": \"objectivec\",\n      \"name\": null\n    },\n    {\n      \"code\": \"var sailthruMobileBridge = RNSailthruMobileBridge(jsCodeLocation: jsCodeLocation,\\n                                      \\t\\t\\t\\t\\t\\t\\t\\t\\t\\tappKey: SDK_KEY,\\n                                      \\t pushAuthorizationOption: .noRequest,\\n                                      \\t\\t\\tgeoIpTrackingDefault: false)\\n\\nsailthruMobileBridge?.displayInAppNotifications = false\",\n      \"language\": \"swift\"\n    }\n  ]\n}\n[/block]\nThese can be used to override whether the SDK should:\n* request push authorization automatically\n* enable geo IP tracking by default\n* display in app notifications\n\n\n## Android integration\n\nAdd the following to your project's gradle file (`android/settings.gradle`):\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"include ':react-native-sailthru-mobile'\\nproject(':react-native-sailthru-mobile').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-sailthru-mobile/android')\",\n      \"language\": \"groovy\",\n      \"name\": \"settings.gradle\"\n    }\n  ]\n}\n[/block]\nAdd the following to your app's gradle file (`android/app/build.gradle`):\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"repositories {\\n    google()\\n\\n    maven {\\n        url \\\"https://github.com/carnivalmobile/maven-repository/raw/master/\\\"\\n    }\\n}\\n\\ndependencies {\\n    implementation project(':react-native-sailthru-mobile')\\n}\",\n      \"language\": \"groovy\",\n      \"name\": \"build.gradle\"\n    }\n  ]\n}\n[/block]\nNext, you need to link the package in your `MainApplication.java`.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"// Add this import line\\nimport com.reactlibrary.RNSailthruMobilePackage;\\n\\npublic class MainApplication extends Application implements ReactApplication {\\n//  ...\\n\\n    @Override\\n    protected List<ReactPackage> getPackages() {\\n      return Arrays.<ReactPackage>asList(\\n          new MainReactPackage(),\\n          new RNSailthruMobilePackage(getApplicationContext(), SDK_KEY, true) // Obtain SDK key from your Sailthru Mobile app settings\\n      );\\n    }\\n//  ...\\n\\n}\",\n      \"language\": \"java\",\n      \"name\": \"Java\"\n    },\n    {\n      \"code\": \"// Add this import line\\nimport com.reactlibrary.RNSailthruMobilePackage\\n\\n\\nclass MainApplication : Application(), ReactApplication {\\n//  ...\\n    override fun getPackages(): List<ReactPackage> {\\n        return Arrays.asList(\\n          MainReactPackage(),\\n          RNSailthruMobilePackage(applicationContext, SDK_KEY, true) // Obtain SDK key from your Sailthru Mobile app settings\\n        )\\n    }\\n        \\n//  ...\\n}\",\n      \"language\": \"kotlin\"\n    }\n  ]\n}\n[/block]\nThis completes the plugin integration. If you haven't already done so, make sure you [setup your app for push notifications](https://docs.mobile.sailthru.com/docs/enable-push-notifications-for-android) in your Android Studio project you have the right FCM details in your app's dashboard.\n\n### Additional Options\nThere are additional options that can be specified on the RNSailthruMobilePackage object:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"// Add this import line\\nimport com.reactlibrary.RNSailthruMobilePackage;\\n\\npublic class MainApplication extends Application implements ReactApplication {\\n//  ...\\n\\n    @Override\\n    protected List<ReactPackage> getPackages() {\\n      return Arrays.<ReactPackage>asList(\\n          new MainReactPackage(),\\n          RNSailthruMobilePackage.Builder.createInstance(getApplicationContext(), SDK_KEY)\\n                            .setGeoIPTrackingDefault(false)\\n                            .setDisplayInAppNotifications(false)\\n                            .build()\\n      );\\n    }\\n//  ...\\n\\n}\",\n      \"language\": \"java\"\n    },\n    {\n      \"code\": \"// Add this import line\\nimport com.reactlibrary.RNSailthruMobilePackage\\n\\nclass MainApplication : Application(), ReactApplication {\\n//  ...\\n    override fun getPackages(): List<ReactPackage> {\\n        return Arrays.asList(\\n          MainReactPackage(),\\n          RNSailthruMobilePackage.Builder.createInstance(applicationContext,\\n                                                   SDK_KEY))\\n                            .setDisplayInAppNotifications(false)\\n                            .setGeoIPTrackingDefault(false)\\n                            .build()\\n        )\\n    }\\n        \\n//  ...\\n}\",\n      \"language\": \"kotlin\"\n    }\n  ]\n}\n[/block]\nThese can be accessed by using the RNSailthruMobilePackage Builder and can override whether the SDK should:\n* enable geo IP tracking by default\n* display in app notifications","updates":["5b734837f67a060003713bfe","5b73488ec2f15a000374f184"],"order":11,"isReference":false,"hidden":true,"sync_unique":"","link_url":"","link_external":false,"_id":"5e6156bf5e4a51006dcd815c","version":{"version":"1.5","version_clean":"1.5.0","codename":"ST Rebrand","is_stable":true,"is_beta":false,"is_hidden":false,"is_deprecated":false,"categories":["5e6156bf5e4a51006dcd8120","5e6156bf5e4a51006dcd8121","5e6156bf5e4a51006dcd8122","5e6156bf5e4a51006dcd8123","5e6156bf5e4a51006dcd8124","561c61b4ad272c0d00a892df","586c014c0abf1d0f000d04d4","58991d2ad207df0f0002186b","5e6156bf5e4a51006dcd8125","5e6156bf5e4a51006dcd8126","5af0fe494ca2730003cbc98a","5af0fe55ec80af0003804ca2","5e69868cbd5dcb006b35867b","5e6986ca2c6652006791b6e8"],"_id":"5e6156bf5e4a51006dcd818c","project":"55e67aaa9cc7c62b00c4a1ea","__v":2,"forked_from":"5b720760c44b7600034b7a08","createdAt":"2015-09-02T04:27:23.612Z","releaseDate":"2015-09-02T04:27:23.612Z"},"githubsync":"","project":"55e67aaa9cc7c62b00c4a1ea","createdAt":"2016-02-22T02:03:50.181Z","parentDoc":null,"__v":6,"category":{"sync":{"isSync":false,"url":""},"pages":["5e6156bf5e4a51006dcd812a","5e6156bf5e4a51006dcd812c","5e6156bf5e4a51006dcd812d","5e6156bf5e4a51006dcd812e","55e682b7de6fef23009480dc","5e6156bf5e4a51006dcd812f","5e6156bf5e4a51006dcd8130","5e6156bf5e4a51006dcd8131","5e6156bf5e4a51006dcd8132","5e6156bf5e4a51006dcd8133","5e6156bf5e4a51006dcd8134","5b720760c44b7600034b79bc","5e6156bf5e4a51006dcd8135","5e6156bf5e4a51006dcd8148","5e6156bf5e4a51006dcd8149","5e6156bf5e4a51006dcd814a","5e6156bf5e4a51006dcd814b","5e6156bf5e4a51006dcd814c","5e6156bf5e4a51006dcd814f","5e6156bf5e4a51006dcd8150","5e6156bf5e4a51006dcd8152","561c6ca0be5fb20d00077754","5e6156bf5e4a51006dcd8157","5e6156bf5e4a51006dcd8158","5b720760c44b7600034b79e2","5e6156bf5e4a51006dcd8159","5e6156bf5e4a51006dcd815a","5e6156bf5e4a51006dcd815b","5e6156bf5e4a51006dcd815c","56cfa5386c5d7a13005eec0f","56e73d86555c030e00a52a73","56e7460c9000b120000ffe2e","56e8c19e99c6400e003820cf","56e8c53fc88bf80e00f8bed8","56f06ff4d386ce0e008e9b21"],"title":"Install in your app","slug":"install-in-your-app","order":1,"from_sync":false,"reference":false,"_id":"5e6156bf5e4a51006dcd8121","__v":35,"createdAt":"2015-09-02T04:30:13.305Z","project":"55e67aaa9cc7c62b00c4a1ea","version":"5e6156bf5e4a51006dcd818c"},"user":"55d29988486de50d00327118"}

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](http://facebook.github.io/react-native/docs/getting-started.html#content) tutorial from React Native. ## Add and link the plugin First, add the plugin to your project via NPM, then navigate to its folder. [block:code] { "codes": [ { "code": "npm i react-native-sailthru-mobile\ncd node_modules/react-native-sailthru-mobile", "language": "shell" } ] } [/block] ## 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](doc:ios-integration) 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. [block:code] { "codes": [ { "code": "#import \"RNSailthruMobileBridge.h\"\n\n- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {\n\t ...\n id<RCTBridgeDelegate> moduleInitialiser = [[RNSailthruMobileBridge alloc] initWithJSCodeLocation:jsCodeLocation appKey:SDK_KEY]; // Obtain SDK key from your Sailthru Mobile app settings\n\n RCTBridge * bridge = [[RCTBridge alloc] initWithDelegate:moduleInitialiser launchOptions:launchOptions];\n\n RCTRootView * rootView = [[RCTRootView alloc]\n initWithBridge:bridge\n moduleName:@\"YOUR_MODULE_NAME\"\n initialProperties:nil];\n ...\n}", "language": "objectivec", "name": "Objective-C" }, { "code": "func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {\n\t\t...\n\t\tlet moduleInitialiser = RNSailthruMobileBridge(jsCodeLocation: jsCodeLocation,\n \t\t\t appKey: SDK_KEY) // Obtain SDK key from your Sailthru Mobile app settings\n \n\t\tlet bridgeModule = RCTBridge(delegate: moduleInitialiser, launchOptions: launchOptions)\n \n\t\tlet rootView = RCTRootView(bridge: bridgeModule, moduleName: \"YOUR_MODULE_NAME\", initialProperties: nil)\n\t\t...\n}", "language": "swift" } ] } [/block] This completes the plugin integration. If you haven't already done so, make sure you [setup your app for push notifications](https://docs.mobile.sailthru.com/docs/push-notifications-for-ios) 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: [block:code] { "codes": [ { "code": "RNSailthruMobileBridge *sailthruMobileBridge = [[RNSailthruMobileBridge alloc] \n initWithJSCodeLocation:jsCodeLocation\n \t\t\t\t\t\t\t\tappKey:SDK_KEY\n pushAuthorizationOption: STMPushAuthorizationOptionNoRequest,\n geoIpTrackingDefault:NO]\nsailthruMobileBridge.displayInAppNotifications = NO", "language": "objectivec", "name": null }, { "code": "var sailthruMobileBridge = RNSailthruMobileBridge(jsCodeLocation: jsCodeLocation,\n \t\t\t\t\t\t\t\t\t\tappKey: SDK_KEY,\n \t pushAuthorizationOption: .noRequest,\n \t\t\tgeoIpTrackingDefault: false)\n\nsailthruMobileBridge?.displayInAppNotifications = false", "language": "swift" } ] } [/block] 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`): [block:code] { "codes": [ { "code": "include ':react-native-sailthru-mobile'\nproject(':react-native-sailthru-mobile').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-sailthru-mobile/android')", "language": "groovy", "name": "settings.gradle" } ] } [/block] Add the following to your app's gradle file (`android/app/build.gradle`): [block:code] { "codes": [ { "code": "repositories {\n google()\n\n maven {\n url \"https://github.com/carnivalmobile/maven-repository/raw/master/\"\n }\n}\n\ndependencies {\n implementation project(':react-native-sailthru-mobile')\n}", "language": "groovy", "name": "build.gradle" } ] } [/block] Next, you need to link the package in your `MainApplication.java`. [block:code] { "codes": [ { "code": "// Add this import line\nimport com.reactlibrary.RNSailthruMobilePackage;\n\npublic class MainApplication extends Application implements ReactApplication {\n// ...\n\n @Override\n protected List<ReactPackage> getPackages() {\n return Arrays.<ReactPackage>asList(\n new MainReactPackage(),\n new RNSailthruMobilePackage(getApplicationContext(), SDK_KEY, true) // Obtain SDK key from your Sailthru Mobile app settings\n );\n }\n// ...\n\n}", "language": "java", "name": "Java" }, { "code": "// Add this import line\nimport com.reactlibrary.RNSailthruMobilePackage\n\n\nclass MainApplication : Application(), ReactApplication {\n// ...\n override fun getPackages(): List<ReactPackage> {\n return Arrays.asList(\n MainReactPackage(),\n RNSailthruMobilePackage(applicationContext, SDK_KEY, true) // Obtain SDK key from your Sailthru Mobile app settings\n )\n }\n \n// ...\n}", "language": "kotlin" } ] } [/block] This completes the plugin integration. If you haven't already done so, make sure you [setup your app for push notifications](https://docs.mobile.sailthru.com/docs/enable-push-notifications-for-android) 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: [block:code] { "codes": [ { "code": "// Add this import line\nimport com.reactlibrary.RNSailthruMobilePackage;\n\npublic class MainApplication extends Application implements ReactApplication {\n// ...\n\n @Override\n protected List<ReactPackage> getPackages() {\n return Arrays.<ReactPackage>asList(\n new MainReactPackage(),\n RNSailthruMobilePackage.Builder.createInstance(getApplicationContext(), SDK_KEY)\n .setGeoIPTrackingDefault(false)\n .setDisplayInAppNotifications(false)\n .build()\n );\n }\n// ...\n\n}", "language": "java" }, { "code": "// Add this import line\nimport com.reactlibrary.RNSailthruMobilePackage\n\nclass MainApplication : Application(), ReactApplication {\n// ...\n override fun getPackages(): List<ReactPackage> {\n return Arrays.asList(\n MainReactPackage(),\n RNSailthruMobilePackage.Builder.createInstance(applicationContext,\n SDK_KEY))\n .setDisplayInAppNotifications(false)\n .setGeoIPTrackingDefault(false)\n .build()\n )\n }\n \n// ...\n}", "language": "kotlin" } ] } [/block] 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