Quick start
Integrate the SDK
Import the SDK
1
Add the SDK
Run the following code to add @zegocloud/zego-uikit-prebuilt-call-rn as dependencies.
yarn
yarn add @zegocloud/zego-uikit-prebuilt-call-rn
1
Note
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.
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
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
1
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.
Note
userID
andcallID
can only contain numbers, letters, and underlines (_).- Users that join the call with the same
callID
can talk to each other.
CallPage.js
import React from 'react';
import { View, StyleSheet } from 'react-native';
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,
onCallEnd: (callID, reason, duration) => { props.navigation.navigate('HomePage') },
}}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
zIndex: 0,
},
});
1
Configure your project
Run & Test
Note
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
yarn ios
1
Run on an Android device
yarn
yarn android
1
Related guide
Custom prebuilt UI
Refer this doc to make further customization.
Resources
Sample code
Click here to get the complete sample code.