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#

Npm
Yarn

$ npm install --save react-native-notifications

Link native dependencies#

iOS#

$ pod install --project-directory=ios/

Add the following line at the top of your AppDelegate.m

#import "RNNotifications.h"

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];
}

- (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)userInfo fetchCompletionHandler:(void (^)(UIBackgroundFetchResult result))completionHandler {
  [RNNotifications didReceiveBackgroundNotification:userInfo withCompletionHandler:completionHandler];
}

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(props) {
    super(props);
    Notifications.registerRemoteNotifications();

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

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

Next, check out the API Reference.