Skip to content

Commit 3700819

Browse files
authored
Feat/add notification request (#207)
1 parent d3c72cc commit 3700819

File tree

8 files changed

+764
-43
lines changed

8 files changed

+764
-43
lines changed

README.md

Lines changed: 122 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,10 @@
77

88
React Native Push Notification API for iOS.
99

10+
| Notification | With Action | With TextInput Action |
11+
| ----------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
12+
| <img src="https://user-images.githubusercontent.com/6936373/97115527-77c6ee80-173a-11eb-8440-049590a25f31.jpeg" width="320"/> | <img src="https://user-images.githubusercontent.com/6936373/97115526-772e5800-173a-11eb-8b51-c5263bced07a.jpeg" width="320"/> | <img src="https://user-images.githubusercontent.com/6936373/97115522-74cbfe00-173a-11eb-9644-fc1d5e634d6b.jpeg" width="320"/> |
13+
1014
## Getting started
1115

1216
### Install
@@ -116,14 +120,7 @@ didReceiveNotificationResponse:(UNNotificationResponse *)response
116120
withCompletionHandler:(void (^)(void))completionHandler
117121
{
118122
[RNCPushNotificationIOS didReceiveNotificationResponse:response];
119-
completionHandler();
120-
}
121-
// IOS 4-10 Required for the localNotification event.
122-
- (void)application:(UIApplication *)application didReceiveLocalNotification:(UILocalNotification *)notification
123-
{
124-
[RNCPushNotificationIOS didReceiveLocalNotification:notification];
125123
}
126-
127124
```
128125

129126
And then in your AppDelegate implementation, add the following:
@@ -184,6 +181,57 @@ export const App = () => {
184181
};
185182
```
186183

184+
## How to perform different action based on user selected action.
185+
186+
```js
187+
export const App = () => {
188+
const [permissions, setPermissions] = useState({});
189+
190+
/**
191+
* By calling this function, notification with category `userAction` will have action buttons
192+
*/
193+
const setNotificationCategories = () => {
194+
PushNotificationIOS.setNotificationCategories([
195+
{
196+
id: 'userAction',
197+
actions: [
198+
{id: 'open', title: 'Open', options: {foreground: true}},
199+
{
200+
id: 'ignore',
201+
title: 'Desruptive',
202+
options: {foreground: true, destructive: true},
203+
},
204+
{
205+
id: 'text',
206+
title: 'Text Input',
207+
options: {foreground: true},
208+
textInput: {buttonTitle: 'Send'},
209+
},
210+
],
211+
},
212+
]);
213+
};
214+
215+
useEffect(() => {
216+
PushNotificationIOS.addEventListener('notification', onRemoteNotification);
217+
});
218+
219+
const onRemoteNotification = (notification) => {
220+
const actionIdentifier = notification.getActionIdentifier();
221+
222+
if (actionIdentifier === 'open') {
223+
// Perform action based on open action
224+
}
225+
226+
if (actionIdentifier === 'text') {
227+
// Text that of user input.
228+
const userText = notification.getUserText();
229+
// Perform action based on textinput action
230+
}
231+
};
232+
};
233+
```
234+
187235
# Reference
188236

189237
## Methods
@@ -194,6 +242,7 @@ export const App = () => {
194242
PushNotificationIOS.presentLocalNotification(details);
195243
```
196244

245+
_Deprecated_ - use `addNotificationRequest` instead.
197246
Schedules the localNotification for immediate presentation.
198247

199248
**Parameters:**
@@ -221,6 +270,7 @@ details is an object containing:
221270
PushNotificationIOS.scheduleLocalNotification(details);
222271
```
223272

273+
_Deprecated_ - use `addNotificationRequest` instead.
224274
Schedules the localNotification for future presentation.
225275

226276
**Parameters:**
@@ -244,6 +294,71 @@ details is an object containing:
244294

245295
---
246296

297+
### `addNotificationRequest()`
298+
299+
```jsx
300+
PushNotificationIOS.addNotificationRequest(request);
301+
```
302+
303+
Sends notificationRequest to notification center at specified firedate.
304+
Fires immediately if firedate is not set.
305+
306+
**Parameters:**
307+
308+
| Name | Type | Required | Description |
309+
| ------- | ------ | -------- | ----------- |
310+
| request | object | Yes | See below. |
311+
312+
request is an object containing:
313+
314+
- `id`: Identifier of the notification. Required in order to be able to retrieve specific notification. (required)
315+
- `title`: A short description of the reason for the alert.
316+
- `subtitle`: A secondary description of the reason for the alert.
317+
- `body` : The message displayed in the notification alert.
318+
- `badge` The number to display as the app's icon badge. Setting the number to 0 removes the icon badge.
319+
- `fireDate` : The date and time when the system should deliver the notification.
320+
- `repeats` : Sets notification to repeat daily. Must be used with fireDate.
321+
- `sound` : The sound played when the notification is fired.
322+
- `category` : The category of this notification, required for actionable notifications.
323+
- `isSilent` : If true, the notification will appear without sound.
324+
- `userInfo` : An object containing additional notification data.
325+
326+
---
327+
328+
### `setNotificationCategories()`
329+
330+
```jsx
331+
PushNotificationIOS.setNotificationCategories(categories);
332+
```
333+
334+
Sets category for the notification center.
335+
Allows you to add specific actions for notification with specific category.
336+
337+
**Parameters:**
338+
339+
| Name | Type | Required | Description |
340+
| ---------- | -------- | -------- | ----------- |
341+
| categories | object[] | Yes | See below. |
342+
343+
`category` is an object containing:
344+
345+
- `id`: Identifier of the notification category. Notification with this category will have the specified actions. (required)
346+
- `actions`: An array of notification actions to be attached to the notification of category id.
347+
348+
`action` is an object containing:
349+
350+
- `id`: Identifier of Action. This value will be returned as actionIdentifier when notification is received.
351+
- `title`: Text to be shown on notification action button.
352+
- `options`: Options for notification action.
353+
- `foreground`: If `true`, action will be displayed on notification.
354+
- `destructive`: If `true`, action will be displayed as destructive notification.
355+
- `authenticationRequired`: If `true`, action will only be displayed for authenticated user.
356+
- `textInput`: Option for textInput action. If textInput prop exists, then user action will automatically become a text input action. The text user inputs will be in the userText field of the received notification.
357+
- `buttonTitle`: Text to be shown on button when user finishes text input. Default is "Send" or its equivalent word in user's language setting.
358+
- `placeholder`: Placeholder for text input for text input action.
359+
360+
---
361+
247362
### `remooveAllPendingNotificationRequests()`
248363

249364
```jsx

example/App.js

Lines changed: 75 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -66,12 +66,12 @@ export const App = () => {
6666
DeviceEventEmitter.emit('remoteNotificationReceived', {
6767
remote: true,
6868
aps: {
69-
alert: 'Sample notification',
70-
badge: '+1',
69+
alert: {title: 'title', subtitle: 'subtitle', body: 'body'},
70+
badge: 1,
7171
sound: 'default',
72-
alertTitle: 'title',
7372
category: 'REACT_NATIVE',
7473
'content-available': 1,
74+
'mutable-content': 1,
7575
},
7676
});
7777
};
@@ -101,6 +101,61 @@ export const App = () => {
101101
});
102102
};
103103

104+
const addNotificationRequest = () => {
105+
PushNotificationIOS.addNotificationRequest({
106+
id: 'test',
107+
title: 'title',
108+
subtitle: 'subtitle',
109+
body: 'body',
110+
category: 'test',
111+
fireDate: new Date(new Date().valueOf() + 2000),
112+
repeats: true,
113+
});
114+
};
115+
116+
const getPendingNotificationRequests = () => {
117+
PushNotificationIOS.getPendingNotificationRequests((requests) => {
118+
Alert.alert('Push Notification Received', JSON.stringify(requests), [
119+
{
120+
text: 'Dismiss',
121+
onPress: null,
122+
},
123+
]);
124+
});
125+
};
126+
127+
const setNotificationCategories = async () => {
128+
PushNotificationIOS.setNotificationCategories([
129+
{
130+
id: 'test',
131+
actions: [
132+
{id: 'open', title: 'Open', options: {foreground: true}},
133+
{
134+
id: 'ignore',
135+
title: 'Desruptive',
136+
options: {foreground: true, destructive: true},
137+
},
138+
{
139+
id: 'text',
140+
title: 'Text Input',
141+
options: {foreground: true},
142+
textInput: {buttonTitle: 'Send'},
143+
},
144+
],
145+
},
146+
]);
147+
Alert.alert(
148+
'setNotificationCategories',
149+
`Set notification category complete`,
150+
[
151+
{
152+
text: 'Dismiss',
153+
onPress: null,
154+
},
155+
],
156+
);
157+
};
158+
104159
const removeAllPendingNotificationRequests = () => {
105160
PushNotificationIOS.removeAllPendingNotificationRequests();
106161
};
@@ -132,6 +187,7 @@ export const App = () => {
132187

133188
const result = `
134189
Title: ${notification.getTitle()};\n
190+
Subtitle: ${notification.getSubtitle()};\n
135191
Message: ${notification.getMessage()};\n
136192
badge: ${notification.getBadgeCount()};\n
137193
sound: ${notification.getSound()};\n
@@ -162,7 +218,10 @@ export const App = () => {
162218
Alert.alert(
163219
'Local Notification Received',
164220
`Alert title: ${notification.getTitle()},
165-
'Alert message: ${notification.getMessage()},
221+
Alert subtitle: ${notification.getSubtitle()},
222+
Alert message: ${notification.getMessage()},
223+
Action Id: ${notification.getActionIdentifier()},
224+
User Text: ${notification.getUserText()},
166225
Notification is clicked: ${String(isClicked)}.`,
167226
[
168227
{
@@ -191,6 +250,14 @@ export const App = () => {
191250
onPress={scheduleLocalNotification}
192251
label="Schedule fake local notification"
193252
/>
253+
<Button
254+
onPress={addNotificationRequest}
255+
label="Add Notification Request"
256+
/>
257+
<Button
258+
onPress={setNotificationCategories}
259+
label="Set notification categories"
260+
/>
194261
<Button
195262
onPress={removeAllPendingNotificationRequests}
196263
label="Remove All Pending Notification Requests"
@@ -199,7 +266,6 @@ export const App = () => {
199266
onPress={sendSilentNotification}
200267
label="Send fake silent notification"
201268
/>
202-
203269
<Button
204270
onPress={() => PushNotificationIOS.setApplicationIconBadgeNumber(42)}
205271
label="Set app's icon badge to 42"
@@ -208,6 +274,10 @@ export const App = () => {
208274
onPress={() => PushNotificationIOS.setApplicationIconBadgeNumber(0)}
209275
label="Clear app's icon badge"
210276
/>
277+
<Button
278+
onPress={getPendingNotificationRequests}
279+
label="Get Pending Notification Requests"
280+
/>
211281
<View>
212282
<Button onPress={showPermissions} label="Show enabled permissions" />
213283
<Text>{JSON.stringify(permissions)}</Text>

example/ios/example/AppDelegate.m

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -116,7 +116,6 @@ - (void)userNotificationCenter:(UNUserNotificationCenter *)center
116116
didReceiveNotificationResponse:(UNNotificationResponse *)response
117117
withCompletionHandler:(void (^)(void))completionHandler {
118118
[RNCPushNotificationIOS didReceiveNotificationResponse:response];
119-
completionHandler();
120119
}
121120

122121
- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge {
Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<?xml version="1.0" encoding="UTF-8"?>
2+
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
3+
<plist version="1.0">
4+
<dict>
5+
<key>aps-environment</key>
6+
<string>development</string>
7+
</dict>
8+
</plist>

0 commit comments

Comments
 (0)