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+, otherwisernpm 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>
...
click_action
in Android
Config for notification and 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 theclick_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
- Download the Firebase SDK framework from Integrate without CocoaPods
- 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"
//...
- (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);
+ }
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.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();
}
}
notification
and data
payload through GCM
Behaviour when sending -
When app is not running when 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.
- if you pass
-
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" }
- if you pass
-
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).
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.
FCMNotificationReceived
when receiving hybrid notification [Android]
App running in background doesn't trigger 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 avaibale 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 create notification locally is the only way
Some features are missing
Issues and pull requests are welcome. Let's make this thing better!