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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent