Android system notifications for React Native.
import React, { DeviceEventEmitter } from 'react-native';
import Notification from 'react-native-system-notification';
// Send a simple notification
Notification.create({ subject: 'Hey', message: 'Yo! Hello world.' });
// Listen to notification-clicking events
DeviceEventEmitter.addListener('sysNotificationClick', function(e) {
console.log(e);
});
// Custom payload for notifications
Notification.create({
subject: 'Notification With Payload',
message: 'This is a notification that contains custom payload.',
payload: { number: 1, what: true, someAnswer: '42' }
});
// Receive the payload on notification events
DeviceEventEmitter.addListener('sysNotificationClick', function(e) {
console.log(e.payload); // => { number: 1, what: true, someAnswer: '42' }
});
// Customize notification
Notification.create({
subject: 'Notification With Custom Icon',
message: 'This is a notification with a specified icon.',
smallIcon: 'ic_alert'
});
// Scheduled notifications
Notification.create({
subject: 'Scheduled Notification',
message: 'This notification will show on every Friday morning at 8:30 AM, starts at 2015/9/9 and end after 10 times.',
sendAt: new Date(2015, 9, 9, 8, 30),
repeat: 'week',
count: 10
});-
Run
npm install react-native-system-notification --saveto install using npm. -
Add the following two lines to
android/settings.gradle:
include ':react-native-system-notification'
project(':react-native-system-notification').projectDir = new File(settingsDir, '../node_modules/react-native-system-notification/android')- Edit
android/app/build.gradleand add the annoated lines as below:
...
defaultConfig {
applicationId "com.reactnativeproject"
minSdkVersion 16
targetSdkVersion 22
versionCode 1
versionName "1.0"
multiDexEnabled true // <- Add this line
ndk {
abiFilters "armeabi-v7a", "x86"
}
}
...
dependencies {
compile fileTree(dir: "libs", include: ["*.jar"])
compile "com.android.support:appcompat-v7:23.0.1"
compile "com.facebook.react:react-native:0.16.+"
compile project(':react-native-system-notification') // <- Add this line
}- Edit
android/app/src/main/AndroidManifest.xmland add the annoated lines as below:
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.reactnativeproject">
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED"/> <!-- <- Add this line -->
<uses-permission android:name="android.permission.VIBRATE"/> <!-- <- Add this line -->
<application
android:allowBackup="true"
android:label="@string/app_name"
android:icon="@mipmap/ic_launcher"
android:theme="@style/AppTheme">
...
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
<receiver android:name="io.neson.react.notification.NotificationEventReceiver" /> <!-- <- Add this line -->
<receiver android:name="io.neson.react.notification.NotificationPublisher" /> <!-- <- Add this line -->
<receiver android:name="io.neson.react.notification.SystemBootEventReceiver"> <!-- <- Add this line -->
<intent-filter> <!-- <- Add this line -->
<action android:name="android.intent.action.BOOT_COMPLETED"></action> <!-- <- Add this line -->
</intent-filter> <!-- <- Add this line -->
</receiver> <!-- <- Add this line -->
</application>
</manifest>Requesting
VIBRATEpermission is required if you want to make the device vibrate while sending notifications.
- Edit
MainActivity.java(usually atandroid/app/src/main/java/com/<project-name>/MainActivity.java) and add the annoated lines as below:
import com.facebook.react.LifecycleState;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactRootView;
import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;
import io.neson.react.notification.NotificationPackage; // <- Add this line
public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler {
...
mReactRootView = new ReactRootView(this);
mReactInstanceManager = ReactInstanceManager.builder()
.setApplication(getApplication())
.setBundleAssetName("index.android.bundle")
.setJSMainModuleName("index.android")
.addPackage(new MainReactPackage())
.addPackage(new NotificationPackage(this)) // <- Add this line
.setUseDeveloperSupport(BuildConfig.DEBUG)
.setInitialLifecycleState(LifecycleState.RESUMED)
.build();
...Notification.create({
id: 1337,
subject: 'Notification With Payload',
message: 'This is a notification that contains custom payload.',
smallIcon: 'ic_launcher',
autoCancel: true,
payload: { number: 1, what: true, someAnswer: '42' }
});The function will return a promise.
Notification.create({ message: 'Testing.' }).then(function(notification) {
console.log(notification);
console.log(notification.id);
});Notification.create({
subject: 'Scheduled Notification',
message: 'This notification will show on every Friday morning at 8:30 AM, starts at 2015/9/9 and end after 10 times.',
sendAt: new Date(2015, 9, 9, 8, 30),
repeatEvery: 'week',
repeatCount: 10
});Notification.create({
subject: 'Scheduled Notification',
message: 'This notification will show on 2015/9/9 morning at 8:30 AM, and repeat for 10 times every minute.',
sendAt: new Date(2015, 9, 9, 8, 30),
repeatEvery: 60000,
repeatCount: 10
});Notification.create({
subject: 'Delayed Notification',
message: 'This notification will show after 10 seconds, even the app has been stoped.',
delay: 10000
});DeviceEventEmitter.addListener('sysNotificationClick', function(e) {
console.log(e);
});Notification.send({ message: 'Message', action: 'ACTION_NAME', payload: { data: 'Anything' } });DeviceEventEmitter.addListener('sysNotificationClick', function(e) {
switch (e.action) {
case 'ACTION_NAME':
console.log('Action Triggered!');
break;
case 'ANOTHER_ACTION_NAME':
console.log('Another Action Triggered!');
break;
}
});Notification.getIDs().then(function(ids) {
console.log(ids); // Array of ids
});Only delayed or scheduled notifications will have an record.
Notification.find(notificationID).then(function(notification) {
console.log(notification);
});Notification.clear(notificationID);
Notification.clearAll();This will only clear the notification from the system statusbar. To cancel scheduled notifications, please use Notification.delete(id).
Notification.delete(notificationID);
Notification.deleteAll();