DEV Community: RajanTank

How to Scheduled Push Notification with Firebase in React Native

RajanTank — Mon, 18 May 2020 11:04:37 +0000

Hello folks. I hope you all are doing well.

In this tutorial, you're going to learn how to handle and schedule local push notification with firebase using react native development.
There are two types of notifications, remote and local notifications.

Remote Notifications

With remote notifications, we should use one of our company servers to push data to user devices via any notification service.

Local Notifications

In local notification, notification is scheduled and triggered by an app on a particular time and date and delivered on the same device.
In this tutorial, we will use local notification to schedule reminder.

Prerequisites

This tutorial requires basic knowledge of React Native development. To set up your development machine, follow the official guide here.

We are going to use react-native-firebase to handle push notification

Before implementing to schedule push notification, please visit this article to configure project.
After the configured project, Let's create one FCMService to handle notification

Create one folder in project directory named it as src and under the src folder create one file name as FCMService.js

Before use push notification in the app, we require the user permission to display notifications in the app. If the user denies permission it explicitly changes from the settings.

First, let's write below code in FCMService.js to get permission from the user

 checkPermission = (onRegister) => {
    firebase.messaging().hasPermission()
      .then(enabled => {
        if (enabled) {
          //user has permission
          this.getToken(onRegister)
        } else {
          //user don't have permission
          this.requestPermission(onRegister)
        }
      }).catch(error => {
        console.log("Permission rejected", error)
      })
  }

  getToken = (onRegister) => {
    firebase.messaging().getToken()
      .then(fcmToken => {
        if (fcmToken) {
          onRegister(fcmToken)
        } else {
          console.log("User does not have a device token")
        }
      }).catch(error => {
        console.log("getToken rejected ", error)
      })
  }

  requestPermission = (onRegister) => {
    firebase.messaging().requestPermission()
      .then(() => {
        this.getToken(onRegister)
      }).catch(error => {
        console.log("Requested persmission rejected ", error)
      })
  }

  deletedToken = () => {
    firebase.messaging().deleteToken()
      .catch(error => {
        console.log("Delected token error ", error)
      })
  }

After getting permission from the user we will create listeners for listen notification.

createNoitificationListeners = (onRegister, onNotification, onOpenNotification) => {

    // This listener triggered when notification has been received in foreground
    this.notificationListener = firebase.notifications().onNotification((notification) => {
      onNotification(notification)
    })

    // This listener triggered when app is in backgound and we click, tapped and opened notifiaction
    this.notificationOpenedListener = firebase.notifications()
      .onNotificationOpened((notificationOpen) => {
        console.log(notificationOpen)
        if (notificationOpen) {
          const notification = notificationOpen.notification
          onOpenNotification(notification)
          this.removeDelieveredNotification(notification)
        }
      })

    // This listener triggered when app is closed and we click,tapped and opened notification 
    firebase.notifications().getInitialNotification()
      .then(notificationOpen => {
        if (notificationOpen) {
          const notification = notificationOpen.notification
          onOpenNotification(notification)
          this.removeDelieveredNotification(notification)

        }
      })

    // Triggered for data only payload  in foreground 
    this.messageListener = firebase.messaging().onMessage((message) => {
      onNotification(message)
    })

    // This listener triggered when new token 
    this.onTokenRefreshListener = firebase.messaging().onTokenRefresh(fcmToken => {
      console.log("FCM new token: ", fcmToken)
      onRegister(fcmToken)
    })
  }

Read More: Implement Push Notification with Firebase in React Native

Create Android Notification Channel

As of Android 8.0 (API Level 26), notifications must specify a Notification Channel or they will not appear. To allow React Native App Developers for Integrating Firebase to work seamlessly across all versions of Android, we will create buildChannel() before we build notification.

buildChannel = (obj) => {
    return new firebase.notifications.Android.Channel(
      obj.channelId, obj.channelName,
      firebase.notifications.Android.Importance.High)
      .setDescription(obj.channelDes)
  }

Build channel in android accepts three parameters channelId, name and importance.

Now, we’ll add buildNotification() method which will build a notification when a notification is received:

buildNotification = (obj) => {
    console.log(obj)
    firebase.notifications().android.createChannel(obj.channel)

    const notification = new firebase.notifications.Notification()
      .setSound(obj.sound)
      .setNotificationId(obj.dataId)
      .setTitle(obj.title)
      .setBody(obj.content)
      .setData(obj.data)
      .android.setChannelId(obj.channel.channelId)
      .android.setLargeIcon(obj.largeIcon)
      .android.setSmallIcon(obj.smallIcon)
      .android.setColor(obj.colorBgIcon)
      .android.setPriority(firebase.notifications.Android.Priority.High)
      .android.setVibrate(obj.vibrate)
      .android.setAutoCancel(true)

   return notification
}

Let's create one function that displays notifications when a notification arrives.

displayNotification = (notification) => {
    firebase.notifications().displayNotification(notification)
      .catch(error => { console.log("Display Notification error", error) })
  }

Whenever we open a notification and displays a notification after that we need to remove delivered notification so, we create

removeDelieveredNotification()

removeDelieveredNotification = (notification) => {
    firebase.notifications()
      .removeDeliveredNotification(notification.notificationId)
  }

The Purpose of this tutorial is to schedule notification so, Let's create scheduleNotificaion()

  scheduleNotification = (notification, datetime) => {
    const date = new Date(datetime)
    firebase.notifications()
      .scheduleNotification(notification, { fireDate: date.getTime() })
  }

So, Final FCMService.js looks like this

Before proceeding further Please install this dependency

$ npm install react-native-elements react-native-modal-datetime-picker moment @react-native-community/datetimepicker react-native-vector-icons

So, we have created one file under src folder scheduleReminder.js
Let's write below code into scheduleReminder.js file

On componentDidMount() we have register our fcmservice and link listener callback function we have link three function onRegister(), onNotification() and onOpenNotification().

onRegister function we have got the user permission, onNotification function called when our app is opened and any notification arrives that time onNotification function creates a notification and displays the notification and onOpenNotification function called whenever you tap and open the notification.

We get time, title and description from the user to schedule a reminder, before a schedule reminder we need to create a notification object by using buildNotification() of FCMService because a FCMService's scheduleNotification() function accepts a parameter as notification object and date & time.

After configuring all things now it's time to test the app

Find the source code in the Github repo here.

Click here to read more about

Implement Push Notification with Firebase in React Native

RajanTank — Thu, 14 May 2020 05:43:19 +0000

Hello folks. I hope you all are doing well.

In this tutorial, you’re going to learn how to implement push notifications as an app feature using React Native and Firebase.

There are two main ways you can send push notifications to your app users: local and remote. Local notifications are sent from a React Native application, while remote push notifications are sent from the server or a push notification service such as Firebase Cloud Messaging Service (FCM). We will explore both approaches.

What Are Push Notifications?

Push notification is a small message that users receive on a device. They differ from regular pop-ups because they will appear on the device whether or not the user is currently using the site or app that the notification is tied to.

Push notifications work for both browsers and apps. For browsers, push notifications can show up no matter what site a user is on, as long as they’ve opted in to push notifications. They work very similarly for apps, however, they can pop up on a mobile device at any time, regardless of whether the user is on the app.

Prerequisites

This tutorial requires basic knowledge of React Native Development. To set up your development machine, follow the official guide here.

We are going to use react-native-firebase to implement push notifications in React-native.

First create a project in your Google Firebase Console https://console.firebase.google.com/

Adding Firebase to your app

Register your app in Firebase and follow the configuration steps for Android.
Download your google-services.json. Don't forget to place them in the correct folder.

Also create your React Native project and enter it's directory

$ react-native init RNPushNotification
$ cd RNPushNotification

Add and link the React Native Firebase package to your app

$ npm install react-native-firebase
$ react-native link react-native-firebase

Configuration Android project

In MainApplication.java

In build.gradle

In AndroidManifest.xml

After everything is set up and configured now, we have to implement the FCM push notification in React Native side using React Native Firebase module.

Receive Push Notifications

Now let's code the most awaited part… Receiving Notifications! 😉

Before integrating the code please install the following dependencies:

npm install @react-native-community/async-storage

Before the app can get any notifications, it is crucial to ask permission from users. If the user didn’t allow your app to receive notifications, it can never get any unless the user explicitly changes it from Settings.

So, let's have write below code in App.js file

Listening Notifications

We are now ready to listen to push notification events. Before proceeding, you should know about different types of notifications supported by Firebase.

Notification-only messages: These are display messages that are automatically handled by Firebase SDK. Notifications are thrown to the device tray.
Notification + optional data messages: These are also handled by Firebase SDK. Only difference here is when the user taps on notification, your app receives a payload associated with that notification.
Data only messages: These types of notifications are handled exclusively by app. No notification is thrown on the device tray unless the app explicitly does so.

DEV Community: RajanTank

How to Scheduled Push Notification with Firebase in React Native

Remote Notifications

Local Notifications

Prerequisites

Read More: Implement Push Notification with Firebase in React Native

Create Android Notification Channel

Click here to read more about

Implement Push Notification with Firebase in React Native

What Are Push Notifications?

Prerequisites

Adding Firebase to your app

Configuration Android project

Receive Push Notifications

Listening Notifications

Read Also: How React Native Improves Developer Productivity

Click here to read more about