How to Build Live Streams App With React Native

Live streams are 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 live streams app with react native.

Why ZEGOCLOUD for Live Streams App with React Native

Flutter Live Streaming Kit is a brand-new pre-built UIKits by ZEGOCLOUD. Through it, You can complete the development of the live streaming app within 10 minutes.

React Native Live Streams 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

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

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

Preparation

• 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

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"

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 (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="HomePage">
        <Stack.Screen name="HomePage" component={HomePage} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

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})}}/>
        </View>
    )
}

Implement Video Live Streaming

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

import ZegoUIKitPrebuiltLiveStreaming, { HOST_DEFAULT_CONFIG, AUDIENCE_DEFAULT_CONFIG} 
    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}}>
          <ZegoUIKitPrebuiltLiveStreaming
            appID={1234} // Your App ID
            appSign='yourAppSign'
            userID={randomUserID}
            userName={'user_'+randomUserID}
            liveID='testLiveID'

            config={{
                ...(isHost==true?HOST_DEFAULT_CONFIG:AUDIENCE_DEFAULT_CONFIG),
                onLeaveLiveStreaming: () => { props.navigation.navigate('HomePage') }
            }}
      />
    </View>
  )
}

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

Configure your live streams app project

Android:

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

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

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

iOS:

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

<key>NSCameraUsageDescription</key>
<string>We need to use the camera</string>
<key>NSMicrophoneUsageDescription</key>
<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.

Conclusion

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.