README.md 33.8 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
- current latest version: v10.x
Libin Lu's avatar
Libin Lu committed
5
- for iOS SDK < 4, use react-native-fcm@6.2.3 (v6.x is still compatible with Firebase SDK v4)
6 7 8
- 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
9
- local notification is not only available in V1
Libin Lu's avatar
Libin Lu committed
10

11
- 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
12

Libin Lu's avatar
Libin Lu committed
13 14
- 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
15

Libin Lu's avatar
init  
Libin Lu committed
16 17 18
## Installation

- Run `npm install react-native-fcm --save`
Libin Lu's avatar
Libin Lu committed
19 20
- [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
init  
Libin Lu committed
21

Libin Lu's avatar
Libin Lu committed
22 23 24 25
## Configure Firebase Console
### FCM config file

In [firebase console](https://console.firebase.google.com/), you can:
Sean Adkinson's avatar
Sean Adkinson committed
26
- for **Android**: download `google-services.json` file and place it in `android/app` directory
Libin Lu's avatar
Libin Lu committed
27 28 29 30 31
- 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

32
## Android Configuration
Libin Lu's avatar
init  
Libin Lu committed
33

Libin Lu's avatar
Libin Lu committed
34 35 36 37
- 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

38 39 40 41 42
- 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
43 44
```

Sagiv Ofek's avatar
Sagiv Ofek committed
45
- Edit `android/app/build.gradle`. Add at the bottom of the file:
46 47
```diff
  apply plugin: "com.android.application"
KazuyaKitahara's avatar
KazuyaKitahara committed
48
  ...
49
+ apply plugin: 'com.google.gms.google-services'
Libin Lu's avatar
init  
Libin Lu committed
50 51
```

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

54 55 56 57 58
```diff
  <application
    ...
    android:theme="@style/AppTheme">

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

Libin Lu's avatar
Libin Lu committed
61
+   <service android:name="com.evollu.react.fcm.MessagingService" android:enabled="true" android:exported="true">
62 63 64 65 66 67 68 69 70 71 72 73
+     <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
74
```
75

Libin Lu's avatar
Libin Lu committed
76 77 78
- Edit `{YOUR_MAIN_PROJECT}/app/build.gradle`:
```diff
 dependencies {
79
+    compile project(':react-native-fcm')
Libin Lu's avatar
Libin Lu committed
80
+    compile 'com.google.firebase:firebase-core:10.0.1' //this decides your firebase SDK version
Justyn's avatar
Justyn committed
81
+    compile 'com.google.firebase:firebase-messaging:10.0.1'
Libin Lu's avatar
Libin Lu committed
82 83 84 85 86
     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
87
- Edit `android/settings.gradle`
88 89 90 91 92 93
```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
94

95
### Config for notification and `click_action` in Android
96 97 98 99 100 101 102 103 104 105 106 107 108

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>
109 110
      <action android:name="android.intent.action.MAIN" />
      <category android:name="android.intent.category.LAUNCHER" />
111 112
    </intent-filter>
  </activity>
113
```
114 115

Notes:
Libin Lu's avatar
Libin Lu committed
116
- `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
117
- you if want to handle `click_action` you need to add custom intent-filter, check native android documentation
118 119


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

Libin Lu's avatar
Libin Lu committed
122
- RN 0.28:
123 124 125 126 127 128 129 130 131 132 133 134 135 136

```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
137
NOTE: Verify that react-native links correctly in `MainApplication.java`
138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158

```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(),
      );
    }
 ```   



159 160 161 162 163 164 165 166 167 168 169 170 171
- 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);
+   }       
172
```
Libin Lu's avatar
init  
Libin Lu committed
173

174 175 176
Notes:
- `@Override` is added to update intent on notification click

177
## IOS Configuration
Libin Lu's avatar
init  
Libin Lu committed
178

Libin Lu's avatar
Libin Lu committed
179 180
### Pod approach:

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

183
Configure the project:
Libin Lu's avatar
Libin Lu committed
184 185
```
cd ios && pod init
186 187 188 189 190 191 192
```

(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
193
+ pod 'Firebase/Messaging'
194 195 196 197 198
```

Install the `Firebase/Messaging` pod:
```
pod install
Libin Lu's avatar
Libin Lu committed
199
```
Libin Lu's avatar
Libin Lu committed
200
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
201
NOTE: there is a working example in `master` branch
Libin Lu's avatar
init  
Libin Lu committed
202

Libin Lu's avatar
Libin Lu committed
203
### Non Cocoapod approach
204

Libin Lu's avatar
Libin Lu committed
205
1. Follow the instruction on [Integrate without CocoaPods](https://firebase.google.com/docs/ios/setup#frameworks).
Libin Lu's avatar
Libin Lu committed
206
- Import libraries, add Capabilities (background running and push notification), upload APNS and etc etc etc...
Libin Lu's avatar
Libin Lu committed
207 208 209
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
210 211
<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
212 213

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

Libin Lu's avatar
Libin Lu committed
215 216
Edit `AppDelegate.h`:
```diff
Libin Lu's avatar
Libin Lu committed
217 218
+ @import UserNotifications;
+
Libin Lu's avatar
Libin Lu committed
219 220 221
+ @interface AppDelegate : UIResponder <UIApplicationDelegate,UNUserNotificationCenterDelegate>
- @interface AppDelegate : UIResponder <UIApplicationDelegate>
```
Libin Lu's avatar
init  
Libin Lu committed
222

223 224 225 226 227 228 229 230 231
Edit `AppDelegate.m`:
```diff
+ #import "RNFIRMessaging.h"
  //...

  - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
  {
  //...
+   [FIRApp configure];
Libin Lu's avatar
Libin Lu committed
232
+   [[UNUserNotificationCenter currentNotificationCenter] setDelegate:self];
233 234 235

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

Libin Lu's avatar
Libin Lu committed
237
+
Libin Lu's avatar
Libin Lu committed
238
+ - (void)userNotificationCenter:(UNUserNotificationCenter *)center willPresentNotification:(UNNotification *)notification withCompletionHandler:(void (^)(UNNotificationPresentationOptions))completionHandler
Libin Lu's avatar
Libin Lu committed
239
+ {
Libin Lu's avatar
Libin Lu committed
240
+   [RNFIRMessaging willPresentNotification:notification withCompletionHandler:completionHandler];
Libin Lu's avatar
Libin Lu committed
241
+ }
Libin Lu's avatar
Libin Lu committed
242
+
Libin Lu's avatar
Libin Lu committed
243
+ #if defined(__IPHONE_11_0)
Libin Lu's avatar
Libin Lu committed
244
+ - (void)userNotificationCenter:(UNUserNotificationCenter *)center didReceiveNotificationResponse:(UNNotificationResponse *)response withCompletionHandler:(void (^)(void))completionHandler
Libin Lu's avatar
Libin Lu committed
245
+ {
Libin Lu's avatar
Libin Lu committed
246
+   [RNFIRMessaging didReceiveNotificationResponse:response withCompletionHandler:completionHandler];
Libin Lu's avatar
Libin Lu committed
247
+ }
Libin Lu's avatar
Libin Lu committed
248 249 250 251 252 253
+ #else
+ - (void)userNotificationCenter:(UNUserNotificationCenter *)center didReceiveNotificationResponse:(UNNotificationResponse *)response withCompletionHandler:(void(^)())completionHandler
+ {
+   [RNFIRMessaging didReceiveNotificationResponse:response withCompletionHandler:completionHandler];
+ }
+ #endif
Libin Lu's avatar
Libin Lu committed
254
+
Libin Lu's avatar
Libin Lu committed
255
+ //You can skip this method if you don't want to use local notification
Libin Lu's avatar
Libin Lu committed
256
+ -(void)application:(UIApplication *)application didReceiveLocalNotification:(UILocalNotification *)notification {
Libin Lu's avatar
Libin Lu committed
257
+   [RNFIRMessaging didReceiveLocalNotification:notification];
Libin Lu's avatar
Libin Lu committed
258
+ }
259
+
Libin Lu's avatar
Libin Lu committed
260
+ - (void)application:(UIApplication *)application didReceiveRemoteNotification:(nonnull NSDictionary *)userInfo fetchCompletionHandler:(nonnull void (^)(UIBackgroundFetchResult))completionHandler{
Libin Lu's avatar
Libin Lu committed
261
+   [RNFIRMessaging didReceiveRemoteNotification:userInfo fetchCompletionHandler:completionHandler];
262 263
+ }
```
264

Libin Lu's avatar
Libin Lu committed
265
### Add Capabilities
266 267 268
- Select your project **Capabilities** and enable:
  - **Push Notifications**
  - *Background Modes* > **Remote notifications**.
269

Libin Lu's avatar
Libin Lu committed
270
### FirebaseAppDelegateProxyEnabled
Libin Lu's avatar
Libin Lu committed
271
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
272

Libin Lu's avatar
Libin Lu committed
273
## Setup Local Notifications
Libin Lu's avatar
Libin Lu committed
274
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
275

Libin Lu's avatar
Libin Lu committed
276
### IOS
Libin Lu's avatar
Libin Lu committed
277
No change required
278

Libin Lu's avatar
Libin Lu committed
279
### Android
Libin Lu's avatar
Libin Lu committed
280 281 282 283 284
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" />
285

Anmol Wassan's avatar
Anmol Wassan committed
286
  <application>
Libin Lu's avatar
Libin Lu committed
287 288 289 290 291 292 293 294 295 296
+      <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>
297
```
Libin Lu's avatar
Libin Lu committed
298 299
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
300

Libin Lu's avatar
Libin Lu committed
301
## Usage
Libin Lu's avatar
init  
Libin Lu committed
302 303

```javascript
Sarath's avatar
Sarath committed
304
import {Platform} from 'react-native';
Libin Lu's avatar
Libin Lu committed
305
import FCM, {FCMEvent, RemoteNotificationResult, WillPresentNotificationResult, NotificationType} from 'react-native-fcm';
Goran Gajic's avatar
Goran Gajic committed
306

Libin Lu's avatar
Libin Lu committed
307 308 309 310 311 312 313
// this shall be called regardless of app state: running, background or not running. Won't be called when app is killed by user in iOS
FCM.on(FCMEvent.Notification, async (notif) => {
    // there are two parts of notif. notif.notification contains the notification payload, notif.data contains data payload
    if(notif.local_notification){
      //this is a local notification
    }
    if(notif.opened_from_tray){
Libin Lu's avatar
Libin Lu committed
314 315
      //iOS: app is open/resumed because user clicked banner
      //Android: app is open/resumed because user clicked banner or tapped app icon
Libin Lu's avatar
Libin Lu committed
316
    }
Libin Lu's avatar
Libin Lu committed
317
    // await someAsyncCall();
Libin Lu's avatar
Libin Lu committed
318 319

    if(Platform.OS ==='ios'){
Krystof Celba's avatar
Krystof Celba committed
320 321 322 323
      if (notif._actionIdentifier === 'com.myapp.MyCategory.Confirm') {
        // handle notification action here
        // the text from user is in notif._userText if type of the action is NotificationActionType.TextInput
      }
Libin Lu's avatar
Libin Lu committed
324
      //optional
Libin Lu's avatar
Libin Lu committed
325
      //iOS requires developers to call completionHandler to end notification process. If you do not call it your background remote notifications could be throttled, to read more about it see https://developer.apple.com/documentation/uikit/uiapplicationdelegate/1623013-application.
Libin Lu's avatar
Libin Lu committed
326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345
      //This library handles it for you automatically with default behavior (for remote notification, finish with NoData; for WillPresent, finish depend on "show_in_foreground"). However if you want to return different result, follow the following code to override
      //notif._notificationType is available for iOS platfrom
      switch(notif._notificationType){
        case NotificationType.Remote:
          notif.finish(RemoteNotificationResult.NewData) //other types available: RemoteNotificationResult.NewData, RemoteNotificationResult.ResultFailed
          break;
        case NotificationType.NotificationResponse:
          notif.finish();
          break;
        case NotificationType.WillPresent:
          notif.finish(WillPresentNotificationResult.All) //other types available: WillPresentNotificationResult.None
          break;
      }
    }
});
FCM.on(FCMEvent.RefreshToken, (token) => {
    console.log(token)
    // fcm token may not be available on first load, catch it here
});
        
346
class App extends Component {
Libin Lu's avatar
Libin Lu committed
347
    componentDidMount() {
Libin Lu's avatar
Libin Lu committed
348 349 350 351
        // iOS: show permission prompt for the first call. later just check permission in user settings
        // Android: check permission in user settings
        FCM.requestPermissions().then(()=>console.log('granted')).catch(()=>console.log('notification permission rejected'));
        
Libin Lu's avatar
Libin Lu committed
352 353 354 355
        FCM.getFCMToken().then(token => {
            console.log(token)
            // store fcm token in your server
        });
Libin Lu's avatar
Libin Lu committed
356
        
Libin Lu's avatar
Libin Lu committed
357
        this.notificationListener = FCM.on(FCMEvent.Notification, async (notif) => {
Libin Lu's avatar
Libin Lu committed
358
            // optional, do some component related stuff
Libin Lu's avatar
Libin Lu committed
359
        });
Libin Lu's avatar
Libin Lu committed
360
        
Libin Lu's avatar
Libin Lu committed
361 362
        // initial notification contains the notification that launchs the app. If user launchs app by clicking banner, the banner notification info will be here rather than through FCM.on event
        // sometimes Android kills activity when app goes to background, and when resume it broadcasts notification before JS is run. You can use FCM.getInitialNotification() to capture those missed events.
Libin Lu's avatar
Libin Lu committed
363
        // initial notification will be triggered all the time even when open app by icon so send some action identifier when you send notification
Alex Dunne's avatar
Alex Dunne committed
364
        FCM.getInitialNotification().then(notif => {
Libin Lu's avatar
Libin Lu committed
365 366
           console.log(notif)
        });
Libin Lu's avatar
Libin Lu committed
367
    }
Goran Gajic's avatar
Goran Gajic committed
368

Libin Lu's avatar
Libin Lu committed
369
    componentWillUnmount() {
370 371
        // stop listening for events
        this.notificationListener.remove();
Libin Lu's avatar
Libin Lu committed
372
    }
373

Libin Lu's avatar
Libin Lu committed
374
    otherMethods(){
375

Libin Lu's avatar
Libin Lu committed
376 377 378 379 380 381 382 383
        FCM.subscribeToTopic('/topics/foo-bar');
        FCM.unsubscribeFromTopic('/topics/foo-bar');
        FCM.presentLocalNotification({
            id: "UNIQ_ID_STRING",                               // (optional for instant notification)
            title: "My Notification Title",                     // as FCM payload
            body: "My Notification Message",                    // as FCM payload (required)
            sound: "default",                                   // as FCM payload
            priority: "high",                                   // as FCM payload
384
            click_action: "com.myapp.MyCategory",               // as FCM payload - this is used as category identifier on iOS.
Libin Lu's avatar
Libin Lu committed
385 386
            badge: 10,                                          // as FCM payload IOS only, set 0 to clear badges
            number: 10,                                         // Android only
Libin Lu's avatar
Libin Lu committed
387 388
            ticker: "My Notification Ticker",                   // Android only
            auto_cancel: true,                                  // Android only (default true)
Libin Lu's avatar
Libin Lu committed
389
            large_icon: "ic_launcher",                           // Android only
Libin Lu's avatar
Libin Lu committed
390
            icon: "ic_launcher",                                // as FCM payload, you can relace this with custom icon you put in mipmap
Libin Lu's avatar
Libin Lu committed
391 392 393
            big_text: "Show when notification is expanded",     // Android only
            sub_text: "This is a subText",                      // Android only
            color: "red",                                       // Android only
Libin Lu's avatar
Libin Lu committed
394
            vibrate: 300,                                       // Android only default: 300, no vibration if you pass 0
Libin Lu's avatar
Libin Lu committed
395
            wake_screen: true,                                  // Android only, wake up screen when notification arrives
Libin Lu's avatar
Libin Lu committed
396
            group: "group",                                     // Android only
Libin Lu's avatar
Libin Lu committed
397
            picture: "https://google.png",                      // Android only bigPicture style
Libin Lu's avatar
Libin Lu committed
398
            ongoing: true,                                      // Android only
Libin Lu's avatar
Libin Lu committed
399
            my_custom_data:'my_custom_field_value',             // extra data you want to throw
400
            lights: true,                                       // Android only, LED blinking (default false)
Libin Lu's avatar
Libin Lu committed
401
            show_in_foreground                                  // notification when app is in foreground (local & remote)
Libin Lu's avatar
Libin Lu committed
402
        });
403

Libin Lu's avatar
Libin Lu committed
404
        FCM.scheduleLocalNotification({
Libin Lu's avatar
Libin Lu committed
405
            fire_date: new Date().getTime(),      //RN's converter is used, accept epoch time and whatever that converter supports
Libin Lu's avatar
Libin Lu committed
406
            id: "UNIQ_ID_STRING",    //REQUIRED! this is what you use to lookup and delete notification. In android notification with same ID will override each other
Libin Lu's avatar
Libin Lu committed
407 408
            body: "from future past",
            repeat_interval: "week" //day, hour
Libin Lu's avatar
Libin Lu committed
409
        })
Libin Lu's avatar
Libin Lu committed
410 411

        FCM.getScheduledLocalNotifications().then(notif=>console.log(notif));
412

Libin Lu's avatar
Libin Lu committed
413 414 415
        //these clears notification from notification center/tray
        FCM.removeAllDeliveredNotifications()
        FCM.removeDeliveredNotification("UNIQ_ID_STRING")
416

Libin Lu's avatar
Libin Lu committed
417 418 419
        //these removes future local notifications
        FCM.cancelAllLocalNotifications()
        FCM.cancelLocalNotification("UNIQ_ID_STRING")
420

Libin Lu's avatar
Libin Lu committed
421 422
        FCM.setBadgeNumber(1);                                       // iOS and supporting android.
        FCM.getBadgeNumber().then(number=>console.log(number));     // iOS and supporting android.
423
        FCM.send('984XXXXXXXXX', {
424
          my_custom_data_1: 'my_custom_field_value_1',
425 426
          my_custom_data_2: 'my_custom_field_value_2'
        });
Sean Adkinson's avatar
Sean Adkinson committed
427

Krystof Celba's avatar
Krystof Celba committed
428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449
        // Call this somewhere at initialization to register types of your actionable notifications. See https://goo.gl/UanU9p.
        FCM.setNotificationCategories([
          {
            id: 'com.myapp.MyCategory',
            actions: [
              { 
                type: NotificationActionType.Default, // or NotificationActionType.TextInput
                id: 'com.myapp.MyCategory.Confirm',
                title: 'Confirm', // Use with NotificationActionType.Default
                textInputButtonTitle: 'Send', // Use with NotificationActionType.TextInput
                textInputPlaceholder: 'Message', // Use with NotificationActionType.TextInput
                // Available options: NotificationActionOption.None, NotificationActionOption.AuthenticationRequired, NotificationActionOption.Destructive and NotificationActionOption.Foreground.
                options: NotificationActionOption.AuthenticationRequired, // single or array
              },
            ],
            intentIdentifiers: [],
            // Available options: NotificationCategoryOption.None, NotificationCategoryOption.CustomDismissAction and NotificationCategoryOption.AllowInCarPlay.
            // On iOS >= 11.0 there is also NotificationCategoryOption.PreviewsShowTitle and NotificationCategoryOption.PreviewsShowSubtitle.
            options: [NotificationCategoryOption.CustomDismissAction, NotificationCategoryOption.PreviewsShowTitle], // single or array
          },
        ]);

450 451 452 453 454 455
        FCM.deleteInstanceId()
            .then( () => {
              //Deleted instance id successfully
              //This will reset Instance ID and revokes all tokens.
            })
            .catch(error => {
Sean Adkinson's avatar
Sean Adkinson committed
456
              //Error while deleting instance id
457
            });
Libin Lu's avatar
Libin Lu committed
458
    }
459
}
Libin Lu's avatar
init  
Libin Lu committed
460 461
```

Lucas Bento's avatar
Lucas Bento committed
462
### Build custom push notification for Android
Libin Lu's avatar
Libin Lu committed
463 464
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
465
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
466 467

WARNING: `custom_notification` **cannot** be used together with `notification` attribute. use `data` **ALONE**
Libin Lu's avatar
Libin Lu committed
468 469 470 471 472 473 474 475

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
476
      "body": "test body",
Libin Lu's avatar
Libin Lu committed
477 478 479 480 481
      "title": "test title",
      "color":"#00ACD4",
      "priority":"high",
      "icon":"ic_notif",
      "group": "GROUP",
Libin Lu's avatar
Libin Lu committed
482 483
      "id": "id",
      "show_in_foreground": true
Libin Lu's avatar
Libin Lu committed
484 485 486 487 488 489 490
    }
  }
}
```

Check local notification guide below for configuration.

Sean Adkinson's avatar
Sean Adkinson committed
491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510
**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);
```

511
### Behaviour when sending `notification` and `data` payload through GCM
Libin Lu's avatar
Libin Lu committed
512
- 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
513

Libin Lu's avatar
Libin Lu committed
514 515 516 517 518
- 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.
519
 - Android will receive notificaton from `FCMNotificationReceived` event
Naisheel Verdhan's avatar
Naisheel Verdhan committed
520
    * if you pass `notification` payload, it will receive data when user click on notification
521 522 523 524 525
    * 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
526 527 528 529 530 531 532 533 534 535 536 537 538
   {
      "to":"some_device_token",
      "content_available": true,
      "notification": {
          "title": "hello",
          "body": "yo",
          "click_action": "fcm.ACTION.HELLO"
      },
      "data": {
          "extra":"juice"
      }
    }
    ```
539 540

    and event callback will receive as:
541

542 543 544 545
    - Android
      ```json
      {
        "fcm": {"action": "fcm.ACTION.HELLO"},
Libin Lu's avatar
Libin Lu committed
546
        "opened_from_tray": 1,
547 548 549
        "extra": "juice"
      }
      ```
550

551 552 553 554
    - iOS
      ```json
      {
        "apns": {"action_category": "fcm.ACTION.HELLO"},
Libin Lu's avatar
Libin Lu committed
555
        "opened_from_tray": 1,
556 557 558
        "extra": "juice"
      }
      ```
559

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

Naisheel Verdhan's avatar
Naisheel Verdhan committed
563
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)).
564

565 566 567 568 569
### 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', {
570
  my_custom_data_1: 'my_custom_field_value_1',
571 572 573 574 575 576
  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.

577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596
### 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
597
## Q & A
598

Libin Lu's avatar
Libin Lu committed
599 600 601 602 603 604
#### 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

605
#### My Android build is failing
Libin Lu's avatar
Libin Lu committed
606 607 608 609 610 611 612 613 614 615 616 617 618
Try update your SDK and google play service. If you are having multiple plugins requiring different version of play-service sdk, use force to lock in version
```
dependencies {
    ...
    compile ('com.android.support:appcompat-v7:25.0.1') {
        exclude group: 'com.google.android', module: 'support-v4'
    }
    compile ('com.google.android.gms:play-services-gcm:10.0.1') {
        force = true;
    }
   ...
}
```
619

Libin Lu's avatar
Libin Lu committed
620 621
#### 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
622

Libin Lu's avatar
Libin Lu committed
623 624
#### 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.
625

Libin Lu's avatar
Libin Lu committed
626 627 628 629
#### 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
630
#### App running in background doesn't trigger `FCMNotificationReceived` when receiving hybrid notification [Android]
631
These is [an issue opened for that](https://github.com/google/gcm/issues/63). Behavior is not consistent between 2 platforms
632

Libin Lu's avatar
Libin Lu committed
633
#### Android notification is showing a white icon
634 635
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
636 637 638
#### 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

639 640 641 642 643 644 645
#### 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
646

Libin Lu's avatar
Libin Lu committed
647 648 649
#### 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
650
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
651

Libin Lu's avatar
Libin Lu committed
652
#### How do I tell if user clicks the notification banner?
Naisheel Verdhan's avatar
Naisheel Verdhan committed
653
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
654

Libin Lu's avatar
Libin Lu committed
655
#### Android notification doesn't vibrate/show head-up display etc
656
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
657
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
658

Libin Lu's avatar
Libin Lu committed
659 660 661
#### 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
662
#### I want to add advanced feature that FCM doesn't support for remote notification
Libin Lu's avatar
Libin Lu committed
663
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
664 665
- 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
666

Libin Lu's avatar
Libin Lu committed
667 668
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
669 670 671 672 673 674 675 676 677 678 679 680
#### 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
681
#### I want to show notification when app is in foreground
Libin Lu's avatar
Libin Lu committed
682
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
683
NOTE: this flag doesn't work for Android push notification, use `custom_notification` to achieve this.
Libin Lu's avatar
Libin Lu committed
684

Libin Lu's avatar
Libin Lu committed
685 686 687
#### 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
688 689 690
#### 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
691 692 693
#### 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

694 695
#### Some features are missing
Issues and pull requests are welcome. Let's make this thing better!
696

Libin Lu's avatar
Libin Lu committed
697
#### Credits
Libin Lu's avatar
Libin Lu committed
698
Local notification implementation is inspired by react-native-push-notification by zo0r
Noitidart's avatar
Noitidart committed
699

Noitidart's avatar
Noitidart committed
700
## Sending remote notification
Noitidart's avatar
Noitidart committed
701 702 703 704 705 706 707 708 709 710 711 712 713 714 715 716 717 718 719 720 721 722 723 724 725 726 727 728 729 730 731 732 733 734 735 736 737 738 739 740 741 742 743 744 745 746 747 748 749

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

    https://fcm.googleapis.com/fcm/send
    
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
750
            "icon":"ic_notif",
Noitidart's avatar
Noitidart committed
751 752 753 754 755 756 757 758 759 760
            "group": "GROUP",
            "sound": "default",
            "id": "id",
            "show_in_foreground": true
            }
        }
    })
})
```