As google introduced Firebase Cloud Messaging to replace GCM, it is better to start using fcm API
GCM for React Native Android and IOS
https://github.com/oney/TestGcm
npm install react-native-gcm-push-notification --save
new GcmPackge()
to new GcmPackage(getIntent()
in MainActivity.javaIn android/build.gradle
dependencies {
classpath 'com.android.tools.build:gradle:1.3.1'
classpath 'com.google.gms:google-services:2.1.0-alpha3' // <- Add this line
In android/app/build.gradle
apply plugin: "com.android.application"
apply plugin: 'com.google.gms.google-services' // <- Add this line
...
In android/app/src/main/AndroidManifest.xml
, add these lines, be sure to change com.xxx.yyy
to 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" />
...
<application android:theme="@style/AppTheme">
... <receiver android:name="com.google.android.gms.gcm.GcmReceiver" android:exported="true" android:permission="com.google.android.c2dm.permission.SEND" >
</receiver>
<service android:name="com.oney.gcm.GcmRegistrationService"/>
<service
android:name="com.oney.gcm.RNGcmListenerService"
android:exported="false" >
<intent-filter>
<action android:name="com.google.android.c2dm.intent.RECEIVE" />
</intent-filter>
</service>
<service android:name="com.oney.gcm.RNGcmInstanceIDListenerService" android:exported="false">
<intent-filter>
<action android:name="com.google.android.gms.iid.InstanceID"/>
</intent-filter>
</service>
...
### IOS Configuration
in AppDelegate.m add
(void)application:(UIApplication )application didRegisterForRemoteNotificationsWithDeviceToken:(NSData )deviceToken { NSDictionary *userInfo = @{@"deviceToken" : deviceToken}; [[NSNotificationCenter defaultCenter] postNotificationName:GCMRemoteNotificationRegistered object:self userInfo:userInfo]; }
(void)application:(UIApplication )application didFailToRegisterForRemoteNotificationsWithError:(NSError )error { NSDictionary *userInfo = @{@"error" :error.localizedDescription}; [[NSNotificationCenter defaultCenter] postNotificationName:GCMRemoteNotificationRegistered object:self userInfo:userInfo]; }
(void)application:(UIApplication )application didReceiveRemoteNotification:(NSDictionary )notification { [[NSNotificationCenter defaultCenter] postNotificationName: GCMRemoteNotificationReceived object:self userInfo:notification];
}
By following Cloud messaging, you can get google-services.json
file and place it in android/app
directory
By following Cloud messaging, you can get googleServices-info.plist
file and place it in /ios
directory
'use strict';
var React = require('react'); // RN 0.25+
var {
AppRegistry,
View,
DeviceEventEmitter,
} = require('react-native');
var GCM = require('react-native-gcm-push-notification');
var notification = GCM.popInitialNotification();
if (notification) {
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() {
GCM.addEventListener('register', function(data){
if(!data.error){
console.log('send gcm token to server', data.registrationToken);
}
});
GCM.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,
});
}
});
GCM.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
multiDexEnabled true
in android/app/build.gradle
even encounter com.android.dex.DexException: Multiple dex files...
failure.