npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

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

  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
  )
}


    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