react-native-gcm-android

GCM for React Native Android

Demo

https://github.com/oney/TestGcm

Installation

- Run npm install react-native-gcm-android --save

- In android/build.gradle
``gradle
dependencies {
classpath 'com.android.tools.build:gradle:1.3.1'
classpath 'com.google.gms:google-services:1.4.0-beta3' // <- Add this line
`

- In android/settings.gradle, add
`gradle
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
`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.1.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 change com.xxx.yyy to your package
`xml







android:name="com.xxx.yyy.permission.C2D_MESSAGE"
android:protectionLevel="signature" />





...

android:theme="@style/AppTheme">

...
android:name="com.google.android.gms.version"
android:value="@integer/google_play_services_version" />

android:name="com.google.android.gms.gcm.GcmReceiver"
android:exported="true"
android:permission="com.google.android.c2dm.permission.SEND" >








android:name="com.oney.gcm.RNGcmListenerService"
android:exported="false" >




android:exported="false"
android:name="com.oney.gcm.GcmBroadcastReceiver">












...
`
- In android/app/src/main/java/com/testoe/MainActivity.java
`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 line
`

$3


By following Cloud messaging, you can get google-services.json file and place it in android/app directory

$3

`javascript
'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.
##### The app is running on the foreground or background.
GcmAndroid.launchNotification is null, you can get notification in GcmAndroid.addEventListener('notification' listenter.
##### The app is killed/closed
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

Troubleshoot

- Do not add multiDexEnabled true in android/app/build.gradle even encounter com.android.dex.DexException: Multiple dex files...` failure.
- Make sure to install Google Play service in Genymotion simulator before testing.