React Native CallKit 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-callkeep

• iOS
• Android

import 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: Object
  • ios: 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
  • android: object
    • alertTitle: string (required) When asking for phone account permission, we need to provider a title for the Alert to ask the user for it
    • alertDescription: string (required) When asking for phone account permission, we need to provider a description for the Alert to ask the user for it
    • cancelButton: string (required) Cancel button label
    • okButton: 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 uuid that should be stored and re-used for stopCall.
• 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)
  • generic
  • number (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, number);

• uuid: string
  • An uuid that should be stored and re-used for stopCall.
• handle: string
  • Phone number of the callee
• handleType: string (optional, iOS only)
  • generic
  • number (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 uuid used for startCall or displayIncomingCall

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

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();

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 setup each time you want to use callKeep.

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