Local, Scheduled Push Notifications in React Native App with Firebase
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.
With remote notifications, we should use one of our company servers to push data to user devices via any notification service.
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.
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
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.
After getting permission from the user we will create listeners for listen notification.
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.
Build channel in android accepts three parameters
Now, we’ll add
buildNotification() method which will build a notification when a notification is received:
Let’s create one function that displays notifications when a notification arrives.
Whenever we open a notification and displays a notification after that we need to remove delivered notification so, we create.
The Purpose of this tutorial is to schedule notification so, Let’s create
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
Let’s write below code into
componentDidMount() we have register our fcmservice and link listener callback function we have link three function
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
At BoTree Technologies, we build enterprise applications with our ReactNative team of 10+ engineers.
We also specialize in Ruby on Rails, Python, RPA, AI, Django, NodeJS and ReactJS.
Consulting is free – let us help you grow!
Choose Your Language
- Digital Marketing
- IT Consulting
- Project Management