Advanced Notifications in React Native with Notifee

React Native Notifee Mobile Dev

Introduction

In order to bring notifications to the next level, we need a powerful tool in React Native. Notifee handles notifications for the most part in both iOS and Android with very similar code.

Setting Up the Project

We need to create the project using the CLI and not Expo!

hugo@debian: ~/NotifeeArticle bash

hugo@debian:~/NotifeeArticle$npx @react-native-community/cli@latest init NotifeeDemonstration

Run the following command to install the Notifee package:

hugo@debian: ~/NotifeeArticle bash

hugo@debian:~/NotifeeArticle$npm install --save @notifee/react-native

Change directory into the project folder:

hugo@debian: ~/NotifeeArticle bash

hugo@debian:~/NotifeeArticle$cd NotifeeDemonstration

This is the starter code. It is a button with a basic "Hello World" setup. We've already included the Notifee imports. Remove App.tsx and create App.js with the following code:

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

// Export default so it renders
export default function Screen() {
  return (
    <View style={styles.content}>
      <SafeAreaView>
        <Button 
          title="Display Notification" 
          onPress={() => {}} 
        />
      </SafeAreaView>
    </View>
  );
}

const styles = StyleSheet.create({
  content: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

At this point, we should probably start Metro and the Android emulator

Now run the Metro server (the React Native server):

hugo@debian: ~/NotifeeArticle bash

hugo@debian:~/NotifeeArticle$npx react-native start

Followed by the iOS or Android emulator. In our case, we are using Android in a new terminal tab:

hugo@debian: ~/NotifeeArticle bash

hugo@debian:~/NotifeeArticle$npx react-native run-android

If everything went right, you should see the button on your emulator! We still need to Write the Logic of what happens when it is clicked though

Button For Android

Writing the Logic

The plan is that hitting the button calls a function named onDisplayNotification() which creates the notification.

Inside that function, we need to request permissions (primarily for iOS) and create a channel (required for Android):

when displaying the notification section it is the title of the Notification and the Body we need to worry about this point. In the android subsection the channelId is the one that was made in section 2. For the smallIcon, it is a small icon that is needed if left out the default launcher icon will be used or you can type it out by uncommenting the icon. We will go over the icon requirements later on in a future post. Lastly, PressAction is the id of when the Notification is pressed . It will be discuss in a future post

// Request permissions
await notifee.requestPermission();

// Create a channel (Android only)
const channelId = await notifee.createChannel({
  id: 'default',
  name: 'Default Channel',
});

// Display the notification
await notifee.displayNotification({
  title: 'Notification Title',
  body: 'Main body content of the notification',
  android: {
    channelId,
    pressAction: {
      id: 'default',
    },
  },
});

Now we can finalize our App.js. We've defined the onDisplayNotification function inside the component and linked it to our Button's onPress event.

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

export default function Screen() {
  // The main logic for triggering the alert
  async function onDisplayNotification() {
    // 1. Request permissions (required for iOS)
    await notifee.requestPermission();

    // 2. Create a channel (required for Android)
    const channelId = await notifee.createChannel({
      id: 'default',
      name: 'Default Channel',
    });

    // 3. Display the notification
    await notifee.displayNotification({
      title: 'Notification Title',
      body: 'Main body content of the notification',
      android: {
        channelId,
        //smallIcon: 'ic_launcher', 
        pressAction: {
          id: 'default',
        },
      },
    });
  }

  return (
    <View style={styles.content}>
      <SafeAreaView>
        <Button
          title="Display Notification"
          onPress={() => onDisplayNotification()}
        />
      </SafeAreaView>
    </View>
  );
}

const styles = StyleSheet.create({
  content: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

Here is the notification on a Andoid Phone Emulated

Android Notification Using Notifee