Use firebase to schedule a local push notification

Vikrant Negi
Jul 2 · 5 min read
Photo by Jamie Street on Unsplash

With ever increasing app usage, app developers keep trying to find new ways to keep their users engaged. Push notifications are one way to keep your users engaged and informed.

Push notifications are the communications channel used by apps to drive user re-engagement and retention. Push notification technology has come a long way, from being a single messages delivery system to a rich and interactive medium.

There are two types of notifications: remote and local.

Remote Notifications

With remote notifications, you use one of your company’s servers to push data to user devices via the Apple Push Notification service or FCM.

Local Notifications

Both Android and IOS support the ability to trigger notifications from your application locally. These can either be displayed immediately, or scheduled to be displayed at a later date.

In this article we will be using the local notifications feature to send a daily reminder to the user at a particular time.

Prerequisites

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

To implement push notifications in React Native application, we are going to use the react-native-firebase.

React Native Firebase has Notifications module that supports for both remote (FCM) and local notifications.

To make sure we are on the same page, the following are the versions used in this tutorial:

  • Node v10.15.0
  • npm 6.4.1
  • yarn 1.16.0
  • react-native 0.59.9
  • react-native-firebase 5.2.3

Getting Started

To create a new project using react-native-cli, type the following in the terminal:

$ react-native init localReminders$ cd localReminders

Install React Native Firebase

Install react-native-firebase by following installation instructions here.

Make sure you have completed both iOS and Android setup.

Install modules

React Native Firebase only provides your application with access to Core features.

To get user notifications in our react native app, we have to install the Cloud Messaging and Notifications modules.

  • Install Cloud Messaging by the following instructions here.
  • Install Notifications by the following instructions here.

Again, make sure you followed the steps for both iOS and Android

Initial code setup

In your App.js file add these imports:

import React, { Component } from "react";import { Alert } from "react-native";import firebase from "react-native-firebase";import Dashboard from "./src/Dashboard";

Create an empty Dashboard.js file in your src folder. We’ll fill this with code later in the tutorial.

Now create a class component called App as follows:

We’ve created a few helper methods in this class component that we called on componentDidMount lifecycle method. In render, we’ll return the Dashboard component.

Let’s review and add code to these methods to see what they do and why we need them.

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 Firebase to work seamlessly across all versions of Android, you will need to create a channel before you can display a notification. This block of code can be re-run multiple times, so it is safe to do it each time your application starts.

To create this notification channel we created a custom helper method createNotificationChannel(). Update it with the following:

Android channel accepts three parameters channelId, name and importance.

For full reference documentation, please see AndroidChannel and AndroidNotifications.

Notification Permission and Listener

Before we can send any notification we need to make sure we have the notification permission and then, when we have that permission, we can add a notification listener. This notification listener will listen for any notification and return notification when received.

Update your checkPermission() method with the following:

When the notification listener receives a notification, we call displayNotification() method with the notification received, which will display the notification.

We can now receive and show the notification. Now it’s time to schedule a local notification that will fire at some point in the future.

Dashboard Screen

We are going to create a Dashboard screen. This will have a switch to enable and disable notifications and a time picker to set time to receive notifications. It will look something like this:

Notification Setting Screen

To make this UI Screen we’ll add few third party helper libraries.

  1. react-native-elements — UI component library
  2. moment — Handling Date Object
  3. react-native-modal-datetime-picker — A React-Native datetime-picker for Android and iOS

Let’s start with adding the required imports:

Now we want to set a reminder as soon as the user lands on the dashboard, so we’ll create and call a setReminder() method on componentDidMount() lifecycle method:

In setReminder() method, first we’ll make use of notificationTime and enableNotification state.

If enableNotification is true we schedule the notification using scheduleNotfication method.

The scheduleNotification() has two parameters, notification and schedule.

For notification we call another custom method, buildNotification(), which will return notification and in schedule we’ll pass an object with fireDate, repeatInterval and exact keys.

The fireDate is the date when the notification should first be shown, in milliseconds. For repeatInterval we’ll use day, as we want the notification to be shown every day. The exact option is Android only and it denotes whether the fireDate should be respected exactly, i.e. for reminders, or if it can deviate slightly to save battery.

In else we’ll just return false.

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

Let’s add some helper method for the notification switch and time picker. These will be used by their respective components to set local states, which will later be used:

Finally, the render(), which we’ll return the UI of the dashboard:

Time to sprinkle in some styles to make the UI more appealing.

That’s it. We are done with development. In the next section, we’ll test it out in an iOS simulator.

Running the App

Test the app by enabling notification and setting time 1 min in the future.

Note: Sometimes the notification may not show at the exact time. Please wait a whole minute for notification to appear.

We can now schedule daily local push notifications in our React Native app for both iOS and Android.

Apart from firebase, there are other libraries you can use to implement local push notifications, like react-native-push-notification.

Conclusion

We’ve successfully created a basic app that can schedule local push notification via firebase.

Find the source code in the Github repo here.

Better Programming

Advice for programmers.

Vikrant Negi

Written by

Front-end & React Native Developer. Pro-Castinator. Pseudo-Nerd.

Better Programming

Advice for programmers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade