react-native-gcm-android

GCM for React Native Android

Demo

https://github.com/oney/TestGcm

Installation

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.3.0' // <- Add this line
    compile project(':RNGcmAndroid')                         // <- Add this line
    compile project(':react-native-system-notification')     // <- Add this line
}

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

...

<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" >

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

<receiver 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

GCM API KEY

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

Usage

'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.