React Native CallKeep utilises a brand new iOS 10 framework CallKit and Android ConnectionService to make the life easier for VoIP developers using React Native.
For more information about CallKit on iOS, please see Official CallKit Framework Document or Introduction to CallKit by Xamarin
For more information about ConnectionService on Android, please see Android Documentation and Build a calling app
A demo of react-native-callkeep is available in the wazo-react-native-demo repository.
npm install --save react-native-callkeep
# or
yarn add react-native-callkeepimport RNCallKeep from 'react-native-callkeep';
const options = {
ios: {
appName: 'My app name',
},
android: {
alertTitle: 'Permissions required',
alertDescription: 'This application needs to access your phone accounts',
cancelButton: 'Cancel',
okButton: 'ok',
}
};
RNCallKeep.setup(options);options: Objectios: objectappName: string (required)- It will be displayed on system UI when incoming calls received
imageName: string (optional)- If provided, it will be displayed on system UI during the call
ringtoneSound: string (optional)- If provided, it will be played when incoming calls received; the system will use the default ringtone if this is not provided
android: objectalertTitle: string (required) When asking for phone account permission, we need to provider a title for theAlertto ask the user for italertDescription: string (required) When asking for phone account permission, we need to provider a description for theAlertto ask the user for itcancelButton: string (required) Cancel button labelokButton: string (required) Ok button label
This feature is available only on Android.
Tell ConnectionService that the device is ready to accept outgoing calls.
If not the user will be stuck in the build UI screen without any actions.
Eg: Call it with false when disconnected from the sip client, when your token expires ...
RNCallKeep.setAvailable(true);active: boolean- Tell whenever the app is ready or not
Display system UI for incoming call
RNCallKeep.displayIncomingCall(uuid, handle);uuid: string- An
uuidthat should be stored and re-used forstopCall.
- An
handle: string- Phone number of the caller
localizedCallerName: string (optional, iOS only)- Name of the caller to be displayed on the native UI
handleType: string (optional, iOS only)genericnumber(default)email
hasVideo: boolean (optional, iOS only)false(default)true(you know... when not false)
When you make an outgoing call, tell the device that a call is occurring. This feature is available only on iOS.
RNCallKeep.startCall(uuid, handle, handleType, hasVideo, contactIdentifier);- uuid: string
- An
uuidthat should be stored and re-used forstopCall.
- An
handle: string- Phone number of the callee
handleType: string (optional, iOS only)genericnumber(default)email
hasVideo: boolean (optional, iOS only)false(default)true(you know... when not false)
contactIdentifier: string (optional)- The identifier is displayed in the native call UI, and is typically the name of the call recipient.
When you finish an incoming/outgoing call.
RNCallKeep.endCall(uuid);uuid: string- The
uuidused forstartCallordisplayIncomingCall
- The
Mark the current call as active (eg: when the callee as answered).
RNCallKeep.setCurrentCallActive();Switch the mic on/off. This feature is available only on iOS.
RNCallKeep.setMutedCall(uuid, true);uuid: string- uuid of the current call.
muted: boolean
End all calls that have been started on the device.
RNCallKeep.endAllCalls();Checks if there are any active calls on the device and returns a promise with a boolean value (true if there're active calls, false otherwise).
This feature is available only on iOS.
RNCallKeep.checkIfBusy();Checks if the device speaker is on and returns a promise with a boolean value (true if speaker is on, false otherwise).
This feature is available only on iOS.
RNCallKeep.checkSpeaker();Tells if ConnectionService is available on the device (returns a boolean).
This feature is available only on Android.
RNCallKeep.supportConnectionService();Checks if the user has enabled the phone account for your application. A phone account must be enable to be able to display UI screen on incoming call and make outgoing calls from native Contact application.
Returns a promise of a boolean.
This feature is available only on Android.
await RNCallKeep.hasPhoneAccount();Checks if the user has set a default phone account. If the user has not set a default they will be prompted to do so with an alert.
This is a workaround for an issue affecting some Samsung devices.
This feature is available only on Android.
const options = {
alertTitle: 'Default not set',
alertDescription: 'Please set the default phone account'
};
RNCallKeep.hasDefaultPhoneAccount(options);User start call action from Recents (Or Contact on Android) in built-in phone app.
Try to start your call action from here (e.g. get credentials of the user by data.handle and/or send INVITE to your SIP server)
After all works are done, remember to call RNCallKeep.startCall(uuid, calleeNumber)
RNCallKeep.addEventListener('didReceiveStartCallAction', ({ handle }) => {
});handle(string)- The number/name got from Recents in built-in Phone app
User answer the incoming call
RNCallKeep.addEventListener('answerCall', ({ callUUID }) => {
// Do your normal `Answering` actions here.
});callUUID(string)- The UUID of the call that is to be answered (iOS only).
User finish the call.
RNCallKeep.addEventListener('endCall', ({ callUUID }) => {
// Do your normal `Hang Up` actions here
});callUUID(string)- The UUID of the call that is to be answered (iOS only).
The AudioSession has been activated by RNCallKeep.
RNCallKeep.addEventListener('didActivateAudioSession', () => {
// you might want to do following things when receiving this event:
// - Start playing ringback if it is an outgoing call
});Callback for RNCallKeep.displayIncomingCall
RNCallKeep.addEventListener('didDisplayIncomingCall', ({ error }) => {
// you might want to do following things when receiving this event:
// - Start playing ringback if it is an outgoing call
});error(?string)- iOS only.
A call was muted by the system or the user:
RNCallKeep.addEventListener('didPerformSetMutedCallAction', (muted) => {
});A call was held or unheld by the current user
RNCallKeep.addEventListener('didToggleHoldCallAction', ({ hold, callUUID }) => {
});hold(boolean)callUUID(string)- The UUID of the call that is to be answered (iOS only).
Used type a number on his dialer
RNCallKeep.addEventListener('didPerformDTMFAction', ({ dtmf, callUUID }) => {
});dtmf(string)callUUID(string)- iOS only.
A full example is available in the wazo-react-native-demo repository.
import React from 'react';
import RNCallKeep from 'react-native-callkeep';
import uuid from 'uuid';
class RNCallKeepExample extends React.Component {
constructor(props) {
super(props);
this.currentCallId = null;
// Initialise RNCallKeep
const options = {
ios: {
appName: 'WazoReactNativeDemo',
},
android: {
alertTitle: 'Permissions required',
alertDescription: 'This application needs to access your phone accounts',
cancelButton: 'Cancel',
okButton: 'ok',
}
};
try {
RNCallKeep.setup(options);
RNCallKeep.setAvailable(true); // Only used for Android, see doc above.
} catch (err) {
console.error('initializeCallKeep error:', err.message);
}
// Add RNCallKeep Events
RNCallKeep.addEventListener('didReceiveStartCallAction', this.onNativeCall);
RNCallKeep.addEventListener('answerCall', this.onAnswerCallAction);
RNCallKeep.addEventListener('endCall', this.onEndCallAction);
RNCallKeep.addEventListener('didDisplayIncomingCall', this.onIncomingCallDisplayed);
RNCallKeep.addEventListener('didPerformSetMutedCallAction', this.onToggleMute);
RNCallKeep.addEventListener('didActivateAudioSession', this.audioSessionActivated);
}
onNativeCall = ({ handle }) => {
// Your normal start call action
RNCallKeep.startCall(this.getCurrentCallId(), handle);
};
onAnswerCallAction = ({ callUUID }) => {
// called when the user answer the incoming call
};
onEndCallAction = ({ callUUID }) => {
RNCallKeep.endCall(this.getCurrentCallId());
this.currentCallId = null;
};
onIncomingCallDisplayed = error => {
// You will get this event after RNCallKeep finishes showing incoming call UI
// You can check if there was an error while displaying
};
onToggleMute = (muted) => {
// Called when the system or the user mutes a call
};
audioSessionActivated = (data) => {
// you might want to do following things when receiving this event:
// - Start playing ringback if it is an outgoing call
};
getCurrentCallId = () => {
if (!this.currentCallId) {
this.currentCallId = uuid.v4();
}
return this.currentCallId;
};
render() {
}
}- On iOS, you should call
setupeach time you want to use callKeep.
adb logcat *:S RNCallKeepModule:V
Any pull request, issue report and suggestion are highly welcome!
This work is dual-licensed under ISC and MIT. Previous work done by @ianlin on iOS is on ISC Licence. We choose MIT for the rest of the project.
SPDX-License-Identifier: ISC OR MIT