React Native Notifications Getting Started Guide

Currently this guide is written for react-native-notifications@^3.0.0.
We also assume you use react-native@60.x.x and above.

For older versions, visit this installation guide.

Add react-native-notifications to your dependencies

With npm

$ npm install --save react-native-notifications

Or with yarn

$ yarn add react-native-notifications

Link native dependencies

iOS

$ pod install --project-directory=ios/

Start monitor notifications in AppDelegate.m:

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    [RNNotifications startMonitorNotifications]; // -> Add this line

    return YES;
}

And add the following methods to support registration to AppDelegate.m:

- (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken {
  [RNNotifications didRegisterForRemoteNotificationsWithDeviceToken:deviceToken];
}

- (void)application:(UIApplication *)application didFailToRegisterForRemoteNotificationsWithError:(NSError *)error {
  [RNNotifications didFailToRegisterForRemoteNotificationsWithError:error];
}

Android

For Android installation, please refer to the Android installation doc where you can find detailed step on how to start using Google's FCM service.

Register for notification events

import React, { Component } from 'react';
import {Notifications} from 'react-native-notifications';

class MyComponent extends Component {
  constructor() {
    Notifications.registerRemoteNotifications();

    Notifications.events().registerNotificationReceived((notification: Notification, completion) => {
      console.log(`Notification received in foreground: ${notification.title} : ${notification.body}`);
      completion({alert: false, sound: false, badge: false});
    });

    Notifications.events().registerRemoteNotificationOpened((notification: Notification, completion) => {
      console.log(`Notification opened: ${notification.payload}`);
      completion();
    });
  }
}

Next, check out the API Reference.