Skip to content

Commit 46bb6ee

Browse files
committed
readme: update for simplified api and didLoadWithEvents
1 parent 35ce2c5 commit 46bb6ee

File tree

1 file changed

+67
-89
lines changed

1 file changed

+67
-89
lines changed

README.md

Lines changed: 67 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,6 @@
55

66
React Native VoIP Push Notification - Currently iOS >= 8.0 only
77

8-
## Motivation
9-
10-
Since iOS 8.0 there is an execellent feature called **VoIP Push Notification** ([PushKit][1]), while in React Native only the traditional push notification is supported which limits the possibilities of building a VoIP app with React Native (like me!).
11-
12-
To understand the benefits of **Voip Push Notification**, please see [VoIP Best Practices][2].
13-
14-
**Note 1**: Not sure if Android support this sort of stuff since I'm neither an iOS nor Android expert, from my limited understanding that GCM's [sending high priority push notification][5] might be the case. Correct me if I'm wrong!
15-
16-
**Note 2** This module is inspired by [PushNotificationIOS][6] and [React Native Push Notification][7]
17-
188
## RN Version
199

2010
* 1.1.0+ ( RN 40+ )
@@ -121,13 +111,7 @@ Make sure you enabled the folowing in `Xcode` -> `Signing & Capabilities`:
121111
// --- The system calls this method when a previously provided push token is no longer valid for use. No action is necessary on your part to reregister the push type. Instead, use this method to notify your server not to send push notifications using the matching push token.
122112
}
123113

124-
125-
// --- Handle incoming pushes (for ios <= 10)
126-
- (void)pushRegistry:(PKPushRegistry *)registry didReceiveIncomingPushWithPayload:(PKPushPayload *)payload forType:(PKPushType)type {
127-
[RNVoipPushNotificationManager didReceiveIncomingPushWithPayload:payload forType:(NSString *)type];
128-
}
129-
130-
// --- Handle incoming pushes (for ios >= 11)
114+
// --- Handle incoming pushes
131115
- (void)pushRegistry:(PKPushRegistry *)registry didReceiveIncomingPushWithPayload:(PKPushPayload *)payload forType:(PKPushType)type withCompletionHandler:(void (^)(void))completion {
132116

133117

@@ -160,32 +144,32 @@ Make sure you enabled the folowing in `Xcode` -> `Signing & Capabilities`:
160144
## Linking:
161145
162146
On RN60+, auto linking with pod file should work.
163-
Or you can try below:
164-
165-
## Linking Manually:
166-
167-
### Add PushKit Framework:
168-
169-
- In your Xcode project, select `Build Phases` --> `Link Binary With Libraries`
170-
- Add `PushKit.framework`
147+
<details>
148+
<summary>Linking Manually</summary>
171149
172-
### Add RNVoipPushNotification:
173-
174-
#### Option 1: Use [rnpm][3]
175-
176-
```bash
177-
rnpm link react-native-voip-push-notification
178-
```
179-
180-
**Note**: If you're using rnpm link make sure the `Header Search Paths` is `recursive`. (In step 3 of manually linking)
181-
182-
#### Option 2: Manually
183-
184-
1. Drag `node_modules/react-native-voip-push-notification/ios/RNVoipPushNotification.xcodeproj` under `<your_xcode_project>/Libraries`
185-
2. Select `<your_xcode_project>` --> `Build Phases` --> `Link Binary With Libraries`
186-
- Drag `Libraries/RNVoipPushNotification.xcodeproj/Products/libRNVoipPushNotification.a` to `Link Binary With Libraries`
187-
3. Select `<your_xcode_project>` --> `Build Settings`
188-
- In `Header Search Paths`, add `$(SRCROOT)/../node_modules/react-native-voip-push-notification/ios/RNVoipPushNotification` with `recursive`
150+
### Add PushKit Framework:
151+
152+
- In your Xcode project, select `Build Phases` --> `Link Binary With Libraries`
153+
- Add `PushKit.framework`
154+
155+
### Add RNVoipPushNotification:
156+
157+
#### Option 1: Use [rnpm][3]
158+
159+
```bash
160+
rnpm link react-native-voip-push-notification
161+
```
162+
163+
**Note**: If you're using rnpm link make sure the `Header Search Paths` is `recursive`. (In step 3 of manually linking)
164+
165+
#### Option 2: Manually
166+
167+
1. Drag `node_modules/react-native-voip-push-notification/ios/RNVoipPushNotification.xcodeproj` under `<your_xcode_project>/Libraries`
168+
2. Select `<your_xcode_project>` --> `Build Phases` --> `Link Binary With Libraries`
169+
- Drag `Libraries/RNVoipPushNotification.xcodeproj/Products/libRNVoipPushNotification.a` to `Link Binary With Libraries`
170+
3. Select `<your_xcode_project>` --> `Build Settings`
171+
- In `Header Search Paths`, add `$(SRCROOT)/../node_modules/react-native-voip-push-notification/ios/RNVoipPushNotification` with `recursive`
172+
</details>
189173

190174
## Usage:
191175

@@ -201,51 +185,48 @@ class MyComponent extends React.Component {
201185

202186
...
203187

204-
componentDidMount() { // or anywhere which is most comfortable and appropriate for you
205-
VoipPushNotification.requestPermissions(); // --- optional, you can use another library to request permissions
206-
VoipPushNotification.registerVoipToken(); // --- required
207-
208-
VoipPushNotification.addEventListener('register', (token) => {
209-
// --- send token to your apn provider server
210-
});
211-
212-
VoipPushNotification.addEventListener('localNotification', (notification) => {
213-
// --- when user click local push
214-
});
215-
216-
VoipPushNotification.addEventListener('notification', (notification) => {
217-
// --- when receive remote voip push, register your VoIP client, show local notification ... etc
218-
//this.doRegisterOrSomething();
188+
// --- or anywhere which is most comfortable and appropriate for you, usually ASAP
189+
componentDidMount() {
190+
VoipPushNotification.registerVoipToken(); // --- register token
191+
192+
VoipPushNotification.addEventListener('didLoadWithEvents', (events) => {
193+
// --- this will fire when there are events occured before js bridge initialized
194+
// --- use this event to execute your event handler manually by event type
195+
196+
if (!events || !Array.isArray(events) || events.length < 1) {
197+
return;
198+
}
199+
for (let voipPushEvent of events) {
200+
let { name, data } = voipPushEvent;
201+
if (name === 'RNVoipPushRemoteNotificationsRegisteredEvent') {
202+
this.onVoipPushNotificationRegistered(data);
203+
} else if (name === 'RNVoipPushRemoteNotificationReceivedEvent') {
204+
this.onVoipPushNotificationiReceived(data);
205+
}
206+
}
207+
});
219208

220-
// --- This is a boolean constant exported by this module
221-
// --- you can use this constant to distinguish the app is launched by VoIP push notification or not
222-
if (VoipPushNotification.wakeupByPush) {
223-
// this.doSomething()
224-
225-
// --- remember to set this static variable back to false
226-
// --- since the constant are exported only at initialization time, and it will keep the same in the whole app
227-
VoipPushNotification.wakeupByPush = false;
228-
}
229-
230-
231-
// --- optionally, if you `addCompletionHandler` from the native side, once you have done the js jobs to initiate a call, call `completion()`
232-
VoipPushNotification.onVoipNotificationCompleted(notification.getData().uuid);
233-
234-
235-
/**
236-
* Local Notification Payload
237-
*
238-
* - `alertBody` : The message displayed in the notification alert.
239-
* - `alertAction` : The "action" displayed beneath an actionable notification. Defaults to "view";
240-
* - `soundName` : The sound played when the notification is fired (optional).
241-
* - `category` : The category of this notification, required for actionable notifications (optional).
242-
* - `userInfo` : An optional object containing additional notification data.
243-
*/
244-
VoipPushNotification.presentLocalNotification({
245-
alertBody: "hello! " + notification.getMessage()
246-
});
247-
});
248-
}
209+
// --- onVoipPushNotificationRegistered
210+
VoipPushNotification.addEventListener('register', (token) => {
211+
// --- send token to your apn provider server
212+
});
213+
214+
// --- onVoipPushNotificationiReceived
215+
VoipPushNotification.addEventListener('notification', (notification) => {
216+
// --- when receive remote voip push, register your VoIP client, show local notification ... etc
217+
this.doSomething();
218+
219+
// --- optionally, if you `addCompletionHandler` from the native side, once you have done the js jobs to initiate a call, call `completion()`
220+
VoipPushNotification.onVoipNotificationCompleted(notification.uuid);
221+
});
222+
}
223+
224+
// --- unsubscribe event listeners
225+
componentWillUnmount() {
226+
VoipPushNotification.removeEventListener('didLoadWithEvents');
227+
VoipPushNotification.removeEventListener('register');
228+
VoipPushNotification.removeEventListener('notification');
229+
}
249230
...
250231
}
251232

@@ -263,6 +244,3 @@ class MyComponent extends React.Component {
263244
[2]: https://developer.apple.com/library/ios/documentation/Performance/Conceptual/EnergyGuide-iOS/OptimizeVoIP.html
264245
[3]: https://github.com/rnpm/rnpm
265246
[4]: https://opensource.org/licenses/ISC
266-
[5]: https://developers.google.com/cloud-messaging/concept-options#setting-the-priority-of-a-message
267-
[6]: https://facebook.github.io/react-native/docs/pushnotificationios.html
268-
[7]: https://github.com/zo0r/react-native-push-notification

0 commit comments

Comments
 (0)