README.md 3.27 KB
Newer Older
1
# react-native-gcm-push-notification
Libin Lu's avatar
init  
Libin Lu committed
2 3 4

Firebase notification for React Native Android and IOS

5 6 7 8
## Demo

https://github.com/oney/TestGcm

Libin Lu's avatar
init  
Libin Lu committed
9 10 11 12 13 14 15 16 17 18
## Installation

- Run `npm install react-native-fcm --save`
- Run rnpm link

## Android Configuration

- In `android/build.gradle`
```gradle
dependencies {
Libin Lu's avatar
Libin Lu committed
19 20
classpath 'com.android.tools.build:gradle:2.0.0'
classpath 'com.google.gms:google-services:3.0.0' // <- Add this line
Libin Lu's avatar
init  
Libin Lu committed
21 22 23 24 25 26 27 28 29
```

- In `android/app/build.gradle`
```gradle
apply plugin: "com.android.application"
apply plugin: 'com.google.gms.google-services' // <- Add this line
...
```

Libin Lu's avatar
Libin Lu committed
30
- In `android/app/src/main/AndroidManifest.xml`
Libin Lu's avatar
init  
Libin Lu committed
31 32 33

```
<application
Libin Lu's avatar
Libin Lu committed
34 35 36 37 38 39 40 41 42 43 44 45 46 47 48
android:theme="@style/AppTheme">

...
<service android:name="com.evollu.react.fcm.MessagingService">
<intent-filter>
<action android:name="com.google.firebase.MESSAGING_EVENT"/>
</intent-filter>
</service>

<service android:name="com.evollu.react.fcm.InstanceIdService" android:exported="false">
<intent-filter>
<action android:name="com.google.firebase.INSTANCE_ID_EVENT"/>
</intent-filter>
</service>
...
Libin Lu's avatar
init  
Libin Lu committed
49 50 51 52 53 54 55 56
```

### IOS Configuration

install pod 'Firebase/Messaging'

in AppDelegate.m add
```
Libin Lu's avatar
Libin Lu committed
57
#import "RNFIRMessaging.h"
Libin Lu's avatar
Libin Lu committed
58
...
Libin Lu's avatar
init  
Libin Lu committed
59

Libin Lu's avatar
Libin Lu committed
60 61 62 63 64
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
....
[FIRApp configure]; <-- add this line
}
Libin Lu's avatar
init  
Libin Lu committed
65

Libin Lu's avatar
Libin Lu committed
66
//add this
Libin Lu's avatar
init  
Libin Lu committed
67
- (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)notification {
Libin Lu's avatar
Libin Lu committed
68 69 70
[[NSNotificationCenter defaultCenter] postNotificationName: FCMNotificationReceived
object:self
userInfo:notification];
Libin Lu's avatar
init  
Libin Lu committed
71 72 73

}

Libin Lu's avatar
Libin Lu committed
74
//add this
Libin Lu's avatar
init  
Libin Lu committed
75
- (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)notification fetchCompletionHandler:(void (^)(UIBackgroundFetchResult))handler {
Libin Lu's avatar
Libin Lu committed
76 77 78 79
[[NSNotificationCenter defaultCenter] postNotificationName:FCMNotificationReceived
object:self
userInfo:notification];
handler(UIBackgroundFetchResultNoData);
Libin Lu's avatar
init  
Libin Lu committed
80 81 82 83 84 85 86 87 88 89 90 91 92 93
}
```


### FCM config file
In [firebase console](https://console.firebase.google.com/), you can get `google-services.json` file and place it in `android/app` directory and get `googleServices-info.plist` file and place it in `/ios` directory

### Usage

```javascript

var FCM = require('react-native-fcm');

componentWillMount() {
Libin Lu's avatar
Libin Lu committed
94 95 96 97 98 99 100 101 102 103
FCM.requestPermissions();
FCM.getFCMToken().then(token => {
//store fcm token in your server
});
this.fcmNotifLsnr = DeviceEventEmitter.addListener('FCMNotificationReceived', (notif) => {
//there are two parts of notif. notif.notification contains the notification payload, notif.data contains data payload
});
this.fcmTokenLsnr = DeviceEventEmitter.addListener('FCMTokenRefreshed', (token) => {
//fcm token may not be available on first load, catch it here
});
Libin Lu's avatar
init  
Libin Lu committed
104 105 106
}

componentWillUnmount() {
Libin Lu's avatar
Libin Lu committed
107 108 109
//prevent leak
this.fcmNotifLsnr.remove();
this.fcmTokenLsnr.remove();
Libin Lu's avatar
init  
Libin Lu committed
110 111 112 113 114 115
}

}
```

## Q & A
Libin Lu's avatar
Libin Lu committed
116 117 118
### My android build is failing
Try update your SDK and google play service
### I can't get data notification when app is killed?
Libin Lu's avatar
init  
Libin Lu committed
119
If you send notification with payload only, you can only get the data message when app is in foreground or background. Killed app can't show notification
Libin Lu's avatar
Libin Lu committed
120
### I can't get data notification when app is in background with hybrid notification
Libin Lu's avatar
init  
Libin Lu committed
121 122
I want to figure it out too. Looks like that is how GCM/FCM works. I'm sending 2 notification separately for now. Let me know if you find a better solution