react-native-notifications/docs/getting-started.md

id, title, sidebar_label

id	title	sidebar_label
getting-started	React Native Notifications Getting Started Guide	Getting Started

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

$ 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().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.