react-native-push-notification-anativ
Version:
React Native Local and Remote Notifications
211 lines (163 loc) • 6.43 kB
Markdown
React Native Local and Remote Notifications for iOS and Android
`npm install react-native-push-notification`
The component uses PushNotificationIOS for the iOS part.
[](https://facebook.github.io/react-native/docs/pushnotificationios.html#content)
In your `AndroidManifest.xml`
```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`
```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`
```gradle
...
dependencies {
...
compile project(':react-native-push-notification')
}
```
Register module (in `MainActivity.java`)
```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);
}
....
}
```
```javascript
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:
```javascript
{
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:
```javascript
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