Quick start

Integrate the SDK

Import the SDK

1. Add @zegocloud/zego-uikit-prebuilt-call-rn as dependencies.

yarn add @zegocloud/zego-uikit-prebuilt-call-rn

npm install @zegocloud/zego-uikit-prebuilt-call-rn

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

// 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:

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

• Run on an iOS device:

yarn ios

npm run ios

• Run on an Android device:

yarn android

npm run android

Related guide

Custom prebuilt UI

Resources