react-native-gcm-push-notification
GCM for React Native Android and IOS
Demo
https://github.com/oney/TestGcm
Installation
- Run
npm install react-native-gcm-push-notification --save
- Run rnpm link
Android Configuration
- In
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 changecom.xxx.yyy
to your package
... ... ...
IOS Configuration
in AppDelegate.m add
#import "RNGCM.h"
- (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];
}
- (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)notification fetchCompletionHandler:(void (^)(UIBackgroundFetchResult))handler {
[[NSNotificationCenter defaultCenter] postNotificationName:GCMRemoteNotificationReceived
object:self
userInfo:notification];
handler(UIBackgroundFetchResultNoData);
}
GCM API KEY
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
Usage
'use strict'; var React = ; // RN 0.25+var AppRegistry View DeviceEventEmitter = ; var GCM = ; var notification = GCM;if notification var info = JSON; Notification; GcmAndroid; else var Router Route Schema Animations TabBar = ; var YourApp = React; AppRegistry;
- 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
inandroid/app/build.gradle
even encountercom.android.dex.DexException: Multiple dex files...
failure. - Make sure to install Google Play service in Genymotion simulator before testing.