React Native Local and Remote Notifications for iOS and Android
npm install react-native-push-notification
The component uses PushNotificationIOS for the iOS part.
Please see: PushNotificationIOS
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') }Register module (in MainActivity.java)
import com.dieam.reactnativepushnotification.ReactNativePushNotificationPackage; // <--- Import public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler { private ReactNativePushNotificationPackage mReactNativePushNotificationPackage; // <------ Add Package Variable /** * Returns the name of the main component registered from JavaScript. * This is used to schedule rendering of the component. */ @Override protected String getMainComponentName() { return "YOUR_APP_NAME"; } /** * Returns whether dev mode should be enabled. * This enables e.g. the dev menu. */ @Override protected boolean getUseDeveloperSupport() { return BuildConfig.DEBUG; } /** * A list of packages used by the app. If the app uses additional views * or modules besides the default ones, add more packages here. */ @Override protected List<ReactPackage> getPackages() { mReactNativePushNotificationPackage = new ReactNativePushNotificationPackage(this); // <------ Initialize the Package return Arrays.<ReactPackage>asList( new MainReactPackage(), new VectorIconsPackage(), new FabricPackage(), mReactNativePushNotificationPackage // <---- Add the Package ); } // Add onNewIntent @Override protected void onNewIntent (Intent intent) { super.onNewIntent(intent); mReactNativePushNotificationPackage.newIntent(intent); } .... }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, });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 }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() });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