Skip to content

Commit 96b4f08

Browse files
doc: update README
1 parent 6761e0a commit 96b4f08

File tree

1 file changed

+112
-110
lines changed

1 file changed

+112
-110
lines changed

README.md

Lines changed: 112 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,18 @@
11
# react-native-twilio-programmable-voice
22

3-
This is a React Native wrapper for Twilio Programmable Voice SDK that lets you make and receive calls from your React Native App. This module is not affiliated with or maintained by the Twilio team. This is maintained by contributions from the community.
3+
This is a React-Native wrapper for [Twilio Programmable Voice SDK](https://www.twilio.com/voice) which lets you make and receive calls from your React-Native App. This module is not affiliated with nor officially maintained by Twilio, and it is maintained by open source contributors.
44

5-
# Twilio Programmable Voice SDK
5+
## Twilio Programmable Voice SDK
66

7-
- Android 4.5.0 (bundled within this library)
8-
- iOS 2.1.0 (specified by the app's own podfile)
7+
- Android 4.5.0 (bundled within the module)
8+
- iOS 5.1.0 (specified by the app's own podfile)
99

1010
## Breaking changes in v4.0.0
1111

12-
It implements [react-native autolinking](https://github.com/react-native-community/cli/blob/master/docs/autolinking.md) as many other native libraries > react-native 0.60.0
12+
The module implements [react-native autolinking](https://github.com/react-native-community/cli/blob/master/docs/autolinking.md) as many other native libraries > react-native 0.60.0, therefore it doesn't need to be linked manually.
13+
14+
Android: update Firebase Messaging to 17.6.+. Remove the following block from your application's `AndroidManifest.xml` if you are migrating from v3.
1315

14-
Android: update Firebase Messaging to 17.6.+. Remove the following block from your application's `AndroidManifest.xml`
1516
```xml
1617
<!-- [START instanceId_listener] -->
1718
<service
@@ -26,7 +27,7 @@ Android: update Firebase Messaging to 17.6.+. Remove the following block from yo
2627

2728
Android X is supported.
2829

29-
Data passed to the event `deviceDidReceiveIncoming` does not contain the key `call_state`, because state of Call Invites was removed in Twilio Android v3.0.0
30+
Data passed to the event `deviceDidReceiveIncoming` does not contain the key `call_state`, because state of Call Invites was removed in Twilio Android and iOS SDK v3.0.0
3031

3132
- iOS: params changes for `connectionDidConnect` and `connectionDidDisconnect`
3233

@@ -44,85 +45,79 @@ You should use `hold()` to put a call on hold.
4445

4546
You can be notified when a call is `ringing` by listening for `callStateRinging` events.
4647

48+
iOS application can now receive the following events, that in v3 where only dispatched to Android:
49+
50+
- deviceDidReceiveIncoming
51+
- callInviteCancelled
52+
- callStateRinging
53+
- connectionIsReconnecting
54+
- connectionDidReconnect
55+
4756
## Breaking changes in v3.0.0
4857

4958
- initWitToken returns an object with a property `initialized` instead of `initilized`
5059
- iOS event `connectionDidConnect` returns the same properties as Android
5160
move property `to` => `call_to`
5261
move property `from` => `call_from`
5362

54-
## Help wanted!
55-
56-
There is no need to ask permissions to contribute. Just open an issue or provide a PR. Everybody is welcome to contribute.
57-
58-
ReactNative success is directly linked to its module ecosystem. One way to make an impact is helping contributing to this module or another of the many community lead ones.
59-
60-
![help wanted](images/vjeux_tweet.png "help wanted")
61-
6263
## Installation
6364

6465
Before starting, we recommend you get familiar with [Twilio Programmable Voice SDK](https://www.twilio.com/docs/api/voice-sdk).
65-
It's easier to integrate this module into your react-native app if you follow the Quick start tutorial from Twilio, because it makes very clear which setup steps are required. On RN 0.60+, this module can be auto-linked (Android still requires FCM setup below).
66-
67-
### Manual Linking
66+
It's easier to integrate this module into your react-native app if you follow the Quick start tutorial from Twilio, because it makes very clear which setup steps are required.
6867

69-
70-
```
68+
```bash
7169
npm install react-native-twilio-programmable-voice --save
72-
react-native link react-native-twilio-programmable-voice
7370
```
7471

75-
### iOS Installation - when projects made with react-native init
76-
After you have linked the library with `react-native link react-native-twilio-programmable-voice`
77-
check that `libRNTwilioVoice.a` is present under YOUR_TARGET > Build Phases > Link Binaries With Libraries. If it is not present you can add it using the + sign at the bottom of that list.
72+
- **React Native 0.60+**
7873

79-
Edit your `Podfile` to include TwilioVoice framework
74+
[CLI autolink feature](https://github.com/react-native-community/cli/blob/master/docs/autolinking.md) links the module while building the app.
75+
76+
- **React Native <= 0.59**
8077

78+
```bash
79+
react-native link react-native-twilio-programmable-voice
8180
```
82-
source 'https://github.com/cocoapods/specs'
8381

84-
# min version for TwilioVoice to work
85-
platform :ios, '10.0'
82+
### iOS Installation
8683

87-
target <YOUR_TARGET> do
88-
...
89-
pod 'TwilioVoice', '~> 5.1.1'
90-
...
91-
end
84+
If you can't or don't want to use autolink, you can also manually link the library using the instructions below (click on the arrow to show them):
9285

93-
```
86+
<details>
87+
<summary>Manually link the library on iOS</summary>
9488

95-
run `pod install` from inside your project `ios` directory
89+
Follow the [instructions in the React Native documentation](https://facebook.github.io/react-native/docs/linking-libraries-ios#manual-linking) to manually link the framework
9690

97-
### iOS Installation - when projects made without react-native init
98-
Edit your `Podfile` to include TwilioVoice and RNTwilioVoice frameworks
91+
After you have linked the library with `react-native link react-native-twilio-programmable-voice`
92+
check that `libRNTwilioVoice.a` is present under YOUR_TARGET > Build Phases > Link Binaries With Libraries. If it is not present you can add it using the + sign at the bottom of that list.
93+
</details>
9994

100-
```
95+
Edit your `Podfile` to include TwilioVoice framework
96+
97+
```ruby
10198
source 'https://github.com/cocoapods/specs'
10299

103100
# min version for TwilioVoice to work
104101
platform :ios, '10.0'
105102

106103
target <YOUR_TARGET> do
107104
...
108-
pod 'TwilioVoice', '~> 5.1.1'
109-
pod 'RNTwilioVoice', path: '../node_modules/react-native-twilio-programmable-voice'
105+
pod 'TwilioVoice', '~> 5.2.0'
110106
...
111107
end
112-
113108
```
114109

115-
run `pod install` from inside your project `ios` directory
116-
117-
### CallKit
110+
```bash
111+
cd ios/ && pod install
112+
```
118113

119-
The current iOS part of this library works through [CallKit](https://developer.apple.com/reference/callkit). Because of this the call flow is much simpler than on Android as CallKit handles the inbound calls answering, ignoring, or rejecting.
120-
Because of CallKit, the only event listeners present are "deviceReady", "connectionDidConnect", "connectionDidDisconnect", and "callRejected".
114+
#### CallKit
121115

122-
### VoIP Service Certificate
116+
The iOS library works through [CallKit](https://developer.apple.com/reference/callkit) and handling calls is much simpler than the Android implementation as CallKit handles the inbound calls answering, ignoring, or rejecting. Outbound calls must be controlled by custom React-Native screens and controls.
123117

124-
Twilio Programmable Voice for iOS utilizes Apple's VoIP Services and VoIP "Push Notifications" instead of FCM. You will need a VoIP Service Certificate from Apple to receive calls.
118+
#### VoIP Service Certificate
125119

120+
Twilio Programmable Voice for iOS utilizes Apple's VoIP Services and VoIP "Push Notifications" instead of FCM. You will need a VoIP Service Certificate from Apple to receive calls. Follow [the official Twilio instructions](https://github.com/twilio/voice-quickstart-ios#7-create-voip-service-certificate) to complete this step.
126121

127122
## Android Installation
128123

@@ -131,42 +126,27 @@ Setup FCM
131126
You must download the file `google-services.json` from the Firebase console.
132127
It contains keys and settings for all your applications under Firebase. This library obtains the resource `senderID` for registering for remote GCM from that file.
133128

134-
**NOTE: To use a specific `play-service-gcm` version, update the `compile` instruction in your App's `android/app/build.gradle` (replace `10.+` with the version you prefer):**
135-
136-
```gradle
137-
...
129+
#### `android/build.gradle`
138130

131+
```groovy
139132
buildscript {
140-
...
141-
dependencies {
142-
classpath 'com.google.gms:google-services:4.2.0'
143-
}
144-
}
145-
146-
...
147-
148-
dependencies {
149-
...
150-
// on React Native 0.60+, this module can be auto-linked and doesn't need a manual entry here
151-
152-
implementation project(':react-native-twilio-programmable-voice')
133+
dependencies {
134+
// override the google-service version if needed
135+
// https://developers.google.com/android/guides/google-services-plugin
136+
classpath 'com.google.gms:google-services:4.3.3'
137+
}
153138
}
154139
155140
// this plugin looks for google-services.json in your project
156141
apply plugin: 'com.google.gms.google-services'
157142
```
158143

159-
In your `AndroidManifest.xml`
144+
#### `AndroidManifest.xml`
160145

161146
```xml
162-
.....
163147
<uses-permission android:name="android.permission.VIBRATE" />
164148

165-
166149
<application ....>
167-
168-
....
169-
170150
<!-- Twilio Voice -->
171151
<!-- [START fcm_listener] -->
172152
<service
@@ -176,45 +156,50 @@ In your `AndroidManifest.xml`
176156
</intent-filter>
177157
</service>
178158
<!-- [END fcm_listener] -->
159+
```
179160

180-
.....
161+
If you can't or don't want to use autolink, you can also manually link the library using the instructions below (click on the arrow to show them):
181162

182-
```
163+
<details>
164+
<summary>Manually link the library on Android</summary>
183165

184-
In `android/settings.gradle` (not necessary if auto-linking on RN 0.60+)
166+
Make the following changes:
185167

186-
```gradle
187-
...
168+
#### `android/settings.gradle`
188169

170+
```groovy
189171
include ':react-native-twilio-programmable-voice'
190-
project(':react-native-twilio-programmable-voice').projectDir = file('../node_modules/react-native-twilio-programmable-voice/android')
172+
project(':react-native-twilio-programmable-voice').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-twilio-programmable-voice/android')
173+
```
174+
175+
#### `android/app/build.gradle`
176+
177+
```groovy
178+
dependencies {
179+
implementation project(':react-native-twilio-programmable-voice')
180+
}
191181
```
192182

193-
Register module (in `MainApplication.java`) (not necessary if auto-linking on RN 0.60+ unless you want to control microphone permission)
183+
#### `android/app/src/main/.../MainApplication.java`
184+
On top, where imports are:
194185

195186
```java
196187
import com.hoxfon.react.RNTwilioVoice.TwilioVoicePackage; // <--- Import Package
188+
```
197189

198-
public class MainApplication extends Application implements ReactApplication {
199-
200-
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
201-
@Override
202-
protected boolean getUseDeveloperSupport() {
203-
return BuildConfig.DEBUG;
204-
}
190+
Add the `TwilioVoicePackage` class to your list of exported packages.
205191

206-
@Override
207-
protected List<ReactPackage> getPackages() {
208-
return Arrays.<ReactPackage>asList(
209-
new MainReactPackage(),
210-
new TwilioVoicePackage() // <---- Add the package
211-
// new TwilioVoicePackage(false) // <---- pass false if you don't want to ask for microphone permissions
212-
);
213-
}
214-
};
215-
....
192+
```java
193+
@Override
194+
protected List<ReactPackage> getPackages() {
195+
return Arrays.asList(
196+
new MainReactPackage(),
197+
new TwilioVoicePackage() // <---- Add the package
198+
// new TwilioVoicePackage(false) // <---- pass false if you don't want to ask for microphone permissions
199+
);
216200
}
217201
```
202+
</details>
218203

219204
## Usage
220205

@@ -233,9 +218,11 @@ async function initTelephony() {
233218
console.err(err)
234219
}
235220
}
236-
// iOS Only
237-
function initTelephonyWithUrl(url) {
238-
TwilioVoice.initWithTokenUrl(url)
221+
222+
function initTelephonyWithToken(token) {
223+
TwilioVoice.initWithAccessToken(token)
224+
225+
// iOS only, configure CallKit
239226
try {
240227
TwilioVoice.configureCallKit({
241228
appName: 'TwilioVoiceExample', // Required param
@@ -263,16 +250,24 @@ TwilioVoice.addEventListener('deviceNotReady', function(data) {
263250
TwilioVoice.addEventListener('connectionDidConnect', function(data) {
264251
// {
265252
// call_sid: string, // Twilio call sid
266-
// call_state: 'PENDING' | 'CONNECTED' | 'ACCEPTED' | 'CONNECTING' | 'RINGING' | 'DISCONNECTED' | 'CANCELLED',
253+
// call_state: 'CONNECTED' | 'ACCEPTED' | 'CONNECTING' | 'RINGING' | 'DISCONNECTED' | 'CANCELLED',
267254
// call_from: string, // "+441234567890"
268255
// call_to: string, // "client:bob"
269256
// }
270257
})
271258
TwilioVoice.addEventListener('connectionIsReconnecting', function(data) {
272-
// empty data
259+
// {
260+
// call_sid: string, // Twilio call sid
261+
// call_from: string, // "+441234567890"
262+
// call_to: string, // "client:bob"
263+
// }
273264
})
274265
TwilioVoice.addEventListener('connectionDidReconnect', function(data) {
275-
// empty data
266+
// {
267+
// call_sid: string, // Twilio call sid
268+
// call_from: string, // "+441234567890"
269+
// call_to: string, // "client:bob"
270+
// }
276271
})
277272
TwilioVoice.addEventListener('connectionDidDisconnect', function(data: mixed) {
278273
// | null
@@ -281,7 +276,7 @@ TwilioVoice.addEventListener('connectionDidDisconnect', function(data: mixed) {
281276
// }
282277
// | {
283278
// call_sid: string, // Twilio call sid
284-
// call_state: 'PENDING' | 'CONNECTED' | 'ACCEPTED' | 'CONNECTING' | 'RINGING' | 'DISCONNECTED' | 'CANCELLED',
279+
// call_state: 'CONNECTED' | 'ACCEPTED' | 'CONNECTING' | 'RINGING' | 'DISCONNECTED' | 'CANCELLED',
285280
// call_from: string, // "+441234567890"
286281
// call_to: string, // "client:bob"
287282
// err?: string,
@@ -290,7 +285,7 @@ TwilioVoice.addEventListener('connectionDidDisconnect', function(data: mixed) {
290285
TwilioVoice.addEventListener('callStateRinging', function(data: mixed) {
291286
// {
292287
// call_sid: string, // Twilio call sid
293-
// call_state: 'PENDING' | 'CONNECTED' | 'ACCEPTED' | 'CONNECTING' | 'RINGING' | 'DISCONNECTED' | 'CANCELLED',
288+
// call_state: 'CONNECTED' | 'ACCEPTED' | 'CONNECTING' | 'RINGING' | 'DISCONNECTED' | 'CANCELLED',
294289
// call_from: string, // "+441234567890"
295290
// call_to: string, // "client:bob"
296291
// }
@@ -306,20 +301,21 @@ TwilioVoice.addEventListener('callInviteCancelled', function(data: mixed) {
306301
// iOS Only
307302
TwilioVoice.addEventListener('callRejected', function(value: 'callRejected') {})
308303

309-
// Android Only
310304
TwilioVoice.addEventListener('deviceDidReceiveIncoming', function(data) {
311305
// {
312306
// call_sid: string, // Twilio call sid
313307
// call_from: string, // "+441234567890"
314308
// call_to: string, // "client:bob"
315309
// }
316310
})
311+
317312
// Android Only
318313
TwilioVoice.addEventListener('proximity', function(data) {
319314
// {
320315
// isNear: boolean
321316
// }
322317
})
318+
323319
// Android Only
324320
TwilioVoice.addEventListener('wiredHeadset', function(data) {
325321
// {
@@ -376,20 +372,26 @@ TwilioVoice.getCallInvite()
376372
TwilioVoice.unregister()
377373
```
378374

379-
## Twilio Voice SDK reference
375+
## Help wanted
380376

381-
[iOS changelog](https://www.twilio.com/docs/api/voice-sdk/ios/changelog)
377+
There is no need to ask permissions to contribute. Just open an issue or provide a PR. Everybody is welcome to contribute.
378+
379+
ReactNative success is directly linked to its module ecosystem. One way to make an impact is helping contributing to this module or another of the many community lead ones.
380+
381+
![help wanted](images/vjeux_tweet.png "help wanted")
382382

383-
[Android changelog](https://www.twilio.com/docs/api/voice-sdk/android/changelog)
383+
## Twilio Voice SDK reference
384+
385+
[iOS changelog](https://www.twilio.com/docs/voice/voip-sdk/ios/changelog)
386+
[Android changelog](https://www.twilio.com/docs/voice/voip-sdk/android/3x-changelog)
384387

385388
## Credits
386389

387390
[voice-quickstart-android](https://github.com/twilio/voice-quickstart-android)
388391

389-
[react-native-push-notification](https://github.com/zo0r/react-native-push-notification)
390-
391-
[voice-quickstart-objc](https://github.com/twilio/voice-quickstart-objc)
392+
[voice-quickstart-ios](https://github.com/twilio/voice-quickstart-ios)
392393

394+
[react-native-push-notification](https://github.com/zo0r/react-native-push-notification)
393395

394396
## License
395397

0 commit comments

Comments
 (0)