React Native Local and Remote Notifications for iOS and Android
| 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 |
npm install react-native-push-notification
The component uses PushNotificationIOS for the iOS part.
Please see: PushNotificationIOS
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 ); } }; .... }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, });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 }PushNotification.localNotification(details: Object)
PushNotification.localNotificationSchedule(details: Object)
EXAMPLE:
PushNotification.localNotification({ /* Android Only Properties */ id: 0, // (optional) default: Autogenerated Unique ID title: "My Notification Title", // (optional) ticker: "My Notification Ticker", // (optional) autoCancel: true, // (optional) default: true largeIcon: "ic_launcher", // (optional) default: "ic_launcher" smallIcon: "ic_notification", // (optional) default: "ic_notification" with fallback for "ic_launcher" bigText: "My big text that will be shown when notification is expanded", // (optional) default: "message" prop subText: "This is a subText", // (optional) default: none color: "red", // (optional) default: system default vibrate: true, // (optional) default: true vibration: 300, // vibration length in milliseconds, ignored if vibrate=false, default: 1000 tag: 'some_tag', // (optional) add tag to message group: "group", // (optional) add group to message /* iOS only properties */ alertAction: // (optional) default: view category: // (optional) default: null userInfo: // (optional) default: null (object containing additional notification data) /* iOS and Android properties */ message: "My Notification Message" // (required) playSound: false, // (optional) default: true number: 10 // (optional) default: none (Cannot be zero) }); PushNotification.localNotificationSchedule({ message: "My Notification Message", // (required) date: new Date(Date.now() + (60 * 1000)) // in 60 secs });Same parameters as PushNotification.localNotification()
PushNotification.checkPermissions(callback: Function) Check permissions
PushNotification.setApplicationIconBadgeNumber(number: number) set badge number
PushNotification.getApplicationIconBadgeNumber(callback: Function) get badge number
PushNotification.abandonPermissions() Abandon permissions
- Add
PushNotification.localNotificationSchedule()Android support - Restore Android local notifications after reboot