This is no longer supported, please use react-native-callkeep instead.
--
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-callkit
rnpm link react-native-callkit
npm install --save react-native-callkit
cd ios
pod install
Add 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: '886950000000' // 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
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);
}
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
*/
}
// 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, "886950000000")
}
// 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, "886950000000")
}
// This is a fake function where you hang up calls
onHangUpCall() {
// get the _uuid you stored earlier
RNCallKit.endCall(_uuid)
}
render() {
}
}
ISC License (functionality equivalent to MIT License)