Quick start

Integrate the SDK

1. Import the SDK

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

   yarn

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

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

   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:

   yarnnpm

   yarn

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

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

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';
   // !mark
   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}>
   // !mark(1:11)
               <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'
       },
   });

   App.js

   import React, { Component } from 'react';
   // !mark
   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}>
   // !mark(1:11)
               <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'
       },
   });

Configure your project

Android

1. Open the my_project/android/app/src/main/AndroidManifest.xml file and add the following:

AndroidManifest.xml

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

AndroidManifest.xml

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

2. Open my_project/android/app/proguard-rules.pro file and add the following:

proguard-rules.pro

-keep class **.zego.**  { *; }

proguard-rules.pro

-keep class **.zego.**  { *; }

iOS

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

Info.plist

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

Info.plist

<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

yarn ios

• Run on an Android device:

yarn android

yarn android

Related guide

Custom Prebuilt UI

Resources

Click here to get the complete sample code.