GCM for React Native Android
https://github.com/oney/TestGcm
-
Run
npm install react-native-gcm-android --save -
In
android/build.gradle
dependencies { classpath 'com.android.tools.build:gradle:1.3.1' classpath 'com.google.gms:google-services:1.5.0-beta3' // <- Add this line- In
android/settings.gradle, add
include ':RNGcmAndroid', ':app' project(':RNGcmAndroid').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-gcm-android/android') include ':react-native-system-notification' project(':react-native-system-notification').projectDir = new File(settingsDir, '../node_modules/react-native-system-notification/android')- In
android/app/build.gradle
apply plugin: "com.android.application" apply plugin: 'com.google.gms.google-services' // <- Add this line ... dependencies { compile fileTree(dir: "libs", include: ["*.jar"]) compile "com.android.support:appcompat-v7:23.0.1" compile "com.facebook.react:react-native:0.16.+" compile 'com.google.android.gms:play-services-gcm:8.3.0' // <- Add this line compile project(':RNGcmAndroid') // <- Add this line compile project(':react-native-system-notification') // <- Add this line }- In
android/app/src/main/AndroidManifest.xml, add these lines, be sure to changecom.xxx.yyyto your package
<uses-permission android:name="com.google.android.c2dm.permission.RECEIVE" /> <uses-permission android:name="android.permission.WAKE_LOCK" /> <uses-permission android:name="com.google.android.c2dm.permission.SEND" /> <uses-permission android:name="android.permission.GET_ACCOUNTS" /> <uses-permission android:name="android.permission.GET_TASKS" /> <uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED"/> <permission android:name="com.xxx.yyy.permission.C2D_MESSAGE" android:protectionLevel="signature" /> <uses-permission android:name="com.xxx.yyy.permission.C2D_MESSAGE" /> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> <uses-permission android:name="android.permission.VIBRATE"></uses-permission> ... <application android:theme="@style/AppTheme"> ... <meta-data android:name="com.google.android.gms.version" android:value="@integer/google_play_services_version" /> <receiver android:name="com.google.android.gms.gcm.GcmReceiver" android:exported="true" android:permission="com.google.android.c2dm.permission.SEND" > <intent-filter> <action android:name="com.google.android.c2dm.intent.RECEIVE" /> <category android:name="com.xxx.yyy" /> </intent-filter> </receiver> <service android:name="com.oney.gcm.GcmRegistrationService"/> <service android:name="com.oney.gcm.BackgroundService"></service> <service android:name="com.oney.gcm.RNGcmListenerService" android:exported="false" > <intent-filter> <action android:name="com.google.android.c2dm.intent.RECEIVE" /> </intent-filter> </service> <receiver android:exported="false" android:name="com.oney.gcm.GcmBroadcastReceiver"> <intent-filter> <action android:name="com.oney.gcm.GCMReceiveNotification" /> </intent-filter> </receiver> <receiver android:name="io.neson.react.notification.NotificationEventReceiver" /> <receiver android:name="io.neson.react.notification.NotificationPublisher" /> <receiver android:name="io.neson.react.notification.SystemBootEventReceiver"> <intent-filter> <action android:name="android.intent.action.BOOT_COMPLETED"></action> </intent-filter> </receiver> ...- In
android/app/src/main/java/com/testoe/MainActivity.java
import com.oney.gcm.GcmPackage; // <- Add this line import io.neson.react.notification.NotificationPackage; // <- Add this line ... .addPackage(new MainReactPackage()) .addPackage(new GcmPackage()) // <- Add this line .addPackage(new NotificationPackage(this)) // <- Add this lineBy following Cloud messaging, you can get google-services.json file and place it in android/app directory
'use strict'; var React = require('react-native'); var { AppRegistry, View, DeviceEventEmitter, } = React; var GcmAndroid = require('react-native-gcm-android'); import Notification from 'react-native-system-notification'; if (GcmAndroid.launchNotification) { var notification = GcmAndroid.launchNotification; var info = JSON.parse(notification.info); Notification.create({ subject: info.subject, message: info.message, }); GcmAndroid.stopService(); } else { var {Router, Route, Schema, Animations, TabBar} = require('react-native-router-flux'); var YourApp = React.createClass({ componentDidMount: function() { GcmAndroid.addEventListener('register', function(token){ console.log('send gcm token to server', token); }); GcmAndroid.addEventListener('registerError', function(error){ console.log('registerError', error.message); }); GcmAndroid.addEventListener('notification', function(notification){ console.log('receive gcm notification', notification); var info = JSON.parse(notification.data.info); if (!GcmAndroid.isInForeground) { Notification.create({ subject: info.subject, message: info.message, }); } }); DeviceEventEmitter.addListener('sysNotificationClick', function(e) { console.log('sysNotificationClick', e); }); GcmAndroid.requestPermissions(); }, render: function() { return ( ... ); } }); AppRegistry.registerComponent('YourApp', () => YourApp); }- There are two situations.
GcmAndroid.launchNotification is null, you can get notification in GcmAndroid.addEventListener('notification' listenter.
GcmAndroid.launchNotification is your GCM data. You can create notification with resolving the data by using react-native-system-notification module.
- You can get info when clicking notification in
DeviceEventEmitter.addListener('sysNotificationClick'. See react-native-system-notification to get more informations about how to create notification
- Do not add
multiDexEnabled trueinandroid/app/build.gradleeven encountercom.android.dex.DexException: Multiple dex files...failure. - Make sure to install Google Play service in Genymotion simulator before testing.