Skip to content

lironsher/react-native-firebase-push-notifications

 
 

Repository files navigation

react-native-firebase-push-notifications

This is kind of fork of rn-firebase/notifications

Thanks to Sacheen Dhanjie how started that fork.

Current Status

Still in development and testing. Tested only on Android

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

  1. Select your firebase android project
  2. Select the android icon that will open the configuration section
    1. Fill in the required information
    2. 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
  3. Add the google-services plugin inside yourAppsName/android
  4. (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 ... } }
  1. (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 }
  1. Finally, press 'Sync now' in the bar that appears in the IDE

  2. Update the Android Manifest

    1. 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" /> 
    1. Setup launch mode
    <activity ... android:launchMode="singleTop" > 
    1. 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> 
    1. 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> 
    1. 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> 
  3. 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

  1. Select your firebase iOS project

  2. Select the iOS icon that will open the configuration section

    1. Fill in the required information
    2. 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.
    3. Add the firebase SDK if you are not using PODS.
  3. 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; } 
  4. Follow the cert instructions here: https://firebase.google.com/docs/cloud-messaging/ios/certs

    1. Go to the firebase console
    2. select the iOS app (settings)
    3. click cloud messaging
    4. Upload the Authentication Key and fill in the detatils
  5. In Xcode, enable the following capabilities:

    1. Push Notifications
    2. Background modes > Remote notifications
  6. Add the following code to AppDelegate.m

    1. To recieve the notifications
    - (void)application:(UIApplication *)application didReceiveLocalNotification:(UILocalNotification *)notification { [[FirebasePushNotifications instance] didReceiveLocalNotification:notification]; } 
    1. 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]; } 
  7. 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 ) } 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

About

React native fire base push notifications

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • Java 50.4%
  • Objective-C 24.7%
  • JavaScript 23.8%
  • Ruby 1.1%