logo
Console
Call Kit
React Native: JS
Overview
Quick start
Quick start (with call invitation)
Calling config
Advanced Features
API Reference
Migration guide
Powered Byspreading
On this page

Call invitation config

Customize the call ringtone

First, you need to add the ringtone file to your project.

To set the call ringtone for receiving incoming call invitations or sending outgoing call invitations, you can use the ringtoneConfig in the ZegoUIKitPrebuiltCallService.init config parameter.

Here is the reference code:

With call invitation
import ZegoUIKitPrebuiltCallService, { ZegoSendCallInvitationButton } from '@zegocloud/zego-uikit-prebuilt-call-rn';
import * as ZIM from 'zego-zim-react-native';
import * as ZPNs from 'zego-zpns-react-native';

// LoginScreen
ZegoUIKitPrebuiltCallService.init(
    KeyCenter.appID,
    KeyCenter.appSign,
    userID,
    userName,
    [ZIM, ZPNs],
    {
        //\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/
        ringtoneConfig: {
            incomingCallFileName: 'zego_incoming.mp3',
            outgoingCallFileName: 'zego_outgoing.mp3',
        },
        ///\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\
        requireConfig: (data) => {
            const callConfig =
                data.invitees.length > 1
                    ? ZegoInvitationType.videoCall === data.type
                        ? GROUP_VIDEO_CALL_CONFIG
                        : GROUP_VOICE_CALL_CONFIG
                    : ZegoInvitationType.videoCall === data.type
                        ? ONE_ON_ONE_VIDEO_CALL_CONFIG
                        : ONE_ON_ONE_VOICE_CALL_CONFIG;
            return callConfig;
        },
        notifyWhenAppRunningInBackgroundOrQuit: true,
    },
)

// HomeScreen
<ZegoSendCallInvitationButton
    invitees={[{ userID: inviteeID, userName: inviteeName }]} // List of user object.
    isVideoCall={false}
    resourceID={"zegouikit_call"} // For offline call notification
/>
<ZegoSendCallInvitationButton
    invitees={[{ userID: inviteeID, userName: inviteeName }]} // List of user object.
    isVideoCall={true}
    resourceID={"zegouikit_call"} // For offline call notification
/>
1
Copied!

Hide the decline button

To hide the Decline button when receiving incoming call invitations, set the showDeclineButton to false.

Modify User Interface text

Call Kit (ZegoUIKitPrebuiltCallService)'s UI text provided by the internal components is editable, to modify those, use the innerText config.

The following are the supported properties in innerText:

  • incomingVideoCallDialogTitle
  • incomingVideoCallDialogMessage
  • incomingVoiceCallDialogTitle
  • incomingVoiceCallDialogMessage
  • incomingVideoCallPageTitle
  • incomingVideoCallPageMessage
  • incomingVoiceCallPageTitle
  • incomingVoiceCallPageMessage
  • incomingGroupVideoCallDialogTitle
  • incomingGroupVideoCallDialogMessage
  • incomingGroupVoiceCallDialogTitle
  • incomingGroupVoiceCallDialogMessage
  • incomingGroupVideoCallPageTitle
  • incomingGroupVideoCallPageMessage
  • incomingGroupVoiceCallPageTitle
  • incomingGroupVoiceCallPageMessage
  • outgoingVideoCallPageTitle
  • outgoingVideoCallPageMessage
  • outgoingVoiceCallPageTitle
  • outgoingVoiceCallPageMessage
  • incomingCallPageDeclineButton
  • incomingCallPageAcceptButton

Here is the reference code:

With call invitation
import ZegoUIKitPrebuiltCallService from '@zegocloud/zego-uikit-prebuilt-call-rn';
import * as ZIM from 'zego-zim-react-native';
import * as ZPNs from 'zego-zpns-react-native';

ZegoUIKitPrebuiltCallService.init(
    KeyCenter.appID,
    KeyCenter.appSign,
    userID,
    userName,
    [ZIM, ZPNs],
    {
        //\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/
        innerText: {
            incomingVideoCallDialogTitle: "%0",
            incomingVideoCallDialogMessage: "Incoming video call...",
        },
        ///\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\
        ringtoneConfig: {
            incomingCallFileName: 'zego_incoming.mp3',
            outgoingCallFileName: 'zego_outgoing.mp3',
        },
        requireConfig: (data) => {
            const callConfig =
                data.invitees.length > 1
                    ? ZegoInvitationType.videoCall === data.type
                        ? GROUP_VIDEO_CALL_CONFIG
                        : GROUP_VOICE_CALL_CONFIG
                    : ZegoInvitationType.videoCall === data.type
                        ? ONE_ON_ONE_VIDEO_CALL_CONFIG
                        : ONE_ON_ONE_VOICE_CALL_CONFIG;
            return callConfig;
        },
        notifyWhenAppRunningInBackgroundOrQuit: true,
        isIOSSandboxEnvironment: true,
        androidNotificationConfig: {
            channelID: "ZegoUIKit",
            channelName: "ZegoUIKit",
        },
    },
)
1
Copied!

Customize ZegoSendCallInvitationButton

You can customise the style of ZegoSendCallInvitationButton with the following parameters.

Here are the relevant attributes:

  • width: Button width
  • height: Button height
  • invitees: Invitees
  • isVideoCall: Video call or audio call
  • timeout: Default is 60s
  • onWillPressed: Callback of willPressed
  • onPressed: Callback of pressed
  • callID: Custom callID
  • icon: Button icon image
  • text: Button text
  • textColor: Button text color
  • fontSize: Button text size
  • backgroundColor: Button background color
  • borderRadius: Button corner radius
  • borderWidth: Button border width
  • borderColor: Button border color
  • borderStyle: Button border style
  • callName: The call name for waiting page
  • showWaitingPageWhenGroupCall: If true, show waiting page when start group invitation

Here is the reference code:

Untitled
<ZegoSendCallInvitationButton
  text={'Call'}
  icon={require('xxx.png')}
  width={200}
  height={50}
  textColor={'#DA1818'}
  backgroundColor={'#CFAAAA'}
  borderRadius={10}
  borderWidth={2}
  borderColor={'#0E0E0E'}
  borderStyle={'dotted'}
  fontSize={16}
  isVideoCall={false}
  resourceID={"zego_data"}
  callName={'Test Group'}
  showWaitingPageWhenGroupCall={true}
/>
1
Copied!

Customize CallID

As the caller, you can customize the CallID for the call invitation through the ZegoSendCallInvitationButton.

Here is the reference code:

Untitled
<ZegoSendCallInvitationButton
  invitees={invitees.map((inviteeID) => {
    return { userID: inviteeID, userName: 'user_' + inviteeID };
  })}
  isVideoCall={false}
  resourceID={"zego_data"}
  callID={'your_custom_call_id'}
/>
1
Copied!

Of course, you can obtain the current CallID through the following callback.

Here is the reference code:

Untitled
ZegoUIKitPrebuiltCallService.init(
  KeyCenter.appID,
  KeyCenter.appSign,
  userID,
  userName,
  [ZIM, ZPNs],
  {
    //\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/
    requireConfig: (data) => {
      const callID = data.callID;
    }
    //\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/
  }
);
1
Copied!

API for call invitation

sendCallInvitation

sendCallInvitation(invitees, isVideoCall, navigation, options)

  • invitees, a list of target users
  • isVideoCall, true or false
  • navigation, page navigation after invitation successful
  • options
    • resourceID, If you want to set a ringtone for offline call invitations, set resourceID to a value that matches the push resource ID in the ZEGOCLOUD management console.
    • timeout, call invitation timeout, default is 60.
    • notificationTitle, the title of call notification.
    • notificationMessage, the message of call notification.
    • callID, custom call id, if not provided, the system will generate one automatically based on certain rules.
    • customData, you can pass custom data to callees.

Here is the reference code:

Untitled
<Button title='Voice' onPress={() => {
  const newInvitees = invitees.map((inviteeID) => {
    return { userID: inviteeID, userName: 'user_' + inviteeID };
  });
  ZegoUIKitPrebuiltCallService
    .sendCallInvitation(
      newInvitees, 
      false, 
      props.navigation, 
      { 
        resourceID: 'zego_data', 
        timeout: 60,
        callID: '123456789',
        notificationTitle: 'Title',
        notificationMessage: 'Message',
        customData: '',
      }
    );
}} />
1
Copied!

Listen for call invitation event callbacks

You can implement further business logic by listening for event callbacks related to the call invitation.

The following are supported event callbacks:

  • onIncomingCallDeclineButtonPressed(navigation): This callback will be triggered when the Decline button is pressed (the callee declines the call invitation).
  • onIncomingCallAcceptButtonPressed(navigation): This callback will be triggered when the Accept button is pressed (the callee accepts the call invitation).
  • onOutgoingCallCancelButtonPressed(navigation, callID, invitees, type): This callback will be triggered when the Cancel button is pressed (the caller cancels the call invitation).
  • onIncomingCallReceived(callID, inviter, type, invitees, customData): This callback will be triggered when receiving call invitations.
  • onIncomingCallCanceled(callID, inviter): This callback will be triggered when the caller cancels the call invitation.
  • onOutgoingCallAccepted(callID, invitee): The caller will receive a notification through this callback when the callee accepts the call invitation.
  • onOutgoingCallRejectedCauseBusy(callID, invitee): The caller will receive a notification through this callback when the callee rejects the call invitation (the callee is busy).
  • onOutgoingCallDeclined(callID, invitee): The caller will receive a notification through this callback when the callee declines the call invitation actively.
  • onIncomingCallTimeout(callID, inviter): The callee will receive a notification through this callback when the callee doesn't respond to the call invitation after a timeout duration.
  • onOutgoingCallTimeout(callID, invitees): The caller will receive a notification through this callback when the call invitation didn't get responses after a timeout duration.

Here is the reference code:

With call invitation
import ZegoUIKitPrebuiltCallService from '@zegocloud/zego-uikit-prebuilt-call-rn';
import * as ZIM from 'zego-zim-react-native';
import * as ZPNs from 'zego-zpns-react-native';

ZegoUIKitPrebuiltCallService.init(
    KeyCenter.appID,
    KeyCenter.appSign,
    userID,
    userName,
    [ZIM, ZPNs],
    {
        //\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/
        onIncomingCallReceived: (callID, inviter, type, invitees) => {
            console.log('Incoming call: ', callID, inviter, type, invitees)
        },
        ///\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\
        ringtoneConfig: {
            incomingCallFileName: 'zego_incoming.mp3',
            outgoingCallFileName: 'zego_outgoing.mp3',
        },
        requireConfig: (data) => {
            const callConfig =
                data.invitees.length > 1
                    ? ZegoInvitationType.videoCall === data.type
                        ? GROUP_VIDEO_CALL_CONFIG
                        : GROUP_VOICE_CALL_CONFIG
                    : ZegoInvitationType.videoCall === data.type
                        ? ONE_ON_ONE_VIDEO_CALL_CONFIG
                        : ONE_ON_ONE_VOICE_CALL_CONFIG;
            return callConfig;
        },
        notifyWhenAppRunningInBackgroundOrQuit: true,
        isIOSSandboxEnvironment: true,
        androidNotificationConfig: {
            channelID: "ZegoUIKit",
            channelName: "ZegoUIKit",
        },
    },
)
1
Copied!

Call End Event

If you want to receive relevant callbacks when a call ends, you can use onCallEnd.

  • onCallEnd(callID, reason, duration)

The reason for call end:

  • 0: the call ends due to a local hang-up.
  • 1: the call ends when the remote user hung up, leaving only one local user in the call.
  • 2: the call ends because the local user is kicked out or the room is ended.

Here is the reference code:

With call invitation
import ZegoUIKitPrebuiltCallService from '@zegocloud/zego-uikit-prebuilt-call-rn';
import * as ZIM from 'zego-zim-react-native';
import * as ZPNs from 'zego-zpns-react-native';

ZegoUIKitPrebuiltCallService.init(
    KeyCenter.appID,
    KeyCenter.appSign,
    userID,
    userName,
    [ZIM, ZPNs],
    {
        ringtoneConfig: {
            incomingCallFileName: 'zego_incoming.mp3',
            outgoingCallFileName: 'zego_outgoing.mp3',
        },
        requireConfig: (data) => {
        //\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/
            onCallEnd: (callID, reason, duration) => {
                console.log('########CallWithInvitation onCallEnd', callID, reason, duration);
                props.navigation.navigate('HomeScreen');
            },
        ///\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\
        },
        notifyWhenAppRunningInBackgroundOrQuit: true,
        isIOSSandboxEnvironment: true,
        androidNotificationConfig: {
            channelID: "ZegoUIKit",
            channelName: "ZegoUIKit",
        },
    },
)
1
Copied!

Customize the call waiting page view

If you want to customize the call waiting page, you can use waitingPageConfig for relevant configurations.

The waitingPageConfig has the following parameters available for configuration:

  1. backgroundColor: Use this to set the backgroundColor of waiting page.
  2. avatarBuilder(invitee): Use this to customize the avatar of the invitee.
  3. hangupBuilder: Use this to customize the hangup button.
  4. nameBuilder(userName): Use this to customize the name of the invitee.
  5. stateBuilder: Use this to customize the state of the page.
  6. switchCameraBuilder: Use this to customize the switch camera button.
  7. backgroundBuilder(invitee, isVideoCall): Use this to customize the background of the waiting page.

Here is the reference code:

Untitled
import React, { Component } from 'react';
import ZegoUIKitPrebuiltCallService, { ONE_ON_ONE_VIDEO_CALL_CONFIG } from '@zegocloud/zego-uikit-prebuilt-call-rn';
import { ZegoLayoutMode } from '@zegocloud/zego-uikit-rn'
import * as ZIM from 'zego-zim-react-native';
import * as ZPNs from 'zego-zpns-react-native';

ZegoUIKitPrebuiltCallService.init(
    KeyCenter.appID,
    KeyCenter.appSign,
    userID,
    userName,
    [ZIM, ZPNs],
    {
        ringtoneConfig: {
            incomingCallFileName: 'zego_incoming.mp3',
            outgoingCallFileName: 'zego_outgoing.mp3',
        },
        //\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/
        waitingPageConfig: {
          backgroundColor: 'skyblue',
          avatarBuilder: (invitee) => {
            return <View style={{width: 100, height: 100}}>
             <Image 
              style={{ width: '100%', height: '100%' }}
              resizeMode="cover"
              source={{ uri: `https://robohash.org/${invitee.userID}.png` }}
              />
            </View>
          },
          hangupBuilder:() => {
            // ...
          },
          nameBuilder: (userName) => {
            // ...
          },
          stateBuilder: () => {
            // ...
          },
          switchCameraBuilder: () => {
            // ...
          },
          backgroundBuilder: (invitee, isVideoCall) => {
            // ...
          },
        },
        ///\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\
    },
)
1
Copied!

On this page

Back to top