Guide to React Native Push Notifications: How To Create and Send

Push notifications offer a direct line of communication to your customers. You no longer have to rely on broad advertising to reach your core customers and there are many benefits to be gained by implementing a comprehensive push notification strategy.

For example, when properly implemented, you can increase engagement, convert more users, and increase sales.

React-native is an open-source web framework created by Facebook (now Meta Platforms.) The framework was released in 2015 and Meta has been supporting its development for the open-source framework for the past 7 years. React-native is capable of building native UI for a wide range of platforms which include:

• Android
• iOS
• iPadOS
• MacOS
• tvOS
• Web
• Windows
• Android TV
• Universal Windows Platform (UWP)

The universality of the framework makes it a darling for front-end developers, with the result that react-native is now being used in most popular applications across the world.

Push Notifications in React-native

One of the many benefits of the React-native web framework is its support of push notifications. Push notifications can be implemented with react-native in two different ways:

1. Remote: Here the push notifications are generated from a remote server that is away from the client application. Client applications reside on the device users are logged into and the push notifications are generated from the application server and pushed to the client app.
2. Local: The application generates push notifications without any intimation from a remote server. This means push notifications can be delivered to users even without internet access.

React-native supports both remote and local push notifications. Remote push notifications are implemented by services like Firebase Cloud Messaging (FCM). We discussed how to implement remote push notifications in react-native with FCM in detail in an earlier article. In this article, we will focus on implementing local push notifications in the react-native web framework.

Local Push Notifications

Notifee is a completely open-source react-native library for feature-rich local notifications. This library can be used to build local notification capabilities for your react-native application and supports both Android and iOS development environments. Some other popular libraries that can be used to implement local notifications are:

• React Native Push Notifications
• React Native Notifications

This article will only cover Notifee. Notifee has support for

• React-native v60.0 and higher
• Android 4.4 (API 20) and higher
• iOS 10.0 and higher

You will also need Xcode 12.4 or higher for implementing push notifications for iOS applications. The library also supports projects using TypeScript with react-native.

(In addition to reading this article, be sure to also check out the documentation for both Notifee and React-Native online.)

Installation

To use the library you need to install the library at the root of your project. If you use npm, use the following command.

npm install --save @notifee/react-native

To install with Yarn, use the following command.

yarn add @notifee/react-native

The library is bundled as an Android AAR file and is distributed in a local maven repository for Android integration. Add the repository to android/build.gradle build file. Edit the build file and add the following code to allprojects repositories section.

allprojects {
  // other items
  repositories {
    // existing local repositories defined
    // ADD THIS BLOCK
    maven {
      url "$rootDir/../node_modules/@notifee/react-native/android/libs"
    }
  }
}

Auto-link the notifee library with the following steps by rebuilding the projects. For Android applications, use the following command:

npx react-native run-android

For iOS applications, use the following commands:

cd ios
pod install --repo-update
npx react-native run-ios

With the Notifee library, you also get an Expo plug-in. Expo is a platform for universal React-native applications. With Expo, you can create applications that work seamlessly across various platforms like Android, iOS, and the web. Using Expo is not at all necessary to work with Notifee, but it can be beneficial.

You can use the following command to add Notifee to your Expo managed project.

expo install @notifee/react-native

Import Library

To interact with and use the Notifee API, you need to import the library to your React-native project. This is achieved by using the following command:

import notifee from '@notifee/react-native';

Display Notification

The two basic elements required to display a push notification are the title and the body. The notifications can be linked to various trigger events during the use of the application, such as displaying a notification when a button is tapped. The basic view for a React-native button is given below.

import React from 'react';
import { View, Button } from 'react-native';
import notifee from '@notifee/react-native';

function Screen() {
  return (
    <View>
      <Button title="Push Notification on Press" onPress={() => {}} />
    </View>
  );
}

When the button is pressed the push notification has to appear. The push notification can be displayed with the function notifee.displayNotification in the following code snippet.

For Android applications, you also need to create a Channel to display notifications. Channels are the way by which users control how notifications are displayed for Android applications.

Channels are created with the function createChannel. The following code snippet integrates all the functionalities required to display notification when react-native button is pressed.

function Screen() {
  async function onDisplayNotification() {
    const channelId = await notifee.createChannel({
      id: 'default',
      name: 'Default Channel',
    });
    await notifee.displayNotification({
      title: 'Notification Title',
      body: 'Body of the notification',
      android: {
        channelId,
        smallIcon: 'small-icon',
      },
    });
  }
  return (
    <View>
      <Button title="Display Notification" onPress={() => onDisplayNotification()} />
    </View>
  );
}

The requestPermission function is necessary for iOS applications, and you can learn more about iOS permissions in this article. The displayNotification function has the content for the notification. The channelId is also passed to the displayNotification function to assign the notification to the channel.

The createChannel function will not have any impact on the iOS platform and will not cause any errors for the iOS application.

Update Notification

Once a push notification is created, it is displayed in the notification center of the device and will remain there until the user interacts with it. You can modify any notification that has already been pushed but which the user has not yet interacted with.

This can be done by using the unique ID assigned to the notification when it was created. You can also explicitly provide a notification ID by passing a number along with id as a parameter for the displayNotification function. The notification can then be updated by running the following code snippet:

await notifee.displayNotification({
  id: '999', //This has to be the same as the id created when the first notification was created
  title: 'Updated Notification Title',
  body: 'Updated body content of the notification',
  android: {
    channelId,
  },
});

Cancel Notification

Just like you can update the content of a notification, you can also cancel the notification. Canceled notifications are removed from the notification center of the device and the user will not be able to access it. Run the following code snippet to cancel notifications with notificationId.

async function cancel(notificationId) {
  await notifee.cancelNotification(notificationId);
}

Events

Displaying relevant notifications according to user actions is incredibly powerful. You can use React-native to deliver notifications according to various app-based events and device events. Some of the common events that happen while the user interacts with applications are changing the app screen and tapping buttons.

Notifee can be used to listen for various events. There are two types of events: foreground events and background events. Foreground events happen when the device is unlocked and your application is running and in view. All other events are in the background.

Foreground Events

To listen to foreground events, you can use the useEffect webhook of React-native along with the onForegroundEvent method. The following code snippet is an example of how it can be used.

import { useEffect } from "react";
import notifee, { EventType } from "@notifee/react-native";

function App() {
  useEffect(() => {
    return notifee.onForegroundEvent(({ type, detail }) => {
      switch (type) {
        case EventType.DISMISSED:
          console.log("Notification dismissed by user", detail.notification);
          break;
        case EventType.PRESS:
          console.log("Notification clicked by user", detail.notification);
          break;
      }
    });
  }, []);
}

In this example, the two events listed are:

• User dismissing notification
• User clicking notification

The function unsubscribe(); can be used to unsubscribe from listening to future events.

Background Events

Background events do not have any context with React as the application is not in view and need not be running. The onBackgroundEvent is used to callback functions when background events are detected. The following code snippet is an example of listening to background events.

import { AppRegistry } from "react-native";
import notifee, { EventType } from "@notifee/react-native";
import App from "./App";

notifee.onBackgroundEvent(async ({ type, detail }) => {
  const { notification, pressAction } = detail;
  if (type === EventType.ACTION_PRESS && pressAction.id === "mark-as-read") {
    await fetch(`https://my-api.com/chat/${notification.data.chatId}/read`, {
      method: "POST",
    });
    await notifee.cancelNotification(notification.id);
  }
});
AppRegistry.registerComponent("app", () => App);

The above snippet listens to whether the user has tapped 'Mark all notifications as read'. If that is tapped, there is no use for the notification and the notification is canceled by the cancelNotification method.

App Open Events

A/B tests can be done to determine the efficacy of various notifications. For that you need to know which notification prompted the user to open the application. The getInitialNotification method can be used to listen to:

• When application was opened
• What notification prompted the user
• The method used to open the application

import React, { useState, useEffect } from "react";
import notifee from "@notifee/react-native";

function App() {
  const [loading, setLoading] = useState(true);
  async function bootstrap() {
    const initialNotification = await notifee.getInitialNotification();
    if (initialNotification) {
      console.log(
        "This notification caused application to open",
        initialNotification.notification
      );
      console.log(
        "Notification press action was used to open the app",
        initialNotification.pressAction
      );
    }
  }
  useEffect(() => {
    bootstrap()
      .then(() => setLoading(false))
      .catch(console.error);
  }, []);
  if (loading) {
    return null;
  }
}

The code snippet above listens to which notification caused the user to open the application and how the application was opened by the user. This information is valuable to perform analytics that support increasing user engagement.

Triggers

Triggers are events that can be used to create and push new notifications. There are a wide variety of ways triggers can be used in applications. For example, a trigger can be set up to send a notification everyday at a certain time. Another trigger can be when a user moves to another location, or joins a new Wi-Fi network. Triggers can be used to enhance the functionality of your application.

The following snippet is an example of how triggers can be incorporated to send push notifications from your React-native application.

import React from "react";
import { View, Button } from "react-native";
import notifee, { TimestampTrigger, TriggerType } from "@notifee/react-native";

function Screen() {
  async function onCreateTriggerNotification() {
    const date = new Date(Date.now());
    date.setHours(10);
    date.setMinutes(10);
    const trigger: TimestampTrigger = {
      type: TriggerType.TIMESTAMP,
      timestamp: date.getTime(),
    };
    await notifee.createTriggerNotification(
      {
        title: "Notification at 10.10 am",
        body: "Notification body",
        android: {
          channelId: "your-channel-id",
        },
      },
      trigger
    );
  }
  return (
    <View>
      <Button
        title="Create Trigger Notification"
        onPress={() => onCreateTriggerNotification()}
      />
    </View>
  );
}

The code snippet creates a trigger notification when the button with the title 'Create Trigger Notification' is tapped. The trigger is to send a notification at 10:10 am. Once the trigger is created, the method listens to the background event to check whether the time is 10:10 am. Once the time is 10:10 am, the notification is sent to the user's device.

You can update and cancel trigger notifications using the method discussed earlier in this article. You can also fetch all the trigger notifications that are currently active. This is done with the following method and returns the notification ids of all trigger notifications.

notifee.getTriggerNotificationIds()
  .then(ids => console.log('All trigger notification with their ids: ', ids));

The two most common types of triggers used are:

• Timestamp trigger: This type of trigger allows you to send notifications at a specified time.
• Interval trigger: This type of trigger can be used to send repeated notifications at fixed time intervals.

Debugging

Android applications have native logs that can be accessed by developers. To enable native logs, use the following command:

adb shell setprop log.tag.NOTIFEE DEBUG

To view the logs in the terminal, use the following command:

adb logcat '*:S' NOTIFEE:D

It is recommended to wrap the displayNotification and createTriggerNotification methods in try/catch error handling statements to catch any errors. An example is given in the following code snippet:

try {
  await notifee.displayNotification({
    title: "Notification title",
    body: "Notification body",
  });
} catch (e) {
  console.log(e);
}

Conclusion

React-native is a powerful UI framework that has consistent support from one of the largest technology organizations, Meta Platforms. The framework supports both remote and local push notifications.

This article covered one of the libraries that can be used to create local push notifications. You can also integrate the code for local push notifications with remote push notifications for more effective messaging to the user. The full MagicBell library about React Notifications can be found here.

Related articles:

• Web Push Notifications - All You Need to Know
• Mobile Push Notifications - A Lifeblood of Modern Apps