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 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.

Edit this page