{"_id":"592b9e741723061b00f478a1","category":{"_id":"57595bbb18760817001e8bbe","project":"5540ce1b31827a0d007ab1cc","__v":0,"version":"5540ce1c31827a0d007ab1cf","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-06-09T12:06:19.325Z","from_sync":false,"order":24,"slug":"react-native","title":"React Native"},"__v":0,"version":{"_id":"5540ce1c31827a0d007ab1cf","project":"5540ce1b31827a0d007ab1cc","__v":31,"createdAt":"2015-04-29T12:27:08.390Z","releaseDate":"2015-04-29T12:27:08.390Z","categories":["5540ce1c31827a0d007ab1d0","5540d91bbb9e762d00f594ad","5540e5f131827a0d007ab212","5540e5febb9e762d00f594d3","5540e61331827a0d007ab213","5540e6195cf9682100d61afa","5540e62631827a0d007ab214","5540e63031827a0d007ab215","5540e63531827a0d007ab216","5540e63e5cf9682100d61afc","5540e6445cf9682100d61afd","5540e64a5cf9682100d61afe","55a4ff5b2e70c0250038050f","55acb28318eefd0d0071d504","55ae1abe8576b92300291c80","55ae453ef302af23000ac109","55af586d555b900d0036d296","55af91dac8a85321007a53c3","55b9fee204775a2f00628071","55b9ff0e04775a2f00628072","55b9ff4604775a2f00628073","55b9ff5fd72d1e1900276a38","55b9ff7f04775a2f00628074","55b9ff90eb08801900f833e5","55b9ffa5d72d1e1900276a39","55b9ffca04775a2f00628075","55b9fffdd72d1e1900276a3a","56bc2f033ee9e70d008b46af","56c2f6efbbf9ec2d00e0fe4f","57595bbb18760817001e8bbe","57d8d9793916800e003dde53"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"project":"5540ce1b31827a0d007ab1cc","parentDoc":null,"user":"55b8b82fdec1c9210013cfa1","updates":[],"next":{"pages":[],"description":""},"createdAt":"2017-05-29T04:07:16.176Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":0,"body":"[**Download Sample**](https://github.com/Pushwoosh/pushwoosh-react-native-sample)\n[**Module API Docs**](http://docs.pushwoosh.com/docs/reactnative-api-reference) \n\n**1.** Install plugin\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"npm install pushwoosh-react-native-plugin --save\\nreact-native link pushwoosh-react-native-plugin\",\n      \"language\": \"shell\"\n    }\n  ]\n}\n[/block]\n**2.** Import plugin and register for push notifications\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"import Pushwoosh from 'pushwoosh-react-native-plugin';\\n\\nPushwoosh.init({ \\n    \\\"pw_appid\\\" : \\\"YOUR_PUSHWOOSH_PROJECT_ID\\\" , \\n    \\\"project_number\\\" : \\\"YOUR_GCM_PROJECT_NUMBER\\\" \\n});\\nPushwoosh.register();\\n\\n// this event is fired when the push is received in the app\\nDeviceEventEmitter.addListener('pushReceived', (e: Event) => {\\n  console.warn(\\\"pushReceived: \\\" + JSON.stringify(e));\\n  // shows a push is received. Implement passive reaction to a push, such as UI update or data download.\\n});\\n\\n// this event is fired when user clicks on notification\\nDeviceEventEmitter.addListener('pushOpened', (e: Event) => {\\n  console.warn(\\\"pushOpened: \\\" + JSON.stringify(e));\\n  // shows a user tapped the notification. Implement user interaction, such as showing push details\\n});\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n**3.** In iOS Xcode project enable **Push Notifications** in the **Capabilities** section.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/e0cc317-c81a9f5-Screen_Shot_2016-09-20_at_14.39.50.png\",\n        \"c81a9f5-Screen_Shot_2016-09-20_at_14.39.50.png\",\n        751,\n        181,\n        \"#d8d7d2\"\n      ]\n    }\n  ]\n}\n[/block]\n**4.1** For Android project go to **android/build.gradle** and modify it as follows:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"// Top-level build file where you can add configuration options common to all sub-projects/modules.\\n\\nbuildscript {\\n    repositories {\\n        jcenter()\\n    }\\n    dependencies {\\n        classpath 'com.android.tools.build:gradle:1.3.1'\\n\\n        // NOTE: Do not place your application dependencies here; they belong\\n        // in the individual module build.gradle files\\n    }\\n}\\n\\nallprojects {\\n  repositories {\\n    mavenLocal()\\n    jcenter()\\n    maven {\\n      // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm\\n      url \\\"$rootDir/../node_modules/react-native/android\\\"\\n    }\\n    \\n    // ADD Maven repository here: \\n    maven {\\n      url \\\"https://maven.google.com\\\"\\n    }\\n  }\\n}\",\n      \"language\": \"groovy\",\n      \"name\": \"build.gradle\"\n    }\n  ]\n}\n[/block]\n**4.2** Go to **android/app/build.gradle** and update **compileSdkVersion** and **buildToolsVersion** to **26+** version:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"android {\\n    compileSdkVersion 26\\n    buildToolsVersion \\\"26.0.1\\\"\\n  \\t....\\n}\",\n      \"language\": \"groovy\",\n      \"name\": \"app/build.gradle\"\n    }\n  ]\n}\n[/block]\nIn the same file in *dependencies* section update all **android support** libraries to **26+** version:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"dependencies {\\n    compile fileTree(dir: \\\"libs\\\", include: [\\\"*.jar\\\"])\\n    compile \\\"com.android.support:appcompat-v7:26.1.0\\\"\\n    compile \\\"com.facebook.react:react-native:+\\\"  // From node_modules\\n  \\t....\\n}\",\n      \"language\": \"groovy\",\n      \"name\": \"app/build.gradle\"\n    }\n  ]\n}\n[/block]","excerpt":"","slug":"react-native-plugin","type":"basic","title":"React Native Plugin"}

React Native Plugin


[**Download Sample**](https://github.com/Pushwoosh/pushwoosh-react-native-sample) [**Module API Docs**](http://docs.pushwoosh.com/docs/reactnative-api-reference) **1.** Install plugin [block:code] { "codes": [ { "code": "npm install pushwoosh-react-native-plugin --save\nreact-native link pushwoosh-react-native-plugin", "language": "shell" } ] } [/block] **2.** Import plugin and register for push notifications [block:code] { "codes": [ { "code": "import Pushwoosh from 'pushwoosh-react-native-plugin';\n\nPushwoosh.init({ \n \"pw_appid\" : \"YOUR_PUSHWOOSH_PROJECT_ID\" , \n \"project_number\" : \"YOUR_GCM_PROJECT_NUMBER\" \n});\nPushwoosh.register();\n\n// this event is fired when the push is received in the app\nDeviceEventEmitter.addListener('pushReceived', (e: Event) => {\n console.warn(\"pushReceived: \" + JSON.stringify(e));\n // shows a push is received. Implement passive reaction to a push, such as UI update or data download.\n});\n\n// this event is fired when user clicks on notification\nDeviceEventEmitter.addListener('pushOpened', (e: Event) => {\n console.warn(\"pushOpened: \" + JSON.stringify(e));\n // shows a user tapped the notification. Implement user interaction, such as showing push details\n});", "language": "javascript" } ] } [/block] **3.** In iOS Xcode project enable **Push Notifications** in the **Capabilities** section. [block:image] { "images": [ { "image": [ "https://files.readme.io/e0cc317-c81a9f5-Screen_Shot_2016-09-20_at_14.39.50.png", "c81a9f5-Screen_Shot_2016-09-20_at_14.39.50.png", 751, 181, "#d8d7d2" ] } ] } [/block] **4.1** For Android project go to **android/build.gradle** and modify it as follows: [block:code] { "codes": [ { "code": "// Top-level build file where you can add configuration options common to all sub-projects/modules.\n\nbuildscript {\n repositories {\n jcenter()\n }\n dependencies {\n classpath 'com.android.tools.build:gradle:1.3.1'\n\n // NOTE: Do not place your application dependencies here; they belong\n // in the individual module build.gradle files\n }\n}\n\nallprojects {\n repositories {\n mavenLocal()\n jcenter()\n maven {\n // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm\n url \"$rootDir/../node_modules/react-native/android\"\n }\n \n // ADD Maven repository here: \n maven {\n url \"https://maven.google.com\"\n }\n }\n}", "language": "groovy", "name": "build.gradle" } ] } [/block] **4.2** Go to **android/app/build.gradle** and update **compileSdkVersion** and **buildToolsVersion** to **26+** version: [block:code] { "codes": [ { "code": "android {\n compileSdkVersion 26\n buildToolsVersion \"26.0.1\"\n \t....\n}", "language": "groovy", "name": "app/build.gradle" } ] } [/block] In the same file in *dependencies* section update all **android support** libraries to **26+** version: [block:code] { "codes": [ { "code": "dependencies {\n compile fileTree(dir: \"libs\", include: [\"*.jar\"])\n compile \"com.android.support:appcompat-v7:26.1.0\"\n compile \"com.facebook.react:react-native:+\" // From node_modules\n \t....\n}", "language": "groovy", "name": "app/build.gradle" } ] } [/block]