This project is allows you to recieve remote push notifications for iOS and Android. There is support for local notifications and messaging channel's which will be updated periodically .
❗ This is a work in progress, the remote notifications work and has been done as priority, the rest will follow periodically.
Version 1 now uses the version 7.* of the firebase SDK.
To get started follow the instructions below:
$ 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
)
}
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