Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/oney/react-native-gcm-android

GCM for React Native Android
https://github.com/oney/react-native-gcm-android

Last synced: 3 days ago
JSON representation

GCM for React Native Android

Awesome Lists containing this project

README 

        
# 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.5.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.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 change `com.xxx.yyy` to your package

```xml



 



...



  ...

  



  

    

      

      

    

  

  

  



  

    

      

    

  

  

    

      

      

  



  

  

  

    

      

    

  

  ...

```

- 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](https://developers.google.com/cloud-messaging/android/client), you can get `google-services.json` file and place it in `android/app` directory



### Usage



```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](https://github.com/Neson/react-native-system-notification).



* You can get info when clicking notification in `DeviceEventEmitter.addListener('sysNotificationClick'`. See [react-native-system-notification](https://github.com/Neson/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.