@react-native-community/push-notification-ios

[![Build Status][build-badge]][build] [![Version][version-badge]][package] [![MIT License][license-badge]][license] [![Lean Core Badge][lean-core-badge]][lean-core-issue]

React Native Push Notification API for iOS.

| Notification | With Action | With TextInput Action | | ----------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | | <img src="https://user-images.githubusercontent.com/6936373/97115527-77c6ee80-173a-11eb-8440-049590a25f31.jpeg" width="320"/> | <img src="https://user-images.githubusercontent.com/6936373/97115526-772e5800-173a-11eb-8b51-c5263bced07a.jpeg" width="320"/> | <img src="https://user-images.githubusercontent.com/6936373/97115522-74cbfe00-173a-11eb-9644-fc1d5e634d6b.jpeg" width="320"/> |

Getting started

Install

Using npm:

npm i @react-native-community/push-notification-ios --save

or using Yarn:

yarn add @react-native-community/push-notification-ios

Link

React Native v0.60+

The package is automatically linked when building the app. All you need to do is:

npx pod-install

For android, the package will be linked automatically on build.

<details> <summary>For React Native version 0.59 or older</summary>

React Native <= v0.59

react-native link @react-native-community/push-notification-ios

• upgrading to react-native >= 0.60

First, unlink the library. Then follow the instructions above.

react-native unlink @react-native-community/push-notification-ios

• manual linking

If you don't want to use the methods above, you can always link the library manually.

</details>

Add Capabilities : Background Mode - Remote Notifications

Go into your MyReactProject/ios dir and open MyProject.xcworkspace workspace. Select the top project "MyProject" and select the "Signing & Capabilities" tab. Add a 2 new Capabilities using "+" button:

• Background Mode capability and tick Remote Notifications.
• Push Notifications capability

Augment AppDelegate

Finally, to enable support for notification and register events you need to augment your AppDelegate.

Update AppDelegate.h

At the top of the file:

#import <UserNotifications/UNUserNotificationCenter.h>

Then, add the 'UNUserNotificationCenterDelegate' to protocols:

For RN v0.71 and above

@interface AppDelegate : RCTAppDelegate <UNUserNotificationCenterDelegate>

For RN v0.70 and below

@interface AppDelegate : UIResponder <UIApplicationDelegate, RCTBridgeDelegate, UNUserNotificationCenterDelegate>

Update AppDelegate.m or AppDelegate.mm

At the top of the file:

#import <UserNotifications/UserNotifications.h>
#import <RNCPushNotificationIOS.h>

Then, in your AppDelegate implementation, add the following:

// Required for the register event.
- (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken
{
 [RNCPushNotificationIOS didRegisterForRemoteNotificationsWithDeviceToken:deviceToken];
}
// Required for the notification event. You must call the completion handler after handling the remote notification.
- (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)userInfo
fetchCompletionHandler:(void (^)(UIBackgroundFetchResult))completionHandler
{
  [RNCPushNotificationIOS didReceiveRemoteNotification:userInfo fetchCompletionHandler:completionHandler];
}
// Required for the registrationError event.
- (void)application:(UIApplication *)application didFailToRegisterForRemoteNotificationsWithError:(NSError *)error
{
 [RNCPushNotificationIOS didFailToRegisterForRemoteNotificationsWithError:error];
}
// Required for localNotification event
- (void)userNotificationCenter:(UNUserNotificationCenter *)center
didReceiveNotificationResponse:(UNNotificationResponse *)response
         withCompletionHandler:(void (^)(void))completionHandler
{
  [RNCPushNotificationIOS didReceiveNotificationResponse:response];
}

And then add the following lines:

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  ...
  // Define UNUserNotificationCenter
  UNUserNotificationCenter *center = [UNUserNotificationCenter currentNotificationCenter];
  center.delegate = self;

  return YES;
}

//Called when a notification is delivered to a foreground app.
-(void)userNotificationCenter:(UNUserNotificationCenter *)center willPresentNotification:(UNNotification *)notification withCompletionHandler:(void (^)(UNNotificationPresentationOptions options))completionHandler
{
  completionHandler(UNNotificationPresentationOptionSound | UNNotificationPresentationOptionAlert | UNNotificationPresentationOptionBadge);
}

Migrating from the core react-native module

This module was created when the PushNotificationIOS was split out from the core of React Native. To migrate to this module you need to follow the installation instructions above and then change you imports from:

import {PushNotificationIOS} from 'react-native';

to:

import PushNotificationIOS from '@react-native-community/push-notification-ios';

How to determine push notification user click

Receiving remote pushes has two common cases: user dismissed notification and user clicked notification. To have separate logic for each case you can use notification.getData().userInteraction to determine push notification user click:

export const App = () => {
  const [permissions, setPermissions] = useState({});

  useEffect(() => {
    const type = 'notification';
    PushNotificationIOS.addEventListener(type, onRemoteNotification);
    return () => {
      PushNotificationIOS.removeEventListener(type);
    };
  });

  const onRemoteNotification = (notification) => {
    const isClicked = notification.getData().userInteraction === 1;

    if (isClicked) {
      // Navigate user to another screen
    } else {
      // Do something else with push notification
    }
    // Use the appropriate result based on what you needed to do for this notification
    const result = PushNotificationIOS.FetchResult.NoData;
    notification.finish(result);
  };
};

How to perform different action based on user selected action.

export const App = () => {
  const [permissions, setPermissions] = useState({});

  /**
   * By calling this function, notification with category `userAction` will have action buttons
   */
  const setNotificationCategories = () => {
    PushNotificationIOS.setNotificationCategories([
      {
        id: 'userAction',
        actions: [
          {id: 'open', title: 'Open', options: {foreground: true}},
          {
            id: 'ignore',
            title: 'Desruptive',
            options: {foreground: true, destructive: true},
          },
          {
            id: 'text',
            title: 'Text Input',
            options: {foreground: true},
            textInput: {buttonTitle: 'Send'},
          },
        ],
      },
    ]);
  };

  useEffect(() => {
    const type = 'notification';
    PushNotificationIOS.addEventListener(type, onRemoteNotification);
    return () => {
      PushNotificationIOS.removeEventListener(type);
    };
  });

  const onRemoteNotification = (notification) => {
    const actionIdentifier = notification.getActionIdentifier();

    if (actionIdentifier === 'open') {
      // Perform action based on open action
    }

    if (actionIdentifier === 'text') {
      // Text that of user input.
      const userText = notification.getUserText();
      // Perform action based on textinput action
    }
    // Use the appropriate result based on what you needed to do for this notification
    const result = PushNotificationIOS.FetchResult.NoData;
    notification.finish(result);
  };
};

How to receive rich notification in remote

Follow this article to create rich notification of your own

Reference

Methods

presentLocalNotification()

PushNotificationIOS.presentLocalNotification(details);

Deprecated - use addNotificationRequest instead. Schedules the localNotification for immediate presentation.

Parameters:

| Name | Type | Required | Description | | ------- | ------ | -------- | ----------- | | details | object | Yes | See below. |

details is an object containing:

• alertBody : The message displayed in the notification alert.
• alertAction : The "action" displayed beneath an actionable notification. Defaults to "view". Note that Apple no longer shows this in iOS 10 +
• alertTitle : The text displayed as the title of the notification alert.
• soundName : The sound played when the notification is fired (optional).
• isSilent : If true, the notification will appear without sound (optional).
• category : The category of this notification, required for actionable notifications (optional).
• userInfo : An object containing additional notification data (optional).
• applicationIconBadgeNumber The number to display as the app's icon badge. The defaul