NOTE: If you are running RN < 0.30.0, you need to use react-native-fcm@1.0.15

Installation

• Run npm install react-native-fcm --save
• Run react-native link react-native-fcm (RN 0.29.1+, otherwise rnpm link react-native-fcm)

Android Configuration

• Edit android/build.gradle:

  dependencies {
    classpath 'com.android.tools.build:gradle:2.0.0'
+   classpath 'com.google.gms:google-services:3.0.0'

• Edit android/app/build.gradle:

  apply plugin: "com.android.application"
+ apply plugin: 'com.google.gms.google-services'

• Edit android/app/src/main/AndroidManifest.xml:

  <application
    ...
    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>
+   <receiver android:name="com.evollu.react.fcm.FIRLocalMessagingPublisher" />
    ...

Config for notification and click_action in Android

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:

  <activity
    android:name=".MainActivity"
    android:label="@string/app_name"
    android:windowSoftInputMode="adjustResize"
+   android:launchMode="singleTop"
    android:configChanges="keyboard|keyboardHidden|orientation|screenSize">
    <intent-filter>
      <action android:name="android.intent.action.MAIN" />
      <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
+   <intent-filter>
+     <action android:name="fcm.ACTION.HELLO" />
+     <category android:name="android.intent.category.DEFAULT" />
+   </intent-filter>
  </activity>

Notes:

• launchMode="singleTop" is to reuse MainActivity
• replace "fcm.ACTION.HELLO" by the click_action you want to match

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

• RN 0.28:

  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);
+   }       

• RN <= 0.27:

  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);
+   }       

Notes:

• @Override is added to update intent on notification click

IOS Configuration

Pod approach:

Make sure you have Cocoapods version > 1.0

Install the Firebase/Messaging pod:

cd ios && pod init
pod install Firebase/Messaging

Non Cocoapod approach

1. Download the Firebase SDK framework from Integrate without CocoaPods
2. Follow the README to link frameworks (Analytics+Messaging)

Shared steps

Edit AppDelegate.m:

+ #import "Firebase.h" // if you are using Non Cocoapod approach
+ #import "RNFIRMessaging.h"
+ #import "RCTPushNotificationManager.h"
  //...

  - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
  {
  //...
+   [FIRApp configure];
  }

+ - (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)notification fetchCompletionHandler:(void (^)(UIBackgroundFetchResult))handler {
+   [[NSNotificationCenter defaultCenter] postNotificationName:FCMNotificationReceived object:self userInfo:notification];
+   handler(UIBackgroundFetchResultNewData);
+ }

+// Required for the localNotification event.
+- (void)application:(UIApplication *)application didReceiveLocalNotification:(UILocalNotification *)notification
+{
+  [RCTPushNotificationManager didReceiveLocalNotification:notification];
+}

FCM config file

In firebase console, you can get google-services.json file and place it in android/app directory and get GoogleService-Info.plist file and place it in /ios/your-project-name directory (next to your Info.plist)

Usage

import FCM from 'react-native-fcm';

class App extends Component {
  componentDidMount() {
    FCM.requestPermissions(); // for iOS
    FCM.getFCMToken().then(token => {
      console.log(token)
      // store fcm token in your server
    });
    this.notificationUnsubscribe = FCM.on('notification', (notif) => {
      // there are two parts of notif. notif.notification contains the notification payload, notif.data contains data payload
    });
    this.localNotificationUnsubscribe = FCM.on('localNotification', (notif) => {
      // notif.notification contains the data
    });
    this.refreshUnsubscribe = FCM.on('refreshToken', (token) => {
      console.log(token)
      // fcm token may not be available on first load, catch it here
    });

    FCM.subscribeToTopic('/topics/foo-bar');
    FCM.unsubscribeFromTopic('/topics/foo-bar');
  }

  componentWillUnmount() {
    // prevent leaking
    this.refreshUnsubscribe();
    this.notificationUnsubscribe();
    this.localNotificationUnsubscribe();
  }
}

Behaviour when sending notification and data payload through GCM

• When app is not running and user clicks notification, notification data will be passed into FCM.initialData

• 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
  • 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.

• Android will receive notificaton from FCMNotificationReceived event

  • if you pass notification payload. it will receive data when user click on notification
  • if you pass data payload only, it will receive data when in background

  e.g. fcm payload looks like:

  {
     "to":"some_device_token",
     "content_available": true,
     "notification": {
         "title": "hello",
         "body": "yo",
         "click_action": "fcm.ACTION.HELLO"
     },
     "data": {
         "extra":"juice"
     }
   }

  and event callback will receive as:

  • Android

    {
      "fcm": {"action": "fcm.ACTION.HELLO"},
      "extra": "juice"
    }

  • iOS

    {
      "apns": {"action_category": "fcm.ACTION.HELLO"},
      "extra": "juice"
    }

• When app is running in foreground

• IOS will receive notification and android won't (better not to do anything in foreground for hybrid and send a seprate data message.)

NOTE: it is recommend not to rely on data payload for click_action as it can be overwritten (check this).

Local Notifications (still in progress)

Based on react-native-push-notification by zo0r and Neson

//support for priority on android
const pushNotification = {
      /* Android Only Properties */
      priority: "high", //(optional) default: low, other options: 'min', 'max', 'high'
      title: "My Notification Title", // (optional)
      ticker: "My Notification Ticker", // (optional)
      autoCancel: true, // (optional) default: true
      largeIcon: "ic_launcher", // (optional) default: "ic_launcher"
      smallIcon: "ic_notification", // (optional) default: "ic_notification" with fallback for "ic_launcher"
      bigText: "My big text that will be shown when notification is expanded", // (optional) default: "message" prop
      subText: "This is a subText", // (optional) default: none
      color: "red", // (optional) default: system default
      vibrate: true, // (optional) default: true
      vibration: 300, // vibration length in milliseconds, ignored if vibrate=false, default: 1000
      tag: 'some_tag', // (optional) add tag to message
      group: "group", // (optional) add group to message
      type:'my_custom_field_value', //custom field
      /* iOS and Android properties */
      id: 1234, // (optional)
      message: "My Notification Message", // (required)
      playSound: false, // (optional) default: true
      number: 10 // (optional) default: none (Cannot be zero)
  };

FCM.presentLocalNotification(pushNotification)

const pushNotification = {
  //...
  repeatEvery: "week"// other options: minute, hour, day, week
  //...
}
FCM.scheduleLocalNotification(pushNotification)

//Cancel all notifications(IOS and ANDROID)
FCM.cancelLocalNotifications()

//Cancel notification by id(IOS and ANDROID)
FCM.cancelLocalNotification(notificationID)

Q & A

My Android build is failing

Try update your SDK and google play service

I can't get notification when app is killed

If you send notification with data only, you can only get the data message when app is in foreground or background. Killed app doesn't trigger FCMNotificationReceived. Use notification in the payload instead.

App running in background doesn't trigger FCMNotificationReceived when receiving hybrid notification [Android]

These is an issue opened for that. Behavior is not consistent between 2 platforms

Android notification is showing a white icon

Since Lollipop, the push notification icon is required to be all white, otherwise it will be a white circle.

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

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.**

Android notification doesn't vibrate/show head-up display etc

All available features are here. FCM may add more support in the future but there is no timeline. If you need these features now, send notification with data only and creating notification locally is the only way

Some features are missing

Issues and pull requests are welcome. Let's make this thing better!