React Native CallKit utilises a brand new iOS 10 framework CallKit to make the life easier for VoIP developers using React Native.
For more information about CallKit, please see Official CallKit Framework Document or Introduction to CallKit by Xamarin
Note: Since CallKit is quite new, this module will be updated frequently so be careful with the version you are using.
Use version >= 1.1.0 if you're using react native >= 0.40
npm install --save react-native-callkitrnpm link react-native-callkitnpm install --save react-native-callkitcd ios
pod installAdd voip under UIBackgroundModes
Note that it must be done via editing Info.plist as in Xcode 9 there is no voip option in Capabilities.
<key>UIBackgroundModes</key>
<array>
<string>voip</string>
</array>
In Xcode -> Build Phases -> Link Binary With Libraries, add CallKit.framework and Intents.framework with Optional status
#import "RNCallKit.h"Initialise RNCallKit first, since we need our custom observer of NSNotificationCenter to be started as soon as the app is initialising
// This is how you normally initialise React Root View, delete it
-RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
- moduleName:@"MyApp"
- initialProperties:nil
- launchOptions:launchOptions];
// Initialise RNCallKit
+RNCallKit *rncallkit = [[RNCallKit alloc] init];
// Initialise React Bridge with RNCallKit
+RCTBridge *bridge = [[RCTBridge alloc] initWithBundleURL:jsCodeLocation
+ moduleProvider:^{ return @[rncallkit]; }
+ launchOptions:launchOptions];
// Initialise React Root View with React Bridge you've just created
+RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
+ moduleName:@"MyApp"
+ initialProperties:nil];This delegate will be called when the user tries to start a call from native Phone App
- (BOOL)application:(UIApplication *)application
continueUserActivity:(NSUserActivity *)userActivity
restorationHandler:(void(^)(NSArray * __nullable restorableObjects))restorationHandler
{
return [RNCallKit application:application
continueUserActivity:userActivity
restorationHandler:restorationHandler];
}
- options: object
- appName: 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
- appName: string (required)
Initialise RNCallKit with options
- uuid: string
- handle: string
- handleType: string (optional)
- generic
- number (default)
- hasVideo: boolean (optional)
- false (default)
- localizedCallerName: string (optional)
Call when you receive incoming calls to display system UI
- uuid: string
- handle: string
- handleType: string (optional)
- generic
- number (default)
- contactIdentifier: string (optional)
- The identifier is displayed in the native call UI, and is typically the name of the call recipient.
Call when you make an outgoing call
- uuid: string
Call when you finish an incoming/outgoing call
- uuid: string
- muted: boolean
Switch the mic on/off
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).
Checks if the device speaker is on and returns a promise with a boolean value (true if speaker is on, false otherwise).
data:
{
handle: '886900000000' // The number/name got from Recents in built-in Phone app
}User start call action from Recents 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 RNCallKit.startCall(uuid, calleeNumber)
User answer the incoming call
Do your normal Answering actions here
data:
{
callUUID: 'f0ee907b-6dbd-45a8-858a-903decb198f8' // The UUID of the call that is to be answered
}User finish the call
Do your normal Hang Up actions here
data:
{
callUUID: 'f0ee907b-6dbd-45a8-858a-903decb198f8' // The UUID of the call that is to be hung
}The AudioSession has been activated by RNCallKit, you might want to do following things when receiving this event:
- Start playing ringback if it is an outgoing call
Callback for RNCallKit.displayIncomingCall
error: string (optional)
A call was muted by the system or the user:
muted: boolean
User is interacting with a number pad. He pressed a key.
digit: string
import React from 'react';
import RNCallKit from 'react-native-callkit';
import uuid from 'uuid';
class RNCallKitExample extends React.Component {
constructor(props) {
// Initialise RNCallKit
let options = {
appName: 'RNCallKitExample',
imageName: 'my_image_name_in_bundle',
ringtoneSound: 'my_ringtone_sound_filename_in_bundle',
};
try {
RNCallKit.setup(options);
} catch (err) {
console.log('error:', err.message);
}
// Add RNCallKit Events
RNCallKit.addEventListener('didReceiveStartCallAction', this.onRNCallKitDidReceiveStartCallAction);
RNCallKit.addEventListener('answerCall', this.onRNCallKitPerformAnswerCallAction);
RNCallKit.addEventListener('endCall', this.onRNCallKitPerformEndCallAction);
RNCallKit.addEventListener('didActivateAudioSession', this.onRNCallKitDidActivateAudioSession);
RNCallKit.addEventListener('didDisplayIncomingCall', this.onRNCallKitDidDisplayIncomingCall);
RNCallKit.addEventListener('didPerformSetMutedCallAction', this.onRNCallKitDidPerformSetMutedCallAction);
RNCallKit.addEventListener('didReceiveDTMFCallAction', this.onRNCallKitDidReceiveDTMFCallAction)
}
onRNCallKitDidReceiveStartCallAction(data) {
/*
* Your normal start call action
*
* ...
*
*/
let _uuid = uuid.v4();
RNCallKit.startCall(_uuid, data.handle);
}
onRNCallKitPerformAnswerCallAction(data) {
/* You will get this event when the user answer the incoming call
*
* Try to do your normal Answering actions here
*
* e.g. this.handleAnswerCall(data.callUUID);
*/
}
onRNCallKitPerformEndCallAction(data) {
/* You will get this event when the user finish the incoming/outgoing call
*
* Try to do your normal Hang Up actions here
*
* e.g. this.handleHangUpCall(data.callUUID);
*/
}
onRNCallKitDidActivateAudioSession(data) {
/* You will get this event when the the AudioSession has been activated by **RNCallKit**,
* you might want to do following things when receiving this event:
*
* - Start playing ringback if it is an outgoing call
*/
}
onRNCallKitDidDisplayIncomingCall(error) {
/* You will get this event after RNCallKit finishes showing incoming call UI
* You can check if there was an error while displaying
*/
}
onRNCallKitDidPerformSetMutedCallAction(muted) {
/* You will get this event after the system or the user mutes a call
* You can use it to toggle the mic on your custom call UI
*/
}
onRNCallKitDidReceiveDTMFCallAction(digit) {
/* You will get this event when user is interacting with a number pad
* "digit" is the key number that user pressed
*/
}
// This is a fake function where you can receive incoming call notifications
onIncomingCall() {
// Store the generated uuid somewhere
// You will need this when calling RNCallKit.endCall()
let _uuid = uuid.v4();
RNCallKit.displayIncomingCall(_uuid, "886900000000")
}
// This is a fake function where you make outgoing calls
onOutgoingCall() {
// Store the generated uuid somewhere
// You will need this when calling RNCallKit.endCall()
let _uuid = uuid.v4();
RNCallKit.startCall(_uuid, "886900000000")
}
// This is a fake function where you hang up calls
onHangUpCall() {
// get the _uuid you stored earlier
RNCallKit.endCall(_uuid)
}
render() {
}
}Any pull request, issue report and suggestion are highly welcome!
ISC License (functionality equivalent to MIT License)