search

react-native-push-notification / ios

React Native Push Notification API for iOS.
MIT License
731 stars 280 forks source link
hacktoberfest ios push-notifications react-native

readme

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

Build Status Version MIT License Lean Core Badge

React Native Push Notification API for iOS.

Notification With Action With TextInput Action

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.

For React Native version 0.59 or older ### React Native <= v0.59 ```bash react-native link @react-native-community/push-notification-ios ``` - upgrading to `react-native >= 0.60` First, unlink the library. Then follow the instructions above. ```bash 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](./docs/manual-linking.md).

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:

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:

scheduleLocalNotification()

PushNotificationIOS.scheduleLocalNotification(details);

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

Parameters:

Name Type Required Description
details object Yes See below.

details is an object containing:

addNotificationRequest()

PushNotificationIOS.addNotificationRequest(request);

Sends notificationRequest to notification center at specified firedate. Fires immediately if firedate is not set.

Parameters:

Name Type Required Description
request object Yes See below.

request is an object containing:

request.repeatsComponent is an object containing (each field is optional):

For example, let’s say you want to have a notification repeating every day at 23:54, starting tomorrow, you will use something like this:

const getCorrectDate = () => {
  const date = new Date();
  date.setDate(date.getDate() + 1);
  date.setHours(23);
  date.setMinutes(54);
  return date;
};

PushNotificationIOS.addNotificationRequest({
  fireDate: getCorrectDate(),
  repeats: true,
  repeatsComponent: {
    hour: true,
    minute: true,
  },
});

If you want to repeat every time the clock reach 54 minutes (like 00:54, 01:54, and so on), just switch hour to false. Every field is used to indicate at what time the notification should be repeated, exactly like you could do on iOS.

setNotificationCategories()

PushNotificationIOS.setNotificationCategories(categories);

Sets category for the notification center. Allows you to add specific actions for notification with specific category.

Parameters:

Name Type Required Description
categories object[] Yes See below.

category is an object containing:

action is an object containing:

removePendingNotificationRequests()

PushNotificationIOS.removePendingNotificationRequests(identifiers);

Removes the specified pending notifications from Notification Center

Parameters:

Name Type Required Description
identifiers string[] Yes Array of notification identifiers.

removeAllPendingNotificationRequests()

PushNotificationIOS.removeAllPendingNotificationRequests();

Removes all pending notification requests in the notification center.

removeAllDeliveredNotifications()

PushNotificationIOS.removeAllDeliveredNotifications();

Remove all delivered notifications from Notification Center

getDeliveredNotifications()

PushNotificationIOS.getDeliveredNotifications(callback);

Provides you with a list of the app’s notifications that are still displayed in Notification Center

Parameters:

Name Type Required Description
callback function Yes Function which receive an array of delivered notifications.

A delivered notification is an object containing:

removeDeliveredNotifications()

PushNotificationIOS.removeDeliveredNotifications(identifiers);

Removes the specified delivered notifications from Notification Center

Parameters:

Name Type Required Description
identifiers string[] Yes Array of notification identifiers.

setApplicationIconBadgeNumber()

PushNotificationIOS.setApplicationIconBadgeNumber(number);

Sets the badge number for the app icon on the home screen

Parameters:

Name Type Required Description
number number Yes Badge number for the app icon.

getApplicationIconBadgeNumber()

PushNotificationIOS.getApplicationIconBadgeNumber(callback);

Gets the current badge number for the app icon on the home screen

Parameters:

Name Type Required Description
callback function Yes A function that will be passed the current badge number.

cancelLocalNotifications()

PushNotificationIOS.cancelLocalNotifications(userInfo);

Cancel local notifications.

Optionally restricts the set of canceled notifications to those notifications whose userInfo fields match the corresponding fields in the userInfo argument.

Parameters:

Name Type Required Description
userInfo object No

getScheduledLocalNotifications()

PushNotificationIOS.getScheduledLocalNotifications(callback);

Gets the local notifications that are currently scheduled.

Parameters:

Name Type Required Description
callback function Yes A function that will be passed an array of objects describing local notifications.

addEventListener()

PushNotificationIOS.addEventListener(type, handler);

Attaches a listener to remote or local notification events while the app is running in the foreground or the background.

Parameters:

Name Type Required Description
type string Yes Event type.
handler function Yes Listener.

Valid events are:

removeEventListener()

PushNotificationIOS.removeEventListener(type);

Removes the event listener. Do this in componentWillUnmount to prevent memory leaks

Parameters:

Name Type Required Description
type string Yes Event type.

requestPermissions()

PushNotificationIOS.requestPermissions([permissions]);

Requests notification permissions from iOS, prompting the user's dialog box. By default, it will request all notification permissions, but a subset of these can be requested by passing a map of requested permissions. The following permissions are supported:

critical requires special entitlement that could be requested here: https://developer.apple.com/contact/request/notifications-critical-alerts-entitlement/

If a map is provided to the method, only the permissions with truthy values will be requested.

This method returns a promise that will resolve when the user accepts, rejects, or if the permissions were previously rejected. The promise resolves to the current state of the permission.

Parameters:

Name Type Required Description
permissions array No alert, badge, sound or critical

abandonPermissions()

PushNotificationIOS.abandonPermissions();

Unregister for all remote notifications received via Apple Push Notification service.

You should call this method in rare circumstances only, such as when a new version of the app removes support for all types of remote notifications. Users can temporarily prevent apps from receiving remote notifications through the Notifications section of the Settings app. Apps unregistered through this method can always re-register.

checkPermissions()

PushNotificationIOS.checkPermissions(callback);

See what push permissions are currently enabled.

Parameters:

Name Type Required Description
callback function Yes See below.

callback will be invoked with a permissions object:

getInitialNotification()

PushNotificationIOS.getInitialNotification();

This method returns a promise. If the app was launched by a push notification, this promise resolves to an object of type PushNotificationIOS. Otherwise, it resolves to null.

constructor()

constructor(nativeNotif);

You will never need to instantiate PushNotificationIOS yourself. Listening to the notification event and invoking getInitialNotification is sufficient.

finish()

finish(fetchResult);

This method is available for remote notifications that have been received via: application:didReceiveRemoteNotification:fetchCompletionHandler: https://developer.apple.com/documentation/uikit/uiapplicationdelegate/1623013-application?language=objc

Call this to execute when the remote notification handling is complete. When calling this block, pass in the fetch result value that best describes the results of your operation. You must call this handler and should do so as soon as possible. For a list of possible values, see PushNotificationIOS.FetchResult.

If you do not call this method your background remote notifications could be throttled, to read more about it see the above documentation link.

getMessage()

getMessage();

An alias for getAlert to get the notification's main message string

getSound()

getSound();

Gets the sound string from the aps object

getCategory()

getCategory();

Gets the category string from the aps object

getAlert()

getAlert();

Gets the notification's main message from the aps object

getTitle()

getTitle();

Gets the notification's title from the aps object

getSubtitle()

getSubtitle();

Gets the notification's subtitle from the aps object

getContentAvailable()

getContentAvailable();

Gets the content-available number from the aps object

getBadgeCount()

getBadgeCount();

Gets the badge count number from the aps object

getData()

getData();

Gets the data object on the notification

getThreadID()

getThreadID();

Gets the thread ID on the notification