Quick start
Integrate the SDK
Import the SDK
Add the SDK
Run the following code to add @zegocloud/zego-uikit-prebuilt-call-rn as dependencies.
yarn add @zegocloud/zego-uikit-prebuilt-call-rn
Our SDK does not support the Expo framework. Some features of the SDK require to modify the native layer, which the Expo framework does not support. It is recommended to integrate the SDK with a standard react native project.
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 react-native-sound react-native-keep-awake@4.0.0 react-native-screens react-native-safe-area-context react-native-encrypted-storage react-native-device-info
Using the ZegoUIKitPrebuiltCall Component in your project
- Go to ZEGOCLOUD Admin Console, get the
appID
andappSign
of your project. - Specify the
userID
anduserName
for connecting the Call Kit service. - Create a
callID
that represents the call you want to make.
userID
andcallID
can only contain numbers, letters, and underlines (_).- Users that join the call with the same
callID
can talk to each other.
import React from 'react';
import { View, StyleSheet } from 'react-native';
// !mark
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}>
// !mark(1:14)
<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,
onCallEnd: (callID, reason, duration) => { props.navigation.navigate('HomePage') },
}}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
zIndex: 0,
},
});
Configure your project
Open the my_project/android/app/proguard-rules.pro
file and add the following:

-keep class **.zego.** { *; }
-keep class com.hiennv.flutter_callkit_incoming.SharedPreferencesUtils* {*;}
-keep class com.fasterxml.jackson.** {*;}
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.
yarn ios
yarn android
Related guide
Refer this doc to make further customization.
Resources
Click here to get the complete sample code.