{"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-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 * `Carnival.framework`\n\nHighlight `RNCarnival.m`. Make sure this file's 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.\n\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    maven {\\n        url \\\"https://maven.google.com\\\"\\n    }\\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:5.+'\\n}\",\n      \"language\": \"groovy\",\n      \"name\": \"build.gradle\"\n    }\n  ]\n}\n[/block]\nNext, you need to link the package in your `MainApplication.java`. Although you can use `react-native link`, we recommend to link the plugin manually as the automatic integration can often cause incompatibilities.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"// Add this import line\\nimport com.reactlibrary.reactnative.RNCarnivalPackage;\\n\\npublic class MainApplication extends Application implements ReactApplication {\\n//  ...\\n\\n    :::at:::Override\\n    protected List<ReactPackage> getPackages() {\\n      return Arrays.<ReactPackage>asList(\\n          new MainReactPackage(),\\n          new RNCarnivalPackage()\\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.","updates":[],"order":11,"isReference":false,"hidden":true,"sync_unique":"","link_url":"","link_external":false,"_id":"5b1f2cbdfd653400031d8d7f","version":{"version":"1.3","version_clean":"1.3.0","codename":"rebrand","is_stable":false,"is_beta":false,"is_hidden":false,"is_deprecated":false,"categories":["5b1f2cbdfd653400031d8d42","5b1f2cbdfd653400031d8d43","5b1f2cbdfd653400031d8d44","5b1f2cbdfd653400031d8d45","5b1f2cbdfd653400031d8d46","561c61b4ad272c0d00a892df","586c014c0abf1d0f000d04d4","58991d2ad207df0f0002186b","5b1f2cbdfd653400031d8d47","5b1f2cbdfd653400031d8d48","5af0fe494ca2730003cbc98a","5af0fe55ec80af0003804ca2"],"_id":"5b1f2cbdfd653400031d8d9f","project":"55e67aaa9cc7c62b00c4a1ea","__v":0,"forked_from":"55e67aab9cc7c62b00c4a1ed","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":4,"category":{"sync":{"isSync":false,"url":""},"pages":["5b1f2cbdfd653400031d8d4a","5b1f2cbdfd653400031d8d4c","5b1f2cbdfd653400031d8d4d","5b1f2cbdfd653400031d8d4e","55e682b7de6fef23009480dc","5b1f2cbdfd653400031d8d4f","5b1f2cbdfd653400031d8d50","5b1f2cbdfd653400031d8d51","5b1f2cbdfd653400031d8d52","5b1f2cbdfd653400031d8d53","5b1f2cbdfd653400031d8d54","5b1f2cbdfd653400031d8d55","5b1f2cbdfd653400031d8d56","5b1f2cbdfd653400031d8d6a","5b1f2cbdfd653400031d8d6b","5b1f2cbdfd653400031d8d6c","5b1f2cbdfd653400031d8d6d","5b1f2cbdfd653400031d8d6e","5b1f2cbdfd653400031d8d71","5b1f2cbdfd653400031d8d72","5b1f2cbdfd653400031d8d74","561c6ca0be5fb20d00077754","5b1f2cbdfd653400031d8d79","5b1f2cbdfd653400031d8d7a","5b1f2cbdfd653400031d8d7b","5b1f2cbdfd653400031d8d7c","5b1f2cbdfd653400031d8d7d","5b1f2cbdfd653400031d8d7e","5b1f2cbdfd653400031d8d7f","56cfa5386c5d7a13005eec0f","56e73d86555c030e00a52a73","56e7460c9000b120000ffe2e","56e8c19e99c6400e003820cf","56e8c53fc88bf80e00f8bed8","56f06ff4d386ce0e008e9b21"],"title":"Install in your app","slug":"install-in-your-app","order":1,"from_sync":false,"reference":false,"_id":"5b1f2cbdfd653400031d8d43","__v":35,"createdAt":"2015-09-02T04:30:13.305Z","project":"55e67aaa9cc7c62b00c4a1ea","version":"5b1f2cbdfd653400031d8d9f"},"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-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` * `Carnival.framework` Highlight `RNCarnival.m`. Make sure this file's 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. 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 maven {\n url \"https://maven.google.com\"\n }\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:5.+'\n}", "language": "groovy", "name": "build.gradle" } ] } [/block] Next, you need to link the package in your `MainApplication.java`. Although you can use `react-native link`, we recommend to link the plugin manually as the automatic integration can often cause incompatibilities. [block:code] { "codes": [ { "code": "// Add this import line\nimport com.reactlibrary.reactnative.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()\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.