Quick start

If you have any questions regarding bugs and feature requests, visit the ZEGOCLOUD community .

Integrate the SDK

Import the SDK

Add @zegocloud/zego-uikit-prebuilt-live-streaming-rn as dependencies

yarn add @zegocloud/zego-uikit-prebuilt-live-streaming-rn 

Add other dependencies

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

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

Using the ZegoUIKitPrebuiltLiveStreaming Component in your project

• Go to ZEGOCLOUD Admin Console|_blank, get the appID and appSign of your project.
• Specify the userID and userName for connecting the LiveStreaming Kit service.
• Create a liveID that represents the live streaming you want to make.

• userID and callID can only contain numbers, letters, and underlines (_).
• Using the same liveID will enter the same live streaming.

// HostPage.js
import React from 'react';
import { StyleSheet, View } from 'react-native';
import ZegoUIKitPrebuiltLiveStreaming, { HOST_DEFAULT_CONFIG } from '@zegocloud/zego-uikit-prebuilt-live-streaming-rn'

export default function HostPage(props) {
    return (
        <View style={styles.container}>
            <ZegoUIKitPrebuiltLiveStreaming
                appID={yourAppID}
                appSign={yourAppSign}
                userID={userID}
                userName={userName}
                liveID={liveID}

                config={{
                    ...HOST_DEFAULT_CONFIG,
                    onLeaveLiveStreaming: () => {
                        // If you're using React Navigation 6, use the navigate method instead of popTo.
                        props.navigation.popTo('HomePage')
                    }
                }}
            />
        </View>
    );
}

Configure your project

• Android:

Open my_project/android/app/src/main/AndroidManifest.xml file and add the code as follow:

<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.CAMERA" />

• iOS:

Open my_project/ios/my_project/Info.plist file and add the code as follow:

<key>NSCameraUsageDescription</key>
<string></string>
<key>NSMicrophoneUsageDescription</key>
<string></string>

Run & Test

• Run on an iOS device:

yarn android

• Run on an Android device:

yarn ios

Related guide

Custom prebuilt UI

Sample code