The Basics

Guides

Guides (iOS)

Guides (Android)

PushNotificationIOS #

Handle push notifications for your app, including permission handling and icon badge number.

To get up and running, configure your notifications with Apple and your server-side system. To get an idea, this is the Parse guide.

Manually link the PushNotificationIOS library

Add the following to your Project: node_modules/react-native/Libraries/PushNotificationIOS/RCTPushNotification.xcodeproj
Add the following to Link Binary With Libraries: libRCTPushNotification.a
Add the following to your Header Search Paths: $(SRCROOT)/../node_modules/react-native/Libraries/PushNotificationIOS and set the search to recursive

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

At the top of your AppDelegate.m:

#import "RCTPushNotificationManager.h"

And then in your AppDelegate implementation add the following:

   // Required to register for notifications
   - (void)application:(UIApplication *)application didRegisterUserNotificationSettings:(UIUserNotificationSettings *)notificationSettings
   {
    [RCTPushNotificationManager didRegisterUserNotificationSettings:notificationSettings];
   }
   // Required for the register event.
   - (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken
   {
    [RCTPushNotificationManager 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
   {
     [RCTPushNotificationManager didReceiveRemoteNotification:userInfo fetchCompletionHandler:completionHandler];
   }
   // Required for the registrationError event.
   - (void)application:(UIApplication *)application didFailToRegisterForRemoteNotificationsWithError:(NSError *)error
   {
    [RCTPushNotificationManager didFailToRegisterForRemoteNotificationsWithError:error];
   }
   // Required for the localNotification event.
   - (void)application:(UIApplication *)application didReceiveLocalNotification:(UILocalNotification *)notification
   {
    [RCTPushNotificationManager didReceiveLocalNotification:notification];
   }

Methods #

=(NewData, NoData, ResultFailed, }, static, (, :) #

static scheduleLocalNotification(details) #

Schedules the localNotification for future presentation.

details is an object containing:

fireDate : The date and time when the system should deliver the notification.
alertBody : The message displayed in the notification alert.
alertAction : The "action" displayed beneath an actionable notification. Defaults to "view";
soundName : The sound played when the notification is fired (optional).
category : The category of this notification, required for actionable notifications (optional).
userInfo : An optional object containing additional notification data.
applicationIconBadgeNumber (optional) : The number to display as the app's icon badge. Setting the number to 0 removes the icon badge.
repeatInterval : The interval to repeat as a string. Possible values: minute, hour, day, week, month, year.

static cancelAllLocalNotifications(0) #

Cancels all scheduled localNotifications

static setApplicationIconBadgeNumber(number) #

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

static getApplicationIconBadgeNumber(callback) #

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

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

static getScheduledLocalNotifications(callback) #

Gets the local notifications that are currently scheduled.

static addEventListener(type, handler) #

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

Valid events are:

notification : Fired when a remote notification is received. The handler will be invoked with an instance of PushNotificationIOS.
localNotification : Fired when a local notification is received. The handler will be invoked with an instance of PushNotificationIOS.
register: Fired when the user registers for remote notifications. The handler will be invoked with a hex string representing the deviceToken.
registrationError: Fired when the user fails to register for remote notifications. Typically occurs when APNS is having issues, or the device is a simulator. The handler will be invoked with {message: string, code: number, details: any}.

static removeEventListener(type, handler) #

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

static 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:

alert
badge
sound

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.

static abandonPermissions(0) #

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.

static checkPermissions(callback) #

See what push permissions are currently enabled. callback will be invoked with a permissions object:

alert :boolean
badge :boolean
sound :boolean

static getInitialNotification(0) #

This method returns a promise that resolves to either the notification object if the app was launched by a push notification, or null otherwise.

constructor(nativeNotif) #

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

finish(fetchResult) #

This method is available for remote notifications that have been received via: application:didReceiveRemoteNotification:fetchCompletionHandler: https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIApplicationDelegate_Protocol/#//apple_ref/occ/intfm/UIApplicationDelegate/application:didReceiveRemoteNotification:fetchCompletionHandler:

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(0) #

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

getSound(0) #

Gets the sound string from the aps object

getAlert(0) #

Gets the notification's main message from the aps object

getBadgeCount(0) #

Gets the badge count number from the aps object

getData(0) #

Gets the data object on the notif

You can edit the content above on GitHub and send us a pull request!

Examples #

Edit on GitHub

'use strict';

var React = require('react');
var ReactNative = require('react-native');
var {
  AlertIOS,
  PushNotificationIOS,
  StyleSheet,
  Text,
  TouchableHighlight,
  View,
} = ReactNative;

class Button extends React.Component {
  render() {
    return (
      <TouchableHighlight
        underlayColor={'white'}
        style={styles.button}
        onPress={this.props.onPress}>
        <Text style={styles.buttonLabel}>
          {this.props.label}
        </Text>
      </TouchableHighlight>
    );
  }
}

class NotificationExample extends React.Component {
  componentWillMount() {
    PushNotificationIOS.addEventListener('register', this._onRegistered);
    PushNotificationIOS.addEventListener('registrationError', this._onRegistrationError);
    PushNotificationIOS.addEventListener('notification', this._onRemoteNotification);
    PushNotificationIOS.addEventListener('localNotification', this._onLocalNotification);

    PushNotificationIOS.requestPermissions();
  }

  componentWillUnmount() {
    PushNotificationIOS.removeEventListener('register', this._onRegistered);
    PushNotificationIOS.removeEventListener('registrationError', this._onRegistrationError);
    PushNotificationIOS.removeEventListener('notification', this._onRemoteNotification);
    PushNotificationIOS.removeEventListener('localNotification', this._onLocalNotification);
  }

  render() {
    return (
      <View>
        <Button
          onPress={this._sendNotification}
          label="Send fake notification"
        />

        <Button
          onPress={this._sendLocalNotification}
          label="Send fake local notification"
        />
      </View>
    );
  }

  _sendNotification() {
    require('RCTDeviceEventEmitter').emit('remoteNotificationReceived', {
      aps: {
        alert: 'Sample notification',
        badge: '+1',
        sound: 'default',
        category: 'REACT_NATIVE'
      },
    });
  }

  _sendLocalNotification() {
    require('RCTDeviceEventEmitter').emit('localNotificationReceived', {
      aps: {
        alert: 'Sample local notification',
        badge: '+1',
        sound: 'default',
        category: 'REACT_NATIVE'
      },
    });
  }

  _onRegistered(deviceToken) {
    AlertIOS.alert(
      'Registered For Remote Push',
      `Device Token: ${deviceToken}`,
      [{
        text: 'Dismiss',
        onPress: null,
      }]
    );
  }

  _onRegistrationError(error) {
    AlertIOS.alert(
      'Failed To Register For Remote Push',
      `Error (${error.code}): ${error.message}`,
      [{
        text: 'Dismiss',
        onPress: null,
      }]
    );
  }

  _onRemoteNotification(notification) {
    AlertIOS.alert(
      'Push Notification Received',
      'Alert message: ' + notification.getMessage(),
      [{
        text: 'Dismiss',
        onPress: null,
      }]
    );
  }

  _onLocalNotification(notification){
    AlertIOS.alert(
      'Local Notification Received',
      'Alert message: ' + notification.getMessage(),
      [{
        text: 'Dismiss',
        onPress: null,
      }]
    );
  }
}

class NotificationPermissionExample extends React.Component {
  state: any;

  constructor(props) {
    super(props);
    this.state = {permissions: null};
  }

  render() {
    return (
      <View>
        <Button
          onPress={this._showPermissions.bind(this)}
          label="Show enabled permissions"
        />
        <Text>
          {JSON.stringify(this.state.permissions)}
        </Text>
      </View>
    );
  }

  _showPermissions() {
    PushNotificationIOS.checkPermissions((permissions) => {
      this.setState({permissions});
    });
  }
}

var styles = StyleSheet.create({
  button: {
    padding: 10,
    alignItems: 'center',
    justifyContent: 'center',
  },
  buttonLabel: {
    color: 'blue',
  },
});

exports.title = 'PushNotificationIOS';
exports.description = 'Apple PushNotification and badge value';
exports.examples = [
{
  title: 'Badge Number',
  render(): React.Element<any> {
    return (
      <View>
        <Button
          onPress={() => PushNotificationIOS.setApplicationIconBadgeNumber(42)}
          label="Set app's icon badge to 42"
        />
        <Button
          onPress={() => PushNotificationIOS.setApplicationIconBadgeNumber(0)}
          label="Clear app's icon badge"
        />
      </View>
    );
  },
},
{
  title: 'Push Notifications',
  render(): React.Element<any> {
    return <NotificationExample />;
  }
},
{
  title: 'Notifications Permissions',
  render(): React.Element<any> {
    return <NotificationPermissionExample />;
  }
}];

Run this example

← Prev Next →