react-native-firebase-push-notifications
v2.0.5
Published
A React native firebase push notification implementation for Android and iOS
Downloads
184
Readme
react-native-firebase-push-notifications
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:
🚧 Getting started
$ npm install react-native-firebase-push-notifications --save
or
$ yarn add react-native-firebase-push-notifications
then for iOS
$ cd ios && pod install
Mostly automatic installation
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
🔧 Android Setup
Add firebase credentials
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.
Setup Credentials
- Select your firebase android project
- Select the android icon that will open the configuration section
- Fill in the required information
- Download the
google=services.json
file. 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-android
to test if everything is working
🔧 iOS Setup
Add firebase credentials
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.
Setup Credentials
Select your firebase iOS project
Select the iOS icon that will open the configuration section
- Fill in the required information
- Download the
GoogleService-Info.plist
then, 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-ios
to confirm the app communicates with firebase (You may need to uninstall and reinstall your app.)
⚠️ Notifications will only come through on a real physical device - this is a limitation set by Apple.
⚠️ You can only recieve the messages / notifications on iOS if you have permission - ensure you request and have the permission first.
✅ Usage
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