1
1
# React Native Push Notifications
2
- [ ![ npm version] ( https://badge.fury.io/js/react-native-push-notification.svg )] ( http://badge.fury.io/js/react-native-push-notification )
3
- [ ![ npm downloads] ( https://img.shields.io/npm/dm/react-native-push-notification.svg?maxAge=2592000 )] ( https ://img.shields .io/npm/dm/ react-native-push-notification.svg?maxAge=2592000 )
2
+ [ ![ npm version] ( https://badge.fury.io/js/react-native-push-notification.svg?update=5 )] ( http://badge.fury.io/js/react-native-push-notification )
3
+ [ ![ npm downloads] ( https://img.shields.io/npm/dm/react-native-push-notification.svg?update=5 )] ( http ://badge.fury .io/js/ react-native-push-notification)
4
4
5
5
React Native Local and Remote Notifications for iOS and Android
6
6
7
+ ## Supported React Native Versions
8
+ | Component Version | RN Versions | README |
9
+ | -----------------------| ---------------| ------------|
10
+ | ** 1.0.7** | ** <= 0.27** | [ Open] ( https://github.com/zo0r/react-native-push-notification/blob/f42723817f1687e0da23e6753eb8a9f0385b6ac5/README.md ) |
11
+ | ** 1.0.8** | ** 0.28** | [ Open] ( https://github.com/zo0r/react-native-push-notification/blob/2eafd1961273ca6a82ad4dd6514fbf1d1a829089/README.md ) |
12
+ | ** 2.0.1** | ** 0.29** | [ Open] ( https://github.com/zo0r/react-native-push-notification/blob/c7ab7cd84ea19e42047379aefaf568bb16a81936/README.md ) |
13
+ | ** 2.0.2** | ** 0.30, 0.31, 0.32** | [ Open] ( https://github.com/zo0r/react-native-push-notification/blob/a0f7d44e904ba0b92933518e5bf6b444f1c90abb/README.md ) |
14
+ | ** >= 2.1.0** | ** >= 0.33** | [ Open] ( https://github.com/zo0r/react-native-push-notification/blob/a359e5c00954aa324136eaa9808333d6ca246171/README.md ) |
15
+
16
+
7
17
## Installation
8
18
` npm install react-native-push-notification `
9
19
@@ -21,6 +31,7 @@ The component uses PushNotificationIOS for the iOS part.
21
31
dependencies {
22
32
...
23
33
34
+ compile project(':react-native-push-notification')
24
35
compile ('com.google.android.gms:play-services-gcm:8.1.0') {
25
36
force = true;
26
37
}
@@ -30,13 +41,13 @@ dependencies {
30
41
In your ` AndroidManifest.xml `
31
42
``` xml
32
43
.....
33
-
34
44
<uses-permission android : name =" android.permission.WAKE_LOCK" />
35
45
<permission
36
46
android : name =" ${applicationId}.permission.C2D_MESSAGE"
37
47
android : protectionLevel =" signature" />
38
48
<uses-permission android : name =" ${applicationId}.permission.C2D_MESSAGE" />
39
49
<uses-permission android : name =" android.permission.VIBRATE" />
50
+ <uses-permission android : name =" android.permission.RECEIVE_BOOT_COMPLETED" />
40
51
41
52
<application ....>
42
53
<receiver
@@ -48,8 +59,13 @@ In your `AndroidManifest.xml`
48
59
<category android : name =" ${applicationId}" />
49
60
</intent-filter >
50
61
</receiver >
51
-
52
- <receiver android : name =" com.dieam.reactnativepushnotification.modules.RNPushNotificationPublisher" />
62
+
63
+ <receiver android : name =" com.dieam.reactnativepushnotification.modules.RNPushNotificationPublisher" />
64
+ <receiver android : name =" com.dieam.reactnativepushnotification.modules.RNPushNotificationBootEventReceiver" >
65
+ <intent-filter >
66
+ <action android : name =" android.intent.action.BOOT_COMPLETED" />
67
+ </intent-filter >
68
+ </receiver >
53
69
<service android : name =" com.dieam.reactnativepushnotification.modules.RNPushNotificationRegistrationService" />
54
70
<service
55
71
android : name =" com.dieam.reactnativepushnotification.modules.RNPushNotificationListenerService"
@@ -58,8 +74,7 @@ In your `AndroidManifest.xml`
58
74
<action android : name =" com.google.android.c2dm.intent.RECEIVE" />
59
75
</intent-filter >
60
76
</service >
61
-
62
- .....
77
+ .....
63
78
64
79
```
65
80
@@ -71,70 +86,30 @@ include ':react-native-push-notification'
71
86
project(':react-native-push-notification').projectDir = file('../node_modules/react-native-push-notification/android')
72
87
```
73
88
74
- In ` android/app/build.gradle `
75
-
76
- ``` gradle
77
- ...
78
-
79
- dependencies {
80
- ...
81
-
82
- compile project(':react-native-push-notification')
83
- }
84
- ```
85
-
86
- Register module (in ` MainActivity.java ` )
89
+ Register module (in ` MainApplication.java ` )
87
90
88
91
``` java
89
- import android.content.Intent ; // <--- Import Intent
90
92
import com.dieam.reactnativepushnotification.ReactNativePushNotificationPackage ; // <--- Import Package
91
93
92
- public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler {
93
-
94
- private ReactNativePushNotificationPackage mReactNativePushNotificationPackage; // <------ Add Package Variable
94
+ public class MainApplication extends Application implements ReactApplication {
95
95
96
- /**
97
- * Returns the name of the main component registered from JavaScript.
98
- * This is used to schedule rendering of the component.
99
- */
100
- @Override
101
- protected String getMainComponentName () {
102
- return " YOUR_APP_NAME" ;
103
- }
104
-
105
- /**
106
- * Returns whether dev mode should be enabled.
107
- * This enables e.g. the dev menu.
108
- */
109
- @Override
110
- protected boolean getUseDeveloperSupport () {
96
+ private final ReactNativeHost mReactNativeHost = new ReactNativeHost (this ) {
97
+ @Override
98
+ protected boolean getUseDeveloperSupport () {
111
99
return BuildConfig . DEBUG ;
112
- }
100
+ }
101
+
102
+ @Override
103
+ protected List<ReactPackage > getPackages () {
113
104
114
- /**
115
- * A list of packages used by the app. If the app uses additional views
116
- * or modules besides the default ones, add more packages here.
117
- */
118
- @Override
119
- protected List<ReactPackage > getPackages () {
120
- mReactNativePushNotificationPackage = new ReactNativePushNotificationPackage (this ); // <------ Initialize the Package
121
105
return Arrays . < ReactPackage > asList(
122
- new MainReactPackage (),
123
- new VectorIconsPackage (),
124
- new FabricPackage (),
125
- mReactNativePushNotificationPackage // <---- Add the Package
106
+ new MainReactPackage (),
107
+ new ReactNativePushNotificationPackage () // <---- Add the Package
126
108
);
127
109
}
110
+ };
128
111
129
- // Add onNewIntent
130
- @Override
131
- protected void onNewIntent (Intent intent ) {
132
- super . onNewIntent(intent);
133
-
134
- mReactNativePushNotificationPackage. newIntent(intent);
135
- }
136
-
137
- ....
112
+ ....
138
113
}
139
114
```
140
115
@@ -154,7 +129,7 @@ PushNotification.configure({
154
129
console .log ( ' NOTIFICATION:' , notification );
155
130
},
156
131
157
- // ANDROID ONLY: (optional) GCM Sender ID.
132
+ // ANDROID ONLY: GCM Sender ID (optional - not required for local notifications, but is need to receive remote push notifications)
158
133
senderID: " YOUR GCM SENDER ID" ,
159
134
160
135
// IOS ONLY (optional): default: all - Permissions to register.
@@ -169,8 +144,8 @@ PushNotification.configure({
169
144
popInitialNotification: true ,
170
145
171
146
/**
172
- * IOS ONLY: (optional) default: true
173
- * - Specified if permissions will requested or not,
147
+ * (optional) default: true
148
+ * - Specified if permissions (ios) and token (android and ios) will requested or not,
174
149
* - if not, you must call PushNotificationsHandler.requestPermissions() later
175
150
*/
176
151
requestPermissions: true ,
@@ -184,54 +159,104 @@ Notification object example:
184
159
``` javascript
185
160
{
186
161
foreground: false , // BOOLEAN: If the notification was received in foreground or not
162
+ userInteraction: false , // BOOLEAN: If the notification was opened by the user from the notification area or not
187
163
message: ' My Notification Message' , // STRING: The notification message
188
164
data: {}, // OBJECT: The push data
189
165
}
190
166
```
191
167
192
- ## Local and Schedule Notifications
168
+ ## Local Notifications
193
169
` PushNotification.localNotification(details: Object) `
194
170
195
- ` PushNotification.localNotificationSchedule(details: Object) `
196
-
197
171
EXAMPLE:
198
172
``` javascript
199
173
PushNotification .localNotification ({
200
174
/* Android Only Properties */
201
- id: 0 , // (optional) default: Autogenerated Unique ID
202
- title: " My Notification Title" , // (optional)
175
+ id: ' 0' , // (optional) Valid unique 32 bit integer specified as string. default: Autogenerated Unique ID
203
176
ticker: " My Notification Ticker" , // (optional)
204
- autoCancel: true , (optional) default: true
177
+ autoCancel: true , // (optional) default: true
205
178
largeIcon: " ic_launcher" , // (optional) default: "ic_launcher"
206
179
smallIcon: " ic_notification" , // (optional) default: "ic_notification" with fallback for "ic_launcher"
207
180
bigText: " My big text that will be shown when notification is expanded" , // (optional) default: "message" prop
208
181
subText: " This is a subText" , // (optional) default: none
209
- number: 10 , // (optional) default: none (Cannot be zero)
210
182
color: " red" , // (optional) default: system default
183
+ vibrate: true , // (optional) default: true
184
+ vibration: 300 , // vibration length in milliseconds, ignored if vibrate=false, default: 1000
185
+ tag: ' some_tag' , // (optional) add tag to message
186
+ group: " group" , // (optional) add group to message
187
+ ongoing: false , // (optional) set whether this is an "ongoing" notification
188
+
189
+ /* iOS only properties */
190
+ alertAction: // (optional) default: view
191
+ category: // (optional) default: null
192
+ userInfo: // (optional) default: null (object containing additional notification data)
211
193
212
194
/* iOS and Android properties */
213
- message: " My Notification Message" // (required)
195
+ title: " My Notification Title" , // (optional, for iOS this is only used in apple watch, the title will be the app name on other iOS devices)
196
+ message: " My Notification Message" , // (required)
197
+ playSound: false , // (optional) default: true
198
+ soundName: ' default' , // (optional) Sound to play when the notification is shown. Value of 'default' plays the default sound. It can be set to a custom sound such as 'android.resource://com.xyz/raw/my_sound'. It will look for the 'my_sound' audio file in 'res/raw' directory and play it. default: 'default' (default sound is played)
199
+ number: ' 10' , // (optional) Valid 32 bit integer specified as string. default: none (Cannot be zero)
214
200
});
201
+ ```
215
202
203
+ ## Scheduled Notifications
204
+ ` PushNotification.localNotificationSchedule(details: Object) `
205
+
206
+ EXAMPLE:
207
+ ``` javascript
216
208
PushNotification .localNotificationSchedule ({
217
- message: " My Notification Message" , // (required)
218
- date: new Date (Date .now () + (60 * 1000 )) // in 60 secs
209
+ message: " My Notification Message" , // (required)
210
+ date: new Date (Date .now () + (60 * 1000 )) // in 60 secs
219
211
});
220
212
```
221
213
214
+ ## Custom sounds
215
+
216
+ In android, add your custom sound file to ` [project_root]/android/app/src/main/res/raw `
217
+
218
+ In iOS, add your custom sound file to the project ` Resources ` in xCode.
219
+
220
+ In the location notification json specify the full file name:
221
+
222
+ soundName: 'my_sound.mp3'
223
+
224
+ ## Cancelling notifications
225
+
226
+ ### 1) cancelLocalNotifications
227
+
228
+ ` PushNotification.cancelLocalNotifications(details); `
229
+
230
+ The the ` details ` parameter allows you to specify a ` userInfo ` dictionary that can be used to match one or more * scheduled* notifications. Each
231
+ matched notification is cancelled and its alerts removed from the notification centre. The RN docs suggest this is an optional parameter, but
232
+ it is not.
233
+
234
+ ``` javascript
235
+ PushNotification .cancelLocalNotifications ({id: ' 123' });
236
+ ```
237
+
238
+ ### 2) cancelAllLocalNotifications
239
+
240
+ ` PushNotification.cancelAllLocalNotifications() `
241
+
242
+ Cancels all scheduled notifications AND clears the notifications alerts that are in the notification centre.
243
+
244
+ * NOTE: there is currently no api for removing specific notification alerts from the notification centre.*
245
+
246
+ ## Set application badge icon
247
+
248
+ ` PushNotification.setApplicationIconBadgeNumber(number: number) `
249
+
250
+ Works natively in iOS.
251
+
252
+ Uses the [ ShortcutBadger] ( https://github.com/leolin310148/ShortcutBadger ) on Android, and as such with not work on all Android devices.
253
+
222
254
## Sending Notification Data From Server
223
255
Same parameters as ` PushNotification.localNotification() `
224
256
225
257
## iOS Only Methods
226
258
` PushNotification.checkPermissions(callback: Function) ` Check permissions
227
259
228
- ` PushNotification.setApplicationIconBadgeNumber(number: number) ` set badge number
229
-
230
260
` PushNotification.getApplicationIconBadgeNumber(callback: Function) ` get badge number
231
261
232
262
` PushNotification.abandonPermissions() ` Abandon permissions
233
-
234
- ### TODO
235
- - [X] Add ` PushNotification.localNotificationSchedule() ` Android support
236
- - [ ] Restore Android local notifications after reboot
237
-
0 commit comments