React Native Push Notifications
React Native Local and Remote Notifications for iOS and Android
Supported React Native Versions
Component Version | RN Version | README |
---|---|---|
1.0.7 | <= 0.27 | Open |
1.0.8 | 0.28 | Open |
2.0.1 | 0.29 | Open |
>= 2.0.2 | >= 0.30 | Open |
Installation
npm install react-native-push-notification
iOS Installation
The component uses PushNotificationIOS for the iOS part.
Please see: PushNotificationIOS
Android Installation
NOTE: To use a specific play-service-gcm
version, use in your android/app/build.gradle
(change 8.1.0
for your version):
...
dependencies {
...
compile project(':react-native-push-notification')
compile ('com.google.android.gms:play-services-gcm:8.1.0') {
force = true;
}
}
In your AndroidManifest.xml
.....
<uses-permission android:name="android.permission.WAKE_LOCK" />
<permission
android:name="${applicationId}.permission.C2D_MESSAGE"
android:protectionLevel="signature" />
<uses-permission android:name="${applicationId}.permission.C2D_MESSAGE" />
<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>
<receiver android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationPublisher" />
<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/android')
Register module (in MainApplication.java
)
import com.dieam.reactnativepushnotification.ReactNativePushNotificationPackage; // <--- Import Package
public class MainApplication extends Application implements ReactApplication {
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
@Override
protected boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new ReactNativePushNotificationPackage() // <---- Add the Package
);
}
};
....
}
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
},
// Should the initial notification be popped automatically
// default: true
popInitialNotification: true,
/**
* (optional) default: true
* - Specified if permissions (ios) and token (android and ios) 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
userInteraction: false, // BOOLEAN: If the notification was opened by the user from the notification area or not
message: 'My Notification Message', // STRING: The notification message
data: {}, // OBJECT: The push data
}
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