{"_id":"5b720760c44b7600034b79e6","version":{"_id":"5b720760c44b7600034b7a08","project":"55e67aaa9cc7c62b00c4a1ea","__v":0,"forked_from":"5b1f2cbdfd653400031d8d9f","createdAt":"2015-09-02T04:27:23.612Z","releaseDate":"2015-09-02T04:27:23.612Z","categories":["5b720760c44b7600034b79a7","5b720760c44b7600034b79a8","5b720760c44b7600034b79a9","5b720760c44b7600034b79aa","5b720760c44b7600034b79ab","561c61b4ad272c0d00a892df","586c014c0abf1d0f000d04d4","58991d2ad207df0f0002186b","5b720760c44b7600034b79ac","5b720760c44b7600034b79ad","5af0fe494ca2730003cbc98a","5af0fe55ec80af0003804ca2"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"API V6","version_clean":"1.4.0","version":"1.4"},"githubsync":"","project":"55e67aaa9cc7c62b00c4a1ea","parentDoc":null,"__v":6,"category":{"_id":"5b720760c44b7600034b79a8","__v":35,"pages":["5b720760c44b7600034b79b1","5b720760c44b7600034b79b3","5b720760c44b7600034b79b4","5b720760c44b7600034b79b5","55e682b7de6fef23009480dc","5b720760c44b7600034b79b6","5b720760c44b7600034b79b7","5b720760c44b7600034b79b8","5b720760c44b7600034b79b9","5b720760c44b7600034b79ba","5b720760c44b7600034b79bb","5b720760c44b7600034b79bc","5b720760c44b7600034b79bd","5b720760c44b7600034b79d1","5b720760c44b7600034b79d2","5b720760c44b7600034b79d3","5b720760c44b7600034b79d4","5b720760c44b7600034b79d5","5b720760c44b7600034b79d8","5b720760c44b7600034b79d9","5b720760c44b7600034b79db","561c6ca0be5fb20d00077754","5b720760c44b7600034b79e0","5b720760c44b7600034b79e1","5b720760c44b7600034b79e2","5b720760c44b7600034b79e3","5b720760c44b7600034b79e4","5b720760c44b7600034b79e5","5b720760c44b7600034b79e6","56cfa5386c5d7a13005eec0f","56e73d86555c030e00a52a73","56e7460c9000b120000ffe2e","56e8c19e99c6400e003820cf","56e8c53fc88bf80e00f8bed8","56f06ff4d386ce0e008e9b21"],"project":"55e67aaa9cc7c62b00c4a1ea","version":"5b720760c44b7600034b7a08","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-09-02T04:30:13.305Z","from_sync":false,"order":1,"slug":"install-in-your-app","title":"Install in your app"},"user":"55d29988486de50d00327118","updates":["5b734837f67a060003713bfe","5b73488ec2f15a000374f184"],"next":{"pages":[],"description":""},"createdAt":"2016-02-22T02:03:50.181Z","link_external":false,"link_url":"","sync_unique":"","hidden":true,"api":{"results":{"codes":[]},"settings":"","apiSetting":null,"auth":"required","params":[],"url":""},"isReference":false,"order":11,"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-carnival\\ncd node_modules/react-native-carnival\",\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-carnival`:\n\n * `RNCarnival.h`\n * `RNCarnival.m`\n * `RNCarnivalBridge.h`\n * `RNCarnivalBridge.m`\n\nHighlight `RNCarnival.m` and `RNCarnivalBridge.m`. Make sure these files' membership is your main app's target by selecting your project name from the right hand side's Target Membership section:\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/158c9fd-Screen_Shot_2017-10-11_at_3.24.22_PM.png\",\n        \"Screen Shot 2017-10-11 at 3.24.22 PM.png\",\n        516,\n        938,\n        \"#f0f0f0\"\n      ]\n    }\n  ]\n}\n[/block]\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 (Carnival.framework can be obtained from node_modules/react-native-carnival).\n\nImport the RNCarnivalBridge header file `#import \"RNCarnivalBridge.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 Carnival React Native modules to the root view. \n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"#import \\\"RNCarnivalBridge.h\\\"\\n\\n- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {\\n\\t    ...\\n      id<RCTBridgeDelegate> moduleInitialiser = [[RNCarnivalBridge alloc] initWithJSCodeLocation:jsCodeLocation appKey:SDK_KEY displayInAppNotifications:YES]; // Obtain SDK key from your Carnival 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 = RNCarnivalBridge(jsCodeLocation: jsCodeLocation, appKey: SDK_KEY, registerForPushNotifications: true, displayInAppNotifications: true) // Obtain SDK key from your Carnival 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.carnival.io/docs/push-notifications-for-ios) in your Xcode project and you upload the push certificates in your app's dashboard.\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-carnival'\\nproject(':react-native-carnival').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-carnival/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    compile project(':react-native-carnival')\\n    compile 'com.carnival.sdk:carnival:6.+'\\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.RNCarnivalPackage;\\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 RNCarnivalPackage(getApplicationContext(), SDK_KEY, true) // Obtain SDK key from your Carnival app settings\\n      );\\n    }\\n//  ...\\n\\n}\",\n      \"language\": \"java\",\n      \"name\": \"MainApplication.java\"\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.carnival.io/docs/enable-push-notifications-for-android) in your Android Studio project you have the right FCM details in your app's dashboard.","excerpt":"","slug":"react-native-integration","type":"basic","title":"React Native Integration"}

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-carnival\ncd node_modules/react-native-carnival", "language": "shell" } ] } [/block] ## iOS integration Open your Xcode project or workspace. Drag into **Libraries** the following files from `node_modules/react-native-carnival`: * `RNCarnival.h` * `RNCarnival.m` * `RNCarnivalBridge.h` * `RNCarnivalBridge.m` Highlight `RNCarnival.m` and `RNCarnivalBridge.m`. Make sure these files' membership is your main app's target by selecting your project name from the right hand side's Target Membership section: [block:image] { "images": [ { "image": [ "https://files.readme.io/158c9fd-Screen_Shot_2017-10-11_at_3.24.22_PM.png", "Screen Shot 2017-10-11 at 3.24.22 PM.png", 516, 938, "#f0f0f0" ] } ] } [/block] 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 (Carnival.framework can be obtained from node_modules/react-native-carnival). Import the RNCarnivalBridge header file `#import "RNCarnivalBridge.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 Carnival React Native modules to the root view. [block:code] { "codes": [ { "code": "#import \"RNCarnivalBridge.h\"\n\n- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {\n\t ...\n id<RCTBridgeDelegate> moduleInitialiser = [[RNCarnivalBridge alloc] initWithJSCodeLocation:jsCodeLocation appKey:SDK_KEY displayInAppNotifications:YES]; // Obtain SDK key from your Carnival 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 = RNCarnivalBridge(jsCodeLocation: jsCodeLocation, appKey: SDK_KEY, registerForPushNotifications: true, displayInAppNotifications: true) // Obtain SDK key from your Carnival 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.carnival.io/docs/push-notifications-for-ios) in your Xcode project and you upload the push certificates in your app's dashboard. ## Android integration Add the following to your project's gradle file (`android/settings.gradle`): [block:code] { "codes": [ { "code": "include ':react-native-carnival'\nproject(':react-native-carnival').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-carnival/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 compile project(':react-native-carnival')\n compile 'com.carnival.sdk:carnival:6.+'\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.RNCarnivalPackage;\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 RNCarnivalPackage(getApplicationContext(), SDK_KEY, true) // Obtain SDK key from your Carnival app settings\n );\n }\n// ...\n\n}", "language": "java", "name": "MainApplication.java" } ] } [/block] This completes the plugin integration. If you haven't already done so, make sure you [setup your app for push notifications](https://docs.carnival.io/docs/enable-push-notifications-for-android) in your Android Studio project you have the right FCM details in your app's dashboard.