@notifee/react-native NPM

A feature rich Android & iOS notifications library for React Native.

Installation

yarn add @notifee/react-native

Documentation

Android

The APIs for Android allow for creating rich, styled and highly interactive notifications. Below you'll find guides that cover the supported Android features.

Topic
Appearance	Change the appearance of a notification; icons, colors, visibility etc.
Behaviour	Customize how a notification behaves when it is delivered to a device; sound, vibration, lights etc.
Channels & Groups	Organize your notifications into channels & groups to allow users to control how notifications are handled on their device
Foreground Service	Long running background tasks can take advantage of a Android Foreground Services to display an on-going, prominent notification.
Grouping & Sorting	Group and sort related notifications in a single notification pane.
Interaction	Allow users to interact with your application directly from the notification with actions.
Progress Indicators	Show users a progress indicator of an on-going background task, and learn how to keep it updated.
Styles	Style notifications to show richer content, such as expandable images/text, or message conversations.
Timers	Display counting timers on your notification, useful for on-going tasks such as a phone call, or event time remaining.

iOS

Below you'll find guides that cover the supported iOS features.

Topic
Appearance	Change now the notification is displayed to your users.
Behaviour	Control how notifications behave when they are displayed to a device; sound, crtitial alerts etc.
Categories	Create & assign categories to notifications.
Interaction	Handle user interaction with your notifications.
Permissions	Request permission from your application users to display notifications.

Jest Testing

To run jest tests after integrating this module, you will need to mock out the native parts of Notifee or you will get an error that looks like:

 ● Test suite failed to run

    Notifee native module not found.

      59 |     this._nativeModule = NativeModules[this._moduleConfig.nativeModuleName];
      60 |     if (this._nativeModule == null) {
    > 61 |       throw new Error('Notifee native module not found.');
         |             ^
      62 |     }
      63 |
      64 |     return this._nativeModule;

Add this to a setup file in your project e.g. jest.setup.js:

If you don't already have a Jest setup file configured, please add the following to your Jest configuration file and create the new jest.setup.js file in project root:

setupFiles: ['<rootDir>/jest.setup.js'],

You can then add the following line to that setup file to mock notifee:

jest.mock('@notifee/react-native', () => require('@notifee/react-native/jest-mock'))

You will also need to add @notifee to transformIgnorePatterns in your config file (jest.config.js):

transformIgnorePatterns: [
    'node_modules/(?!(jest-)?react-native|@react-native|@notifee)'
]

Detox Testing

To utilise Detox's functionality to mock a local notification and trigger notifee's event handlers, you will need a payload with a key __notifee_notification:

{
  title: 'test',
  body: 'Body',
  payload: {
    __notifee_notification: {
      ios: {
        foregroundPresentationOptions: {
          banner: true,
          list: true,
        },
      },
      data: {}
    },
  },
}

The important part is to make sure you have a __notifee_notification object under payload with the default properties.