Call Kit
  • iOS
  • Android
  • Web
  • Flutter
  • React Native : JavaScript
  • Overview
  • Quick start
    • Quick start
    • Quick start (with call invitation)
  • Customize the call
    • Overview
    • Set avatar for users
    • Add custom components to the call
    • Configure layouts
    • Hide the label on the user view
    • Implement an audio-only call
    • Customize the menu bar
    • Set a hangup confirmation dialog
    • Call invitation config
    • Calculate call duration
  • Enhance the call
    • Minimize video call window
    • Use Tokens for authentication
    • Adaptive mobile rotation
  • API Reference
    • API
    • Event
  • Migration guide
  • Documentation
  • Call Kit
  • Quick start
  • Quick start

Quick start

Last updated:2023-11-10 18:18

Integrate the SDK

Import the SDK

  1. Add @zegocloud/zego-uikit-prebuilt-call-rn as dependencies.
yarn npm
yarn add @zegocloud/zego-uikit-prebuilt-call-rn
npm install @zegocloud/zego-uikit-prebuilt-call-rn
  1. Add other dependencies.

Run the following command to install other dependencies for making sure the @zegocloud/zego-uikit-prebuilt-call-rn can work properly:

yarn npm
yarn add @zegocloud/zego-uikit-rn react-delegate-component zego-express-engine-reactnative@3.2.0 react-native-sound @notifee/react-native@5.3.0 react-native-keep-awake@4.0.0
npm install @zegocloud/zego-uikit-rn react-delegate-component zego-express-engine-reactnative@3.2.0 react-native-sound @notifee/react-native@5.3.0 react-native-keep-awake@4.0.0

Using the ZegoUIKitPrebuiltCall Component in your project

  • Go to ZEGOCLOUD Admin Console, get the appID and appSign of your project.
  • Specify the userID and userName for connecting the Call Kit service.
  • Create a callID that represents the call you want to make.
  • userID and callID can only contain numbers, letters, and underlines (_).
  • Users that join the call with the same callID can talk to each other.
// App.js
import React, { Component } from 'react';
import {ZegoUIKitPrebuiltCall, ONE_ON_ONE_VIDEO_CALL_CONFIG } from '@zegocloud/zego-uikit-prebuilt-call-rn'

export default function VoiceCallPage(props) {
    return (
        <View style={styles.container}>
            <ZegoUIKitPrebuiltCall
                appID={yourAppID}
                appSign={yourAppSign}
                userID={userID} // userID can be something like a phone number or the user id on your own user system. 
                userName={userName}
                callID={callID} // callID can be any unique string. 

                config={{
                    // You can also use ONE_ON_ONE_VOICE_CALL_CONFIG/GROUP_VIDEO_CALL_CONFIG/GROUP_VOICE_CALL_CONFIG to make more types of calls.
                    ...ONE_ON_ONE_VIDEO_CALL_CONFIG,
                    onOnlySelfInRoom: () => { props.navigation.navigate('HomePage') },
                    onHangUp: () => { props.navigation.navigate('HomePage') },
                }}
            />
        </View>
    );
}

Configure your project

  • Android:
  1. Open the my_project/android/app/src/main/AndroidManifest.xml file and add the following:
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.BLUETOOTH" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.WAKE_LOCK" />
<uses-permission android:name="android.permission.VIBRATE"/>
  1. Open the my_project/android/app/proguard-rules.pro file and add the following:
-keep class **.zego.**  { *; }
  • iOS:

Open the my_project/ios/my_project/Info.plist file and add the following:

<key>NSCameraUsageDescription</key>
<string>We need to use the camera</string>
<key>NSMicrophoneUsageDescription</key>
<string>We need to use the microphone</string>

Run & Test

If your device is not performing well or you found a UI stuttering, run in Release mode for a smoother experience.

  • Run on an iOS device:
yarn npm
yarn ios
npm run ios
  • Run on an Android device:
yarn npm
yarn android
npm run android

Custom prebuilt UI

Resources

Page Directory