README.md 3.29 KB
Newer Older
Libin Lu's avatar
Libin Lu committed
1
# react-native-fcm
Libin Lu's avatar
init  
Libin Lu committed
2 3 4 5 6 7 8 9 10 11 12 13 14

Firebase notification for React Native Android and IOS

## 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
15 16
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
17 18 19 20 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
...
```

- In `android/app/src/main/AndroidManifest.xml`, add these lines, be sure to change `com.xxx.yyy` to your package

```
<application
Libin Lu's avatar
Libin Lu committed
30 31 32 33 34 35 36 37 38 39 40 41 42 43 44
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
45 46 47 48 49 50 51 52 53
```

### IOS Configuration

install pod 'Firebase/Messaging'

in AppDelegate.m add
```
#import "FCMModule.h"
Libin Lu's avatar
Libin Lu committed
54
...
Libin Lu's avatar
init  
Libin Lu committed
55

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

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

}

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


### 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
90 91 92 93 94 95 96 97 98 99
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
100 101 102
}

componentWillUnmount() {
Libin Lu's avatar
Libin Lu committed
103 104 105
//prevent leak
this.fcmNotifLsnr.remove();
this.fcmTokenLsnr.remove();
Libin Lu's avatar
init  
Libin Lu committed
106 107 108 109 110 111
}

}
```

## Q & A
Libin Lu's avatar
Libin Lu committed
112 113 114
### 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
115 116 117 118
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
### Why I don't get data notification when I'm sending hybrid notification when app is in background?
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