expo-firebase-notifications
expo-firebase is still in RC and therefore subject to breaking changings. Be sure to run
yarn upgrade
andcd ios; pod install
when upgrading.
expo-firebase-notifications
enables support for both remote (FCM) and local notifications.
Installation
First you need to install expo-firebase-messaging
.
Now, you need to install the package from npm
registry.
npm install expo-firebase-notifications
or yarn add expo-firebase-notifications
iOS
Cocoapods
If you're using Cocoapods, add the dependency to your Podfile
:
pod 'EXFirebaseNotifications', path: '../node_modules/expo-firebase-notifications/ios'
and run pod install
.
Common Setup
Update AppDelegate.m
Add the following import to the top of your ios/[App Name]/AppDelegate.m:
Add the following to the didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
method, at the end of the function.
;
Based on the RNFirebase iOS setup
Remote Notifications (Optional)
If you would like to support Remote Notifications via FCM, also add the following import to the top of your ios/[App Name]/AppDelegate.m:
import <EXFirebaseMessaging/EXFirebaseMessaging.h>
Then add the following methods to your ios/[App Name]/AppDelegate.m
:
- (void)application:(UIApplication *)application didReceiveRemoteNotification:(nonnull NSDictionary *)userInfo fetchCompletionHandler:(nonnull
Android
-
Append the following lines to
android/settings.gradle
:include ':expo-firebase-notifications'project(':expo-firebase-notifications').projectDir = new File(rootProject.projectDir, '../node_modules/expo-firebase-notifications/android')and if not already included
include ':expo-core'project(':expo-core').projectDir = new File(rootProject.projectDir, '../node_modules/expo-core/android')include ':expo-firebase-app'project(':expo-firebase-app').projectDir = new File(rootProject.projectDir, '../node_modules/expo-firebase-app/android')include ':expo-firebase-messaging'project(':expo-firebase-messaging').projectDir = new File(rootProject.projectDir, '../node_modules/expo-firebase-messaging/android') -
Insert the following lines inside the dependencies block in
android/app/build.gradle
:api project(':expo-firebase-notifications')and if not already included
api project(':expo-core')api project(':expo-firebase-app')api project(':expo-firebase-messaging') -
In order to use the module in Expo, add it to the Activity:
./android/app/src/main/java/host/exp/exponent/MainActivity.java
/** At the top of the file.* This is automatically imported with Android Studio, but if you are in any other editor you will need to manually import the module.*/// This should be here for all Expo Firebase features.// Later in the file...@Overridepublic List<Package> {// Here you can add your own packages.return Arrays.<Package>;} -
Add permissions to the manifest
android/app/src/main/AndroidManifest.xml
:<!-- Not included in ExpoKit by default --> -
Set app launch mode inside activity props
android/app/src/main/AndroidManifest.xml
: -
Optional: Scheduled Notifications If you would like to schedule local notifications then you also need to add the following to the application component of
android/app/src/main/AndroidManifest.xml
:<!-- Scheduled Notifications --> -
Optional: Default icon and color can be set in the manifest
android/app/src/main/AndroidManifest.xml
: Within the application component, add metadata elements to set a default notification icon and color. Android uses these values whenever incoming messages do not explicitly set icon or color.<!-- Set custom default icon. This is used when no icon is set for incoming notification messages.See README(https://goo.gl/l4GJaQ) for more. --><!-- Set color used with incoming notification messages. This is used when no color is set for the incomingnotification message. See README(https://goo.gl/6BKBk7) for more. --> -
Optional: Notification Channels from Android 8.0 (API level 26) and higher, notification channels are supported and recommended. FCM provides a default notification channel with basic settings. If you prefer to create and use your own default channel, set default_notification_channel_id to the ID of your notification channel object as shown; FCM will use this value whenever incoming messages do not explicitly set a notification channel.
android/app/src/main/AndroidManifest.xml
:<!-- Notification Channels -->
Usage
;;;; ; // API can be accessed with: firebase.notifications(); Component state = user: null ; async { const status = await Permissions; // Optionally: Permissions.USER_FACING_NOTIFICATIONS; if status !== 'granted' return; thisnotificationDisplayedListener = firebase ; thisnotificationListener = firebase ; // Get device push token const token = await firebase; } { // Clean up: remove the listener this; this; } { return <View />; }
Performing the action in the background
By default, the action will cause your application to open and come to the foreground. If you'd like to override this behaviour, for example, to support a snooze action then you need to follow these steps.
If the app is already in the foreground then the action will still need to be handled in the normal onNotificationOpened listener
-
Update
AndroidManifest.xml
If you would like to schedule local notifications then you also need to add the following to the application component of android/app/src/main/AndroidManifest.xml: -
Handle background actions Create a new Javascript file (for this example we'll call it
bgActions.js
) which has the following structure:// @flow;// Optional flow type;{if notificationOpenaction === 'snooze'// handle the actionreturn Promise;};This handler method must return a promise and resolve within 60 seconds.
-
Register the background handler In your main
App.js
you need to register your background handler as follows:; // <-- Import the file you created in (2)// New task registrationAppRegistry;The name
"FirebaseBackgroundNotificationAction"
is very important! -
Create your action with showUserInterface false
// Set up your listenerfirebase;// Build your notificationconst notification =androidandroid;// Build an actionconst action ='snooze''ic_launcher''My Test Action';// This is the important lineaction;// Add the action to the notificationnotificationandroid;// Display the notificationfirebase;