Quick start

Integrate the SDK

1. Import the SDK

   1. Add the @zegocloud/zego-uikit-prebuilt-video-conference-rn as dependencies.
   yarn

   npm

   yarn add @zegocloud/zego-uikit-prebuilt-video-conference-rn
   

   1

   Copied!

   npm install @zegocloud/zego-uikit-prebuilt-video-conference-rn
   

   1

   Copied!
   2. Add other dependencies.

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

   yarn

   npm

   yarn add @zegocloud/zego-uikit-rn react-delegate-component zego-express-engine-reactnative@3.14.5
   

   1

   Copied!

   npm install @zegocloud/zego-uikit-rn react-delegate-component zego-express-engine-reactnative@3.14.5
   

   1

   Copied!

2. Using the ZegoUIKitPrebuiltVideoConference 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 Video Conference Kit service.
   • Create a conferenceID that represents the video conference you want to start.
   Note

   • userID and conferenceID can only contain numbers, letters, and underlines (_).
   • Using the same conferenceID will enter the same video conference.
   App.js

   import React, { Component } from 'react';
   import ZegoUIKitPrebuiltVideoConference from '@zegocloud/zego-uikit-prebuilt-video-conference-rn'
   import { StyleSheet, View } from 'react-native';
   
   export default function VideoConferencePage(props) {
       return (
           <View style={styles.container}>
               <ZegoUIKitPrebuiltVideoConference
                   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}
                   conferenceID={conferenceID} // conferenceID can be any unique string. 
   
                   config={{
                       onLeave: () => { props.navigation.navigate('HomePage') },
                   }}
               />
           </View>
       );
   }
   
   const styles = StyleSheet.create({
       container: {
           flex: 1,
           justifyContent: 'flex-start',
           alignItems: 'flex-start'
       },
   });
   

   1

   Copied!

Configure your project

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

Click here to get the complete sample code.