React Native CallKit - iOS >= 10.0 only

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.

Version

Use version >= 1.1.0 if you're using react native >= 0.40

Installation (without CocoaPods)

NPM module

npm install --save react-native-callkit

Link Library

rnpm link react-native-callkit

Installation (with CocoaPods)

NPM module

npm install --save react-native-callkit

CocaPods

cd ios
pod install

Installation common steps

Info.plist

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>

Add Frameworks

In Xcode -> Build Phases -> Link Binary With Libraries, add CallKit.framework and Intents.framework with Optional status

AppDelegate.m

- Import Library

#import "RNCallKit.h"

- Change the way you initialise React Root View (required if <= 1.2.1)

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];

- Handling User Activity

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];
}

API

setup

• 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

Initialise RNCallKit with options

displayIncomingCall

• uuid: string
• handle: string
• handleType: string (optional)
  • generic
  • number (default)
  • email
• hasVideo: boolean (optional)
  • false (default)
• localizedCallerName: string (optional)

Call when you receive incoming calls to display system UI

startCall

• uuid: string
• handle: string
• handleType: string (optional)
  • generic
  • number (default)
  • email
• 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

endCall

• uuid: string

Call when you finish an incoming/outgoing call

setMutedCall

• uuid: string
• muted: boolean

Switch the mic on/off

checkIfBusy

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).

checkSpeaker

Checks if the device speaker is on and returns a promise with a boolean value (true if speaker is on, false otherwise).

Events

- didReceiveStartCallAction

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)

- answerCall

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
}

- endCall

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
}

- didActivateAudioSession

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

- didDisplayIncomingCall

Callback for RNCallKit.displayIncomingCall

error: string (optional)

- didPerformSetMutedCallAction

A call was muted by the system or the user:

muted: boolean

Usage

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, "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() {
  }
}

Contributing

Any pull request, issue report and suggestion are highly welcome!

License

ISC License (functionality equivalent to MIT License)