Talk to us
Talk to us

How to Build Live Streaming Apps With React Native

How to Build Live Streaming Apps With React Native

Live streaming is a popular way to deliver content to audiences. It might be challenging to record and transmit live streaming from your app. Especially when you do so with little to no latency for a global audience. ZEGOCLOUD Live Streams Kit SDK is ideal if you are wondering how to make a React Native live streaming app.

Why ZEGOCLOUD SDK for React Native Live Streaming

ZEGOCLOUD provides a cloud-based live streaming service that provides developers with a suite of APIs and SDKs to easily integrate live streaming capabilities into their applications with React Native. Its live streaming service offers a range of features including low latency, high-definition video, real-time interaction, and cross-platform support.

ZEGOCLOUD live streaming API also supports a wide range of platforms including iOS, Android, and the web, making it a versatile solution for developers. Moreover, it provides pre-built UIKits that include a live streaming kit, which is a low-code live streaming SDK to allow developers to complete the development of the live streaming app within 10 minutes.

React Native Live Streaming Kit handles all the logic and UI of the streaming function. Include:

  • UI and interaction of the video live Streaming module
  • Message sending and display
  • Audio and video data transmission
  • Camera and microphone management
  • Live Viewer Statistics
live streaming kit

You only need to implement business-related logic. For example:

  • User login registration
  • Live List Management
  • Top up and send gifts, etc.


  • A ZEGOCLOUD developer account–Sign up
  • React Native 0.60.0 or later
  • Basic understanding of React Native development

How to Implement Video Live Streams with React Native

Create Project

Run the following code to create a new project.

npx react-native init live_streaming
create project

Set ZegoUIKitPrebuiltLiveStreaming as a dependency

Add the following dependencies in package.json

"@react-navigation/native": "^6.0.13",
"@react-navigation/native-stack": "^6.9.1",
"@zegocloud/zego-uikit-prebuilt-live-streaming-rn": "1.0.7",
"@zegocloud/zego-uikit-rn": "^1.2.0",
"react-delegate-component": "^1.0.0",
"react-native-gesture-handler": "^2.8.0",
"react-native-safe-area-context": "^4.4.1",
"react-native-screens": "^3.18.2",
"react-navigation": "^4.4.4",
"zego-express-engine-reactnative": "^3.0.1"
add sdk as dependencies

Live Streams Button

For the convenience of demonstration, I have added two buttons for creating live streamings and joining them. In your application, you need to add the entrance for creating it, for the host, and for joining live streaming for viewers.

import { NavigationContainer, useNavigation} from '@react-navigation/native';
import React from "react";
import { Button, View} from 'react-native'
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();
export default function App() {
  return (
      <Stack.Navigator initialRouteName="HomePage">
        <Stack.Screen name="HomePage" component={HomePage} />

function HomePage(props) {
    const navigation = useNavigation();
    return (
        <View style={{flex: 1,alignItems: 'center',justifyContent: 'space-around'}}>
            <Button title="Start a live" onPress={()=>{navigation.navigate('LivePage',{isHost:true})}}/>
            <Button title="Watch a live" onPress={()=>{navigation.navigate('LivePage',{isHost:false})}}/>
add live streaming button

Implement Video Live Streaming

Next, we need to build a live streams page using ZegoUIKitPrebuiltLiveStreaming.

    from '@zegocloud/zego-uikit-prebuilt-live-streaming-rn'

function LivePage(props) {
  randomUserID = String(Math.floor(Math.random() * 100000))
  isHost = props.route.params.isHost;
  return (
      <View style={{flex: 1}}>
            appID={1234} // Your App ID

                onLeaveLiveStreaming: () => { props.navigation.navigate('HomePage') }

Now, you can create a new live streaming or watch one by navigating to this live page.

Configure your live streams app project


  1. Open the my_project/android/app/src/main/AndroidManifest.xml file and add the following:
<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" />
  1. Open the my_project/android/app/ file and add the following:
configure your project
-keep class **.zego.**  { *; }


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

<string>We need to use the camera</string>
<string>We need to use the microphone</string>

Run a Demo

Take action now! You can download this article’s sample demo source code for live streams appwith react native.


The market for live streams is expanding yearly. Real-time communication via streams is getting more popular. This tendency was driven by the epidemic and internet musical performances and events. There are many application cases, such as in education and healthcare. It means that creating an application for live streaming is worth trying.

Talk to Expert

Learn more about our solutions and get your question answered.

Talk to us

Take your apps to the next level with our voice, video and chat APIs

Free Trial
  • 10,000 minutes for free
  • 4,000+ corporate clients
  • 3 Billion daily call minutes

Stay updated with us by signing up for our newsletter!

Don't miss out on important news and updates from ZEGOCLOUD!

* You may unsubscribe at any time using the unsubscribe link in the digest email. See our privacy policy for more information.