React Native Push Notifications

React Native Local and Remote Notifications for iOS and Android

Installation

npm install react-native-push-notification

iOS Installation

The component uses PushNotificationIOS for the iOS part.

Android Installation

In your AndroidManifest.xml

    .....

    <permission
        android:name="${applicationId}.permission.C2D_MESSAGE"
        android:protectionLevel="signature" />
    <uses-permission android:name="${applicationId}.permission.C2D_MESSAGE" />
    <uses-permission android:name="android.permission.WAKE_LOCK" />
    <uses-permission android:name="android.permission.VIBRATE" />

    <application ....>
        <receiver
            android:name="com.google.android.gms.gcm.GcmReceiver"
            android:exported="true"
            android:permission="com.google.android.c2dm.permission.SEND" >
            <intent-filter>
                <action android:name="com.google.android.c2dm.intent.RECEIVE" />
                <category android:name="${applicationId}" />
            </intent-filter>
        </receiver>

        <service android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationRegistrationService"/>
        <service
            android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationListenerService"
            android:exported="false" >
            <intent-filter>
                <action android:name="com.google.android.c2dm.intent.RECEIVE" />
            </intent-filter>
        </service>
        
        .....

In android/settings.gradle

...

include ':react-native-push-notification'
project(':react-native-push-notification').projectDir = file('../node_modules/react-native-push-notification/RNPushNotificationAndroid')

In android/app/build.gradle

...

dependencies {
    ...

    compile project(':react-native-push-notification')
}

import com.dieam.reactnativepushnotification.ReactNativePushNotificationPackage;  // <--- Import

public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler {
  ......

  private ReactInstanceManager mReactInstanceManager;
  private ReactRootView mReactRootView;
  private ReactNativePushNotificationPackage mReactNativePushNotificationPackage; // <------ Add Package Variable

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    mReactRootView = new ReactRootView(this);
    mReactNativePushNotificationPackage = new ReactNativePushNotificationPackage(this); // <------ Initialize the Package

    mReactInstanceManager = ReactInstanceManager.builder()
      .setApplication(getApplication())
      .setBundleAssetName("index.android.bundle")
      .setJSMainModuleName("index.android")
      .addPackage(new MainReactPackage())
      .addPackage(mReactNativePushNotificationPackage) // <------ Add the Package
      .setUseDeveloperSupport(BuildConfig.DEBUG)
      .setInitialLifecycleState(LifecycleState.RESUMED)
      .build();

    mReactRootView.startReactApplication(mReactInstanceManager, "ExampleApp", null);

    setContentView(mReactRootView);
  }

  // Add onNewIntent
  @Override
  protected void onNewIntent (Intent intent) {
     super.onNewIntent(intent);

     mReactNativePushNotificationPackage.newIntent(intent);
  }
  ......

}

Usage

var PushNotification = require('react-native-push-notification');

PushNotification.configure({

    // (optional) Called when Token is generated (iOS and Android)
    onRegister: function(token) {
        console.log( 'TOKEN:', token );
    },

    // (required) Called when a remote or local notification is opened or received
    onNotification: function(notification) {
        console.log( 'NOTIFICATION:', notification );
    },

    // ANDROID ONLY: (optional) GCM Sender ID.
    senderID: "YOUR GCM SENDER ID",

    // IOS ONLY (optional): default: all - Permissions to register.
    permissions: {
        alert: true,
        badge: true,
        sound: true
    },
    
    /**
      * IOS ONLY: (optional) default: true
      * - Specified if permissions will requested or not,
      * - if not, you must call PushNotificationsHandler.requestPermissions() later
      */
    requestPermissions: true,
});

Handling Notifications

When any notification is opened or received the callback onNotification is called passing an object with the notification data.

Notification object example:

{
    foreground: false, // BOOLEAN: If the notification was received in foreground or not
    message: 'My Notification Message', // STRING: The notification message
    data: {}, // OBJECT: The push data
}

Local and Schedule Notifications

PushNotification.localNotification(details: Object)

PushNotification.localNotificationSchedule(details: Object) (IOS ONLY)

EXAMPLE:

PushNotification.localNotification({
    /* Android Only Properties */
    id: 0, // (optional) default: Autogenerated Unique ID
    title: "My Notification Title", // (optional)
    ticker: "My Notification Ticker", // (optional)
    largeIcon: "ic_launcher", // (optional) default: "ic_launcher"
    smallIcon: "ic_notification", // (optional) default: "ic_notification" with fallback for "ic_launcher"

    /* iOS and Android properties */
    message: "My Notification Message" // (required)
});

// IOS ONLY
PushNotification.localNotificationSchedule({
	message: "My Notification Message" // (required)
	date: new Date()
});

Sending Notification Data From Server

Same parameters as PushNotification.localNotification()

iOS Only Methods

PushNotification.checkPermissions(callback: Function) Check permissions

PushNotification.setApplicationIconBadgeNumber(number: number) set badge number

PushNotification.getApplicationIconBadgeNumber(callback: Function) get badge number

PushNotification.abandonPermissions() Abandon permissions

TODO

Add PushNotification.localNotificationSchedule() Android support

azendoo / react-native-push-notification