This is kind of fork of rn-firebase/notifications
Thanks to Sacheen Dhanjie how started that fork.
Still in development and testing. Tested only on Android
$ npm install react-native-firebase-push-notifications --save
or
$ yarn add react-native-firebase-push-notifications
then for iOS
$ cd ios && pod install
Do this if you are not on react-native 0.59 or less, there will not be much support for manual integration.
$ react-native link react-native-firebase-push-notifications
The Firebase console provides a google-services.json file containing a set of credentials for Android devices to use when authenticating with your Firebase project.
- Select your firebase android project
- Select the android icon that will open the configuration section
- Fill in the required information
- Download the
google=services.jsonfile. Then Switch to the Project view in Android Studio to see your project root directory. Move the google-services.json file that you just downloaded into your Android app module root directory. eg./yourAppsName/android/app
- Add the google-services plugin inside
yourAppsName/android - (Miss it if already have firebase)
repositories { // Check that you have the following line (if not, add it): google() // Google's Maven repository } dependencies { ... // Add this line classpath 'com.google.gms:google-services:4.3.3' } allprojects { ... repositories { // Check that you have the following line (if not, add it): google() // Google's Maven repository ... } }- (Miss it if already have firebase) App-level build.gradle (//build.gradle):
apply plugin: 'com.android.application' // Add this line apply plugin: 'com.google.gms.google-services' dependencies { // add the Firebase SDK for Google Analytics implementation 'com.google.firebase:firebase-analytics:17.2.2' // add SDKs for any other desired Firebase products // https://firebase.google.com/docs/android/setup#available-libraries }-
Finally, press 'Sync now' in the bar that appears in the IDE
-
Update the Android Manifest
- add the permissions
<manifest ...> <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED" /> <uses-permission android:name="android.permission.VIBRATE" />- Setup launch mode
<activity ... android:launchMode="singleTop" >- icon & color (optional) https://github.com/firebase/quickstart-android/tree/master/messaging#custom-default-icon If conflicts with existed firebase package, remove this lines, because they already exists.
<application ...> <meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="@drawable/ic_stat_ic_notification" /> <meta-data android:name="com.google.firebase.messaging.default_notification_color" android:resource="@color/colorAccent" /> </application>- Notification channels (Optional) - Work in progress If conflicts with existed firebase package, remove this lines, because they already exists.
<application ...> <meta-data android:name="com.google.firebase.messaging.default_notification_channel_id" android:value="@string/default_notification_channel_id"/> </application>- Scheduled Notifications (Optional) - Work in progress
<application ...> <receiver android:name="com.afrihost.firebase.notifications.RNFirebaseNotificationReceiver"/> <receiver android:enabled="true" android:exported="true" android:name="com.afrihost.firebase.notifications.RNFirebaseNotificationsRebootReceiver"> <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> -
Run
$ npx react-native run-androidto test if everything is working
The Firebase console provides a GoogleService-Info.plist file containing a set of credentials for iOS devices to use when authenticating with your Firebase project.
-
Select your firebase iOS project
-
Select the iOS icon that will open the configuration section
- Fill in the required information
- Download the
GoogleService-Info.plistthen, Move the GoogleService-Info.plist file that you just downloaded into the root of your Xcode project and add it to all targets. - Add the firebase SDK if you are not using PODS.
-
Add the following in AppDelegate
#import "AppDelegate.h" .... #import "Firebase.h" <--- Add this #import "RNFirebaseMessaging.h" <--- Add this #import "FirebasePushNotifications.h" <--- Add this @implementation AppDelegate - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { [FIRApp configure]; <--Add this [FirebasePushNotifications configure]; <--Add this .......... .......... return YES; } -
Follow the cert instructions here: https://firebase.google.com/docs/cloud-messaging/ios/certs
- Go to the firebase console
- select the iOS app (settings)
- click cloud messaging
- Upload the Authentication Key and fill in the detatils
-
In Xcode, enable the following capabilities:
- Push Notifications
- Background modes > Remote notifications
-
Add the following code to
AppDelegate.m- To recieve the notifications
- (void)application:(UIApplication *)application didReceiveLocalNotification:(UILocalNotification *)notification { [[FirebasePushNotifications instance] didReceiveLocalNotification:notification]; }- optional for remote notifications
#import "RNFirebaseMessaging.h" ..... ..... - (void)application:(UIApplication *)application didReceiveRemoteNotification:(nonnull NSDictionary *)userInfo fetchCompletionHandler:(nonnull void (^)(UIBackgroundFetchResult))completionHandler{ [[FirebasePushNotifications instance] didReceiveRemoteNotification:userInfo fetchCompletionHandler:completionHandler]; } - (void)application:(UIApplication *)application didRegisterUserNotificationSettings:(UIUserNotificationSettings *)notificationSettings { [[RNFirebaseMessaging instance] didRegisterUserNotificationSettings:notificationSettings]; } -
Run
$ npx react-native run-iosto confirm the app communicates with firebase (You may need to uninstall and reinstall your app.)
import { notifications, NotificationMessage, Android } from 'react-native-firebase-push-notifications' getToken = async () => { //get the messeging token const token = await notifications.getToken() //you can also call messages.getToken() (does the same thing) return token } getInitialNotification = async () => { //get the initial token (triggered when app opens from a closed state) const notification = await notifications.getInitialNotification() console.log("getInitialNotification", notification) return notification } onNotificationOpenedListener = () => { //remember to remove the listener on un mount //this gets triggered when the application is in the background this.removeOnNotificationOpened = notifications.onNotificationOpened( notification => { console.log("onNotificationOpened", notification) //do something with the notification } ) } onNotificationListener = () => { //remember to remove the listener on un mount //this gets triggered when the application is in the forground/runnning //for android make sure you manifest is setup - else this wont work //Android will not have any info set on the notification properties (title, subtitle, etc..), but _data will still contain information this.removeOnNotification = notifications.onNotification(notification => { //do something with the notification console.log("onNotification", notification) }) } onTokenRefreshListener = () => { //remember to remove the listener on un mount //this gets triggered when a new token is generated for the user this.removeonTokenRefresh = messages.onTokenRefresh(token => { //do something with the new token }) } setBadge = async number => { //only works on iOS and some Android Devices return await notifications.setBadge(number) } getBadge = async () => { //only works on iOS and some Android Devices return await notifications.getBadge() } hasPermission = async () => { //only works on iOS return await notifications.hasPermission() //or return await messages.hasPermission() } requestPermission = async () => { //only works on iOS return await notifications.requestPermission() //or return await messages.requestPermission() } localNotification = async () => { //required for Android const channel = new Android.Channel( "test-channel", "Test Channel", Android.Importance.Max ).setDescription("My apps test channel") // for android create the channel notifications.android().createChannel(channel) await notifications.displayNotification( new NotificationMessage() .setNotificationId("notification-id") .setTitle("Notification title") .setBody("Notification body") .setData({ key1: "key1", key2: "key2", }) .android.setChannelId("test-channel") //required for android ) } notifications.scheduleNotification(notification, { fireDate: date.getTime(), }); const list = await notifications.getScheduledNotifications(); console.log(list); notifications.cancelNotification(`notificationId`); componentWillUnmount() { //remove the listener on unmount if (this.removeOnNotificationOpened) { this.removeOnNotificationOpened() } if (this.removeOnNotification) { this.removeOnNotification() } if (this.removeonTokenRefresh) { this.removeonTokenRefresh() } }Check out the sample app https://github.com/afrihost/firebasePushTest