README.md 27 KB
Newer Older
Libin Lu's avatar
Libin Lu committed
1 2
[![Join the chat at https://gitter.im/evollu/react-native-fcm](https://badges.gitter.im/evollu/react-native-fcm.svg)](https://gitter.im/evollu/react-native-fcm?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

3
## NOTES:
Libin Lu's avatar
Libin Lu committed
4 5 6 7 8 9 10
[react-native-firebase](https://github.com/invertase/react-native-firebase/releases/tag/v4.0.0) has introduced new firebase messaging and remote/local notification features. It has good integration with other firebase features.  I would recommend new comers to check that.

Note that there are some advanced features still in progress 
- handle iOS remote notification when app is not running
- custom iOS notification actions 

### To existing react-native-fcm users
Libin Lu's avatar
Libin Lu committed
11 12 13
`react-native-firebase` now can do what `react-native-fcm` can so it is a waste of effort to build the same thing in parallel. 

Since I'm getting busier these days and feel challenging to maintain this repo every day while `react-native-firebase` has a larger team/company backing it, existing users may consider migrating to `react-native-firebase`.
Libin Lu's avatar
Libin Lu committed
14 15 16 17 18 19

I've created [an example project](https://github.com/evollu/react-native-fcm/tree/firebase/Examples/firebase-migration) using react-native-firebase as a migration reference

`react-native-fcm` will still take PRs and bug fixes, but possibly no new feature developement any more.


Libin Lu's avatar
Libin Lu committed
20 21

### Versions
Libin Lu's avatar
Libin Lu committed
22
- for iOS SDK < 4, use react-native-fcm@6.2.3 (v6.x is still compatible with Firebase SDK v4)
23 24 25
- for RN < 0.40.0, use react-native-fcm@2.5.6
- for RN < 0.33.0, use react-native-fcm@1.1.0
- for RN < 0.30.0, use react-native-fcm@1.0.15
Libin Lu's avatar
Libin Lu committed
26

Libin Lu's avatar
Libin Lu committed
27
### Example
28
- An example working project is available at: https://github.com/evollu/react-native-fcm/tree/master/Examples/simple-fcm-client
Libin Lu's avatar
Libin Lu committed
29

Libin Lu's avatar
Libin Lu committed
30
### Android 26
Libin Lu's avatar
Libin Lu committed
31 32
- DO NOT change Android targetSdkVersion >= 26. The notification won't show up because of notification channel requirement.
If you have to upgrade, you can use sdk-26 branch and post feedback on [here](https://github.com/evollu/react-native-fcm/pull/699)
Libin Lu's avatar
Libin Lu committed
33

Libin Lu's avatar
init  
Libin Lu committed
34 35 36
## Installation

- Run `npm install react-native-fcm --save`
Libin Lu's avatar
Libin Lu committed
37 38
- [Link libraries](https://facebook.github.io/react-native/docs/linking-libraries-ios.html)
  Note: the auto link doesn't work with xcworkspace so CocoaPods user needs to do manual linking
Libin Lu's avatar
Libin Lu committed
39
- You many need [this package for huawei phone](https://github.com/pgengoux/react-native-huawei-protected-apps)
Libin Lu's avatar
init  
Libin Lu committed
40

Libin Lu's avatar
Libin Lu committed
41 42 43 44
## Configure Firebase Console
### FCM config file

In [firebase console](https://console.firebase.google.com/), you can:
Sean Adkinson's avatar
Sean Adkinson committed
45
- for **Android**: download `google-services.json` file and place it in `android/app` directory
Libin Lu's avatar
Libin Lu committed
46 47 48 49 50
- for **iOS**: download `GoogleService-Info.plist` file and place it in `/ios/your-project-name` directory (next to your `Info.plist`)

Make sure you have certificates setup by following
https://firebase.google.com/docs/cloud-messaging/ios/certs

51
## Android Configuration
Libin Lu's avatar
init  
Libin Lu committed
52

Libin Lu's avatar
Libin Lu committed
53 54 55 56
- As `react-native link` sometimes has glitches, make sure you have this line added

https://github.com/evollu/react-native-fcm/blob/master/Examples/simple-fcm-client/android/app/src/main/java/com/google/firebase/quickstart/fcm/MainApplication.java#L28

57 58 59 60 61
- Edit `android/build.gradle`:
```diff
  dependencies {
    classpath 'com.android.tools.build:gradle:2.0.0'
+   classpath 'com.google.gms:google-services:3.0.0'
Libin Lu's avatar
init  
Libin Lu committed
62 63
```

Sagiv Ofek's avatar
Sagiv Ofek committed
64
- Edit `android/app/build.gradle`. Add at the bottom of the file:
65 66
```diff
  apply plugin: "com.android.application"
KazuyaKitahara's avatar
KazuyaKitahara committed
67
  ...
68
+ apply plugin: 'com.google.gms.google-services'
Libin Lu's avatar
init  
Libin Lu committed
69 70
```

71
- Edit `android/app/src/main/AndroidManifest.xml`:
Libin Lu's avatar
init  
Libin Lu committed
72

73 74 75 76 77
```diff
  <application
    ...
    android:theme="@style/AppTheme">

Libin Lu's avatar
Libin Lu committed
78 79
+    <meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="@mipmap/ic_notif"/>

Libin Lu's avatar
Libin Lu committed
80
+   <service android:name="com.evollu.react.fcm.MessagingService" android:enabled="true" android:exported="true">
81 82 83 84 85 86 87 88 89 90 91 92
+     <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
93
```
94

Libin Lu's avatar
Libin Lu committed
95 96 97
- Edit `{YOUR_MAIN_PROJECT}/app/build.gradle`:
```diff
 dependencies {
98
+    compile project(':react-native-fcm')
Libin Lu's avatar
Libin Lu committed
99
+    compile 'com.google.firebase:firebase-core:10.0.1' //this decides your firebase SDK version
Justyn's avatar
Justyn committed
100
+    compile 'com.google.firebase:firebase-messaging:10.0.1'
Libin Lu's avatar
Libin Lu committed
101 102 103 104 105
     compile fileTree(dir: "libs", include: ["*.jar"])
     compile "com.android.support:appcompat-v7:23.0.1"
     compile "com.facebook.react:react-native:+"  // From node_modules
 }
```
Ashish Chaudhary's avatar
Ashish Chaudhary committed
106
- Edit `android/settings.gradle`
107 108 109 110 111 112
```diff
  ...
+ include ':react-native-fcm'
+ project(':react-native-fcm').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-fcm/android')
  include ':app'
```
Libin Lu's avatar
Libin Lu committed
113

Libin Lu's avatar
Libin Lu committed
114 115 116 117 118 119 120 121 122 123 124 125 126
- Edit `MainActivity.java`. This fixes [a bug](https://stackoverflow.com/questions/14853327/intent-not-restored-correctly-after-activity-is-killed-if-clear-top-and-single-t/18307360#18307360)
```diff
+ import android.content.Intent;
...
public class MainActivity extends ReactActivity {
+ @Override
+    public void onNewIntent(Intent intent) {
+        super.onNewIntent(intent);
+        setIntent(intent);
+    }
}
```

127
### Config for notification and `click_action` in Android
128 129 130 131 132 133 134 135 136 137 138 139 140

To allow android to respond to `click_action`, you need to define Activities and filter on specific intent. Since all javascript is running in MainActivity, you can have MainActivity to handle actions:

Edit `AndroidManifest.xml`:

```diff
  <activity
    android:name=".MainActivity"
    android:label="@string/app_name"
    android:windowSoftInputMode="adjustResize"
+   android:launchMode="singleTop"
    android:configChanges="keyboard|keyboardHidden|orientation|screenSize">
    <intent-filter>
141 142
      <action android:name="android.intent.action.MAIN" />
      <category android:name="android.intent.category.LAUNCHER" />
143 144
    </intent-filter>
  </activity>
145
```
146 147

Notes:
Libin Lu's avatar
Libin Lu committed
148
- `launchMode="singleTop"` is to reuse MainActivity, you can use `singleTask` or `singleInstance` as well depend on your need. [this link explains the behavior well](https://blog.mindorks.com/android-activity-launchmode-explained-cbc6cf996802)
Libin Lu's avatar
Libin Lu committed
149
- you if want to handle `click_action` you need to add custom intent-filter, check native android documentation
150 151


152
If you are using RN < 0.30.0 and react-native-fcm < 1.0.16, pass intent into package, edit `MainActivity.java`:
153

Libin Lu's avatar
Libin Lu committed
154
- RN 0.28:
155 156 157 158 159 160 161 162 163 164 165 166 167 168

```diff
  import com.facebook.react.ReactActivity;
+ import android.content.Intent;

  public class MainActivity extends ReactActivity {

+   @Override
+   public void onNewIntent (Intent intent) {
+     super.onNewIntent(intent);
+       setIntent(intent);
+   }       
```

Libin Lu's avatar
Libin Lu committed
169
NOTE: Verify that react-native links correctly in `MainApplication.java`
170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190

```diff
import android.app.application
...
+import com.evollu.react.fcm.FIRMessagingPackage;
```
....
```diff
    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
          new VectorIconsPackage(),
+         new FIRMessagingPackage(),
          new RNDeviceInfo(),
      );
    }
 ```   



191 192 193 194 195 196 197 198 199 200 201 202 203
- RN <= 0.27:

```diff
  import com.facebook.react.ReactActivity;
+ import android.content.Intent;

  public class MainActivity extends ReactActivity {

+   @Override
+   protected void onNewIntent (Intent intent) {
+     super.onNewIntent(intent);
+       setIntent(intent);
+   }       
204
```
Libin Lu's avatar
init  
Libin Lu committed
205

206 207 208
Notes:
- `@Override` is added to update intent on notification click

209
## IOS Configuration
Libin Lu's avatar
init  
Libin Lu committed
210

Libin Lu's avatar
Libin Lu committed
211 212
### Pod approach:

213
Make sure you have [Cocoapods](https://cocoapods.org/) version > 1.0
214

215
Configure the project:
Libin Lu's avatar
Libin Lu committed
216 217
```
cd ios && pod init
218 219 220 221 222 223 224
```

(In case of syntax errors, `open YOURApp.xcodeproj/project.pbxproj` and fix them.)

Edit the newly created `Podfile`:
```diff
  # Pods for YOURAPP
Nick Sarafa's avatar
Nick Sarafa committed
225
+ pod 'Firebase/Messaging'
226 227 228 229 230
```

Install the `Firebase/Messaging` pod:
```
pod install
Libin Lu's avatar
Libin Lu committed
231
```
Libin Lu's avatar
Libin Lu committed
232
NOTE: you don't need to enable `use_frameworks!`. if you have to have `use_frameworks!` make sure you don't have `inherit! :search_paths`
Libin Lu's avatar
Libin Lu committed
233
NOTE: there is a working example in `master` branch
Libin Lu's avatar
init  
Libin Lu committed
234

Libin Lu's avatar
Libin Lu committed
235
### Non Cocoapod approach
236

Libin Lu's avatar
Libin Lu committed
237
1. Follow the instruction on [Integrate without CocoaPods](https://firebase.google.com/docs/ios/setup#frameworks).
Libin Lu's avatar
Libin Lu committed
238
- Import libraries, add Capabilities (background running and push notification), upload APNS and etc etc etc...
Libin Lu's avatar
Libin Lu committed
239 240 241
2. Put frameworks under `ios/Frameworks` folder, and drag those files into your xcode solution -> Frameworks
3. Put `firebase.h` and `module.modulemap` under `ios/Frameworks` folder, no need to drag into solution
4. Modify your project's `User Header Search Paths` and add `$(PROJECT_DIR)/Frameworks`
Libin Lu's avatar
Libin Lu committed
242 243
<img width="796" alt="screen shot 2018-03-05 at 2 17 03 pm" src="https://user-images.githubusercontent.com/9213224/36994792-263f05c4-2080-11e8-9d46-9b11ef49962a.png">
NOTE: There is a working example in `no-pod` branch
Libin Lu's avatar
Libin Lu committed
244 245

### Shared steps
Libin Lu's avatar
Libin Lu committed
246

Libin Lu's avatar
Libin Lu committed
247 248
Edit `AppDelegate.h`:
```diff
Libin Lu's avatar
Libin Lu committed
249 250
+ @import UserNotifications;
+
Libin Lu's avatar
Libin Lu committed
251 252 253
+ @interface AppDelegate : UIResponder <UIApplicationDelegate,UNUserNotificationCenterDelegate>
- @interface AppDelegate : UIResponder <UIApplicationDelegate>
```
Libin Lu's avatar
init  
Libin Lu committed
254

255 256 257 258 259 260 261 262 263
Edit `AppDelegate.m`:
```diff
+ #import "RNFIRMessaging.h"
  //...

  - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
  {
  //...
+   [FIRApp configure];
Libin Lu's avatar
Libin Lu committed
264
+   [[UNUserNotificationCenter currentNotificationCenter] setDelegate:self];
265 266 267

    return YES;
 }
Sean Adkinson's avatar
Sean Adkinson committed
268

Libin Lu's avatar
Libin Lu committed
269
+
Libin Lu's avatar
Libin Lu committed
270
+ - (void)userNotificationCenter:(UNUserNotificationCenter *)center willPresentNotification:(UNNotification *)notification withCompletionHandler:(void (^)(UNNotificationPresentationOptions))completionHandler
Libin Lu's avatar
Libin Lu committed
271
+ {
Libin Lu's avatar
Libin Lu committed
272
+   [RNFIRMessaging willPresentNotification:notification withCompletionHandler:completionHandler];
Libin Lu's avatar
Libin Lu committed
273
+ }
Libin Lu's avatar
Libin Lu committed
274
+
Libin Lu's avatar
Libin Lu committed
275
+ #if defined(__IPHONE_11_0)
Libin Lu's avatar
Libin Lu committed
276
+ - (void)userNotificationCenter:(UNUserNotificationCenter *)center didReceiveNotificationResponse:(UNNotificationResponse *)response withCompletionHandler:(void (^)(void))completionHandler
Libin Lu's avatar
Libin Lu committed
277
+ {
Libin Lu's avatar
Libin Lu committed
278
+   [RNFIRMessaging didReceiveNotificationResponse:response withCompletionHandler:completionHandler];
Libin Lu's avatar
Libin Lu committed
279
+ }
Libin Lu's avatar
Libin Lu committed
280 281 282 283 284 285
+ #else
+ - (void)userNotificationCenter:(UNUserNotificationCenter *)center didReceiveNotificationResponse:(UNNotificationResponse *)response withCompletionHandler:(void(^)())completionHandler
+ {
+   [RNFIRMessaging didReceiveNotificationResponse:response withCompletionHandler:completionHandler];
+ }
+ #endif
Libin Lu's avatar
Libin Lu committed
286
+
Libin Lu's avatar
Libin Lu committed
287
+ //You can skip this method if you don't want to use local notification
Libin Lu's avatar
Libin Lu committed
288
+ -(void)application:(UIApplication *)application didReceiveLocalNotification:(UILocalNotification *)notification {
Libin Lu's avatar
Libin Lu committed
289
+   [RNFIRMessaging didReceiveLocalNotification:notification];
Libin Lu's avatar
Libin Lu committed
290
+ }
291
+
Libin Lu's avatar
Libin Lu committed
292
+ - (void)application:(UIApplication *)application didReceiveRemoteNotification:(nonnull NSDictionary *)userInfo fetchCompletionHandler:(nonnull void (^)(UIBackgroundFetchResult))completionHandler{
Libin Lu's avatar
Libin Lu committed
293
+   [RNFIRMessaging didReceiveRemoteNotification:userInfo fetchCompletionHandler:completionHandler];
294 295
+ }
```
296

Libin Lu's avatar
Libin Lu committed
297
### Add Capabilities
298 299 300
- Select your project **Capabilities** and enable:
  - **Push Notifications**
  - *Background Modes* > **Remote notifications**.
301

Libin Lu's avatar
Libin Lu committed
302
### FirebaseAppDelegateProxyEnabled
Libin Lu's avatar
Libin Lu committed
303
This instruction assumes that you have FirebaseAppDelegateProxyEnabled=YES (default) so that Firebase will hook on push notification registration events. If you turn this flag off, you will be on your own to manage APNS tokens and link with Firebase token.
Libin Lu's avatar
Libin Lu committed
304

Libin Lu's avatar
Libin Lu committed
305
## Setup Local Notifications
Libin Lu's avatar
Libin Lu committed
306
NOTE: local notification does NOT have any dependency on FCM library but you still need to include Firebase to compile. If there are enough demand to use this functionality alone, I will separate it out into another repo
Libin Lu's avatar
Libin Lu committed
307

Libin Lu's avatar
Libin Lu committed
308
### IOS
Libin Lu's avatar
Libin Lu committed
309
No change required
310

Libin Lu's avatar
Libin Lu committed
311
### Android
Libin Lu's avatar
Libin Lu committed
312 313 314 315 316
Edit AndroidManifest.xml
```diff
  <uses-permission android:name="android.permission.INTERNET" />
+ <uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED" />
+ <uses-permission android:name="android.permission.VIBRATE" />
317

Anmol Wassan's avatar
Anmol Wassan committed
318
  <application>
Libin Lu's avatar
Libin Lu committed
319 320 321 322 323 324 325 326 327 328
+      <receiver android:name="com.evollu.react.fcm.FIRLocalMessagingPublisher"/>
+      <receiver android:enabled="true" android:exported="true"  android:name="com.evollu.react.fcm.FIRSystemBootEventReceiver">
+          <intent-filter>
+              <action android:name="android.intent.action.BOOT_COMPLETED"/>
+              <action android:name="android.intent.action.QUICKBOOT_POWERON"/>
+              <action android:name="com.htc.intent.action.QUICKBOOT_POWERON"/>
+              <category android:name="android.intent.category.DEFAULT" />
+          </intent-filter>
+      </receiver>
  </application>
329
```
Libin Lu's avatar
Libin Lu committed
330 331
NOTE: `com.evollu.react.fcm.FIRLocalMessagingPublisher` is required for presenting local notifications. `com.evollu.react.fcm.FIRSystemBootEventReceiver` is required only if you need to schedule future or recurring local notifications

Libin Lu's avatar
init  
Libin Lu committed
332

Libin Lu's avatar
Libin Lu committed
333
## Usage
Libin Lu's avatar
Libin Lu committed
334
[Check example project](https://github.com/evollu/react-native-fcm/blob/master/Examples/simple-fcm-client/app/App.js#L68)
Libin Lu's avatar
init  
Libin Lu committed
335 336


Lucas Bento's avatar
Lucas Bento committed
337
### Build custom push notification for Android
Libin Lu's avatar
Libin Lu committed
338 339
Firebase android misses important feature of android notification like `group`, `priority` and etc. As a work around you can send data message (no `notification` payload at all) and this repo will build a local notification for you. If you pass `custom_notification` in the payload, the repo will treat the content as a local notification config and shows immediately.

Libin Lu's avatar
Libin Lu committed
340
NOTE: By using this work around, you will have to send different types of payload for iOS and Android devices because **custom_notification isn't supported on iOS**
Libin Lu's avatar
Libin Lu committed
341 342

WARNING: `custom_notification` **cannot** be used together with `notification` attribute. use `data` **ALONE**
Libin Lu's avatar
Libin Lu committed
343 344 345 346 347 348 349 350

Example of payload that is sent to FCM server:
```
{
  "to":"FCM_TOKEN",
  "data": {
    "type":"MEASURE_CHANGE",
    "custom_notification": {
Libin Lu's avatar
Libin Lu committed
351
      "body": "test body",
Libin Lu's avatar
Libin Lu committed
352 353 354 355 356
      "title": "test title",
      "color":"#00ACD4",
      "priority":"high",
      "icon":"ic_notif",
      "group": "GROUP",
Libin Lu's avatar
Libin Lu committed
357 358
      "id": "id",
      "show_in_foreground": true
Libin Lu's avatar
Libin Lu committed
359 360 361 362 363
    }
  }
}
```

Libin Lu's avatar
Libin Lu committed
364 365 366
Example of payload that is sent through firebase console:
<img width="753" alt="screen shot 2018-04-04 at 1 18 09 pm" src="https://user-images.githubusercontent.com/9213224/38323255-bbbfdd66-380a-11e8-95c2-bf32ced959b8.png">

Libin Lu's avatar
Libin Lu committed
367 368
Check local notification guide below for configuration.

Sean Adkinson's avatar
Sean Adkinson committed
369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388
**IMPORTANT**: When using the `admin.messaging` API, you need to `JSON.stringify` the `custom_notification` value:

```
let tokens = [...];
let payload = {
  data: {
    custom_notification: JSON.stringify({
      body: 'Message body',
      title: 'Message title'
      ...
    })
  }
};
let options = { priority: "high" };

admin
  .messaging()
  .sendToDevice(tokens, payload, options);
```

389
### Behaviour when sending `notification` and `data` payload through GCM
Libin Lu's avatar
Libin Lu committed
390
- When user clicks notification to **launch** the application, you can get that notification by calling `FCM.getInitialNotification`. (NOTE: reloading javascript or resuming from background won't change the value)
Libin Lu's avatar
Libin Lu committed
391

Libin Lu's avatar
Libin Lu committed
392 393 394 395 396
- When app is running in background (the tricky one, I strongly suggest you try it out yourself)
 - IOS will receive notificaton from `FCMNotificationReceived` event
    * if you pass `content_available` flag true, you will receive one when app is in background and another one when user resume the app. [more info](http://www.rahuljiresal.com/2015/03/retract-push-notifications-on-ios/)
    * if you just pass `notification`, you will only receive one when user resume the app.
    * you will not see banner if `notification->body` is not defined.
397
 - Android will receive notificaton from `FCMNotificationReceived` event
Naisheel Verdhan's avatar
Naisheel Verdhan committed
398
    * if you pass `notification` payload, it will receive data when user click on notification
399 400 401 402 403
    * if you pass `data` payload only, it will receive data when in background

   e.g. fcm payload looks like:

   ```json
Libin Lu's avatar
Libin Lu committed
404 405 406 407 408 409 410 411 412 413 414 415 416
   {
      "to":"some_device_token",
      "content_available": true,
      "notification": {
          "title": "hello",
          "body": "yo",
          "click_action": "fcm.ACTION.HELLO"
      },
      "data": {
          "extra":"juice"
      }
    }
    ```
417 418

    and event callback will receive as:
419

420 421 422 423
    - Android
      ```json
      {
        "fcm": {"action": "fcm.ACTION.HELLO"},
Libin Lu's avatar
Libin Lu committed
424
        "opened_from_tray": 1,
425 426 427
        "extra": "juice"
      }
      ```
428

429 430 431 432
    - iOS
      ```json
      {
        "apns": {"action_category": "fcm.ACTION.HELLO"},
Libin Lu's avatar
Libin Lu committed
433
        "opened_from_tray": 1,
434 435 436
        "extra": "juice"
      }
      ```
437

Libin Lu's avatar
Libin Lu committed
438
- When app is running in foreground
Naisheel Verdhan's avatar
Naisheel Verdhan committed
439
 - IOS will receive notification and android **won't** (better not to do anything in foreground for hybrid and send a separate data message.)
440

Naisheel Verdhan's avatar
Naisheel Verdhan committed
441
NOTE: it is recommended not to rely on `data` payload for click_action as it can be overwritten (check [this](http://stackoverflow.com/questions/33738848/handle-multiple-notifications-with-gcm)).
442

443 444 445 446 447
### Quick notes about upstream messages
If your app server implements the [XMPP Connection Server](https://firebase.google.com/docs/cloud-messaging/server#implementing-the-xmpp-connection-server-protocol) protocol, it can receive upstream messages from a user's device to the cloud. To initiate an upstream message, call the `FCM.send()` method with your Firebase `Sender ID` and a `Data Object` as parameters as follows:

```javascript
FCM.send('984XXXXXXXXX', {
448
  my_custom_data_1: 'my_custom_field_value_1',
449 450 451 452 453 454
  my_custom_data_2: 'my_custom_field_value_2'
});
```

The `Data Object` is message data comprising as many key-value pairs of the message's payload as are needed (ensure that the value of each pair in the data object is a `string`). Your `Sender ID` is a unique numerical value generated when you created your Firebase project, it is available in the `Cloud Messaging` tab of the Firebase console `Settings` pane. The sender ID is used to identify each app server that can send messages to the client app.

455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474
### Sending remote notifications with category on iOS
If you want to send notification which will have actions as you defined in app it's important to correctly set it's `category` (`click_action`) property. It's also good to set `"content-available" : 1` so app will gets enough time to handle actions in background.

So the fcm payload should look like this:
```javascript
{
   "to": "some_device_token",
   "content_available": true,
   "notification": {
       "title": "Alarm",
       "subtitle": "First Alarm",
       "body": "First Alarm",
       "click_action": "com.myapp.MyCategory" // The id of notification category which you defined with FCM.setNotificationCategories
   },
   "data": {
       "extra": "juice"
   }
 }
 ```

Libin Lu's avatar
init  
Libin Lu committed
475
## Q & A
476

Libin Lu's avatar
Libin Lu committed
477 478 479 480 481 482
#### Why do you build another local notification
Yes there are `react-native-push-notification` and `react-native-system-notification` which are great libraries. However
- We want a unified local notification library but people are reporting using react-native-push-notification with this repo has compatibility issue as `react-native-push-notification` also sets up GCM.
- We want to have local notification to have similar syntax as remote notification payload.
- The PushNotificationIOS by react native team is still missing features that recurring, so we are adding it here

483
#### My Android build is failing
delvedor's avatar
delvedor committed
484
Try update your SDK and google play service.
Libin Lu's avatar
Libin Lu committed
485
If you are having multiple plugins requiring different version of play-service sdk, skip conflicting group. The example project shows for how to colive with react-native-maps
Libin Lu's avatar
Libin Lu committed
486
```
Libin Lu's avatar
Libin Lu committed
487 488
    compile(project(':react-native-maps')) {
        exclude group: 'com.google.android.gms', module: 'play-services-base'
Libin Lu's avatar
Libin Lu committed
489 490
    }
```
491

Libin Lu's avatar
Libin Lu committed
492 493
#### My App throws FCM function undefined error
There seems to be link issue with rnpm. Make sure that there is `new FIRMessagingPackage(),` in your `Application.java` file
Libin Lu's avatar
Libin Lu committed
494

Libin Lu's avatar
Libin Lu committed
495 496
#### I can't get notification in iOS emulator
Remote notification can't reach iOS emulator since it can't fetch APNS token. Use real device.
497

Libin Lu's avatar
Libin Lu committed
498 499 500 501
#### I'm not getting notfication when app is in background
1. Make sure you've uploaded APNS certificates to Firebase and test with Firebase's native example to make sure certs are correct
2. Try simple payload first, sometimes notification doesn't show up because of empty body, wrong sound name etc.

Libin Lu's avatar
Libin Lu committed
502
#### App running in background doesn't trigger `FCMNotificationReceived` when receiving hybrid notification [Android]
503
These is [an issue opened for that](https://github.com/google/gcm/issues/63). Behavior is not consistent between 2 platforms
504

Libin Lu's avatar
Libin Lu committed
505
#### Android notification is showing a white icon
506 507
Since Lollipop, the push notification icon is required to be all white, otherwise it will be a white circle.

Libin Lu's avatar
Libin Lu committed
508 509 510
#### iOS not receiving notification when the app running in the background
- Try adding Background Modes permission in Xcode->Click on project file->Capabilities tab->Background Modes->Remote Notifications

511 512 513 514 515 516 517
#### I am using Proguard
You need to add this to your `android/app/proguard-rules.pro`:
```
# Google Play Services
-keep class com.google.android.gms.** { *; }
-dontwarn com.google.android.gms.**
```
Libin Lu's avatar
init  
Libin Lu committed
518

Libin Lu's avatar
Libin Lu committed
519 520 521
#### I'm getting `com.android.dex.DexException: Multiple dex files define Lcom/google/android/gms/internal/zzqf;`
It is most likely that you are using other react-native-modules that requires conflicting google play service
search for `compile "com.google.android.gms` in android and see who specifies specific version. Resolve conflict by loosing their version or specify a version resolve in gradle.
Libin Lu's avatar
Libin Lu committed
522
Check this article https://medium.com/@suchydan/how-to-solve-google-play-services-version-collision-in-gradle-dependencies-ef086ae5c75f#.9l0u84y9t
Libin Lu's avatar
Libin Lu committed
523

Libin Lu's avatar
Libin Lu committed
524
#### How do I tell if user clicks the notification banner?
Naisheel Verdhan's avatar
Naisheel Verdhan committed
525
Check open from tray flag in notification. It will be either 0 or 1 for iOS and undefined or 1 for android. I decide for iOS based on [this](http://stackoverflow.com/questions/20569201/remote-notification-method-called-twice), and for android I set it if notification is triggered by intent change.
Libin Lu's avatar
Libin Lu committed
526

Libin Lu's avatar
Libin Lu committed
527
#### Android notification doesn't vibrate/show head-up display etc
528
All available features are [here](https://firebase.google.com/docs/cloud-messaging/http-server-ref#notification-payload-support). FCM may add more support in the future but there is no timeline.
Libin Lu's avatar
Libin Lu committed
529
In the mean time, you can pass "custom_notification" in a data message. This repo will show a local notification for you so you can set priority etc
Libin Lu's avatar
Libin Lu committed
530

Libin Lu's avatar
Libin Lu committed
531 532 533
#### How do I do xxx with FCM?
check out [official docs and see if they support](https://firebase.google.com/docs/cloud-messaging/concept-options)

Libin Lu's avatar
Libin Lu committed
534
#### I want to add advanced feature that FCM doesn't support for remote notification
Libin Lu's avatar
Libin Lu committed
535
You can either wait for FCM to develop it or you have to write native code to create notifications.
Libin Lu's avatar
Libin Lu committed
536 537
- for iOS, you can do it in `didReceiveRemoteNotification` in `appDelegate.m`
- for android, you can do it by implementing a service similar to "com.evollu.react.fcm.MessagingService"
Libin Lu's avatar
Libin Lu committed
538

Libin Lu's avatar
Libin Lu committed
539 540
Or if you have a good way to wake up react native javascript thread please let me know, although I'm worring waking up the whole application is too expensive.

Libin Lu's avatar
Libin Lu committed
541 542 543 544 545 546 547 548 549 550 551 552
#### What about new notifications in iOS 10
Congratulations, now you have 5 notification handler to register!
in sum
- `willPresentNotification` is introduced in iOS 10 and will only be called when local/remote notification will show up. This allows you to run some code **before** notification shows up. You can also decide how to show the notification.
- `didReceiveNotificationResponse` is introduced in iOS 10 and provides user's response together with local/remote notification. It could be swipe, text input etc.
- `didReceiveLocalNotification` is for iOS 9 and below. Triggered when user clicks local notification. replaced by `didReceiveNotificationResponse`
- `didReceiveRemoteNotification` is for iOS 9 and below. Triggered when remote notification received.
- `didReceiveRemoteNotification:fetchCompletionHandler` is for both iOS 9 and 10. it gets triggered 2 times for each remote notification. 1st time when notification is received. 2nd time when notification is clicked. in iOS 9, it serves us the purpose of both `willPresentNotification` and `didReceiveNotificationResponse` but for remote notification only. in iOS 10, you don't need it in most of the case unless you need to do background fetching

Great, how do I configure for FCM?
It is up to you! FCM is just a bridging library that passes notification into javascript world. You can define your own NSDictionary and pass it into notification.

Libin Lu's avatar
Libin Lu committed
553
#### I want to show notification when app is in foreground
Libin Lu's avatar
Libin Lu committed
554
Use `show_in_foreground` attribute to tell app to show banner even if the app is in foreground.
Libin Lu's avatar
Libin Lu committed
555

Libin Lu's avatar
Libin Lu committed
556
NOTE: this flag doesn't work for Android push notification, use `custom_notification` to achieve this.
Libin Lu's avatar
Libin Lu committed
557

Libin Lu's avatar
Libin Lu committed
558 559
NOTE: foreground notification is not available on iOS 9 and below

Libin Lu's avatar
Libin Lu committed
560 561 562
#### Do I need to handle APNS token registration?
No. Method swizzling in Firebase Cloud Messaging handles this unless you turn that off. Then you are on your own to implement the handling. Check this link https://firebase.google.com/docs/cloud-messaging/ios/client

Libin Lu's avatar
Libin Lu committed
563 564 565
#### I want to add actions in iOS notification
Check this https://github.com/evollu/react-native-fcm/issues/325

Libin Lu's avatar
Libin Lu committed
566 567 568
#### React/RCTBridgeModule.h not found
This is mostly caused by React Native upgrade. Here is a fix http://stackoverflow.com/questions/41477241/react-native-xcode-upgrade-and-now-rctconvert-h-not-found

569 570
#### Some features are missing
Issues and pull requests are welcome. Let's make this thing better!
571

Libin Lu's avatar
Libin Lu committed
572
#### Credits
Libin Lu's avatar
Libin Lu committed
573
Local notification implementation is inspired by react-native-push-notification by zo0r
Noitidart's avatar
Noitidart committed
574

delvedor's avatar
delvedor committed
575 576 577 578 579 580
#### I get the notifications in the logs, but the native prompt does not show up
Did you remember to ask the user permissions? ;)
```js
await FCM.requestPermissions({ badge: false, sound: true, alert: true })
```

Noitidart's avatar
Noitidart committed
581
## Sending remote notification
Noitidart's avatar
Noitidart committed
582 583 584 585

How to send a push notification from your server? You should `POST` to this endpoint:

    https://fcm.googleapis.com/fcm/send
delvedor's avatar
delvedor committed
586

Noitidart's avatar
Noitidart committed
587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630
You need to set the headers of `Content-Type` to `application/json` and `Authorization` to `key=******` where you replace `******` with the "Legacy server key" from here the Firebase dashbaord. Get this information by first going to:

1. https://console.firebase.google.com/
2. Click on "Gear" icon and click "Project Settingss". Screenshot: https://screenshotscdn.firefoxusercontent.com/images/35b93de8-44e1-49af-89d7-140b74c267c7.png
3. Click on "Cloud Message" tab and find "Legacy server key" here. Screenshot: https://screenshotscdn.firefoxusercontent.com/images/c52ec383-783d-47d3-a1e6-75249fb6f3fb.png

The body should be json like this:

```
{
  "to":"FCM_DEVICE_TOKEN_GOES_HERE",
  "data": {
    "custom_notification": {
      "body": "test body",
      "title": "test title",
      "color":"#00ACD4",
      "priority":"high",
      "icon":"ic_launcher",
      "group": "GROUP",
      "sound": "default",
      "id": "id",
      "show_in_foreground": true
    }
  }
}
```

Example:

```
fetch('https://fcm.googleapis.com/fcm/send', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
        'Authorization': 'key=EFefklefwef9efwefkejfwf'
    },
    body: JSON.stringify({
        "to":"kajfsdf:efawefwe_fsdfdsf-asfawefwefwf_asdfsdfasd-asdfasdfsd9A_asdfsdf_asdf",
        "data": {
            "custom_notification": {
            "body": "test body",
            "title": "test title",
            "color":"#00ACD4",
            "priority":"high",
Noitidart's avatar
Noitidart committed
631
            "icon":"ic_notif",
Noitidart's avatar
Noitidart committed
632 633 634 635 636 637 638 639 640
            "group": "GROUP",
            "sound": "default",
            "id": "id",
            "show_in_foreground": true
            }
        }
    })
})
```