How to Create a React Native Live Streaming App

Building a React Native live streaming app is an exciting venture. This guide will walk you through the process of creating a dynamic and engaging app that can reach a wide audience. We'll cover essential steps, from setting up your development environment to integrating live streaming functionalities. Whether you're a seasoned developer or just starting out, this comprehensive tutorial will provide clear instructions and valuable insights to help you bring your live streaming app to life.

How to Build a Live Streaming App with React Native

Ready to create your live streaming app? This section is all you need. We'll show you how to leverage ZEGOCLOUD's powerful Live Streaming Kit to simplify development.

ZEGOCLOUD offers two options to fit your needs:

• Pre-built UIKits: Get started quickly with pre-built components that handle the core streaming functionality and user interface. This allows you to focus on crafting a unique user experience without reinventing the wheel.

• Highly Customizable Live Streaming SDK: For ultimate control, ZEGOCLOUD also provides a 100% customizable live streaming SDK.

Prerequisites:

• A ZEGOCLOUD developer account - Sign up
• Have NodeJS installed
• Basic knowledge of React Native development

If you’ve met the requirements below or are ready to do so as we progress with the other section of the article, follow the steps below to enable live streaming in React Native:

1. Integrate the SDK

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

To start integrating the ZEGOCLOUD SDK into your React Native project, first add the primary SDK dependency. Open your terminal and run:

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

b. Add other dependencies:

The primary SDK has several dependencies that need to be installed for it to work correctly. Install these by running the following command in your terminal:

yarn add @zegocloud/zego-uikit-rn react-delegate-component zego-express-engine-reactnative@3.14.5 @react-navigation/native @react-navigation/native-stack react-native-screens react-native-safe-area-context

2. Getting App Credentials

a. Obtain credentials from ZEGOCLOUD admin console:

Go to the ZEGOCLOUD Admin Console.

Create a project and retrieve the appID and appSign of your project.

Specify the userID and userName for connecting to the LiveStreaming Kit service.

Create a liveID that represents the live streaming you want to initiate.

Note:

• userID and liveID can only contain numbers, letters, and underscores (_).
• Using the same liveID will enter the same live streaming session.
• With the same liveID, only one user can enter the live stream as a host. Other users will join as the audience.

3. Implement the HostPage Component

Create a file named HostPage.js in the src directory of your project and add the following code:

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) {
    const yourAppID = 'YourAppID'; // Replace with your actual appID
    const yourAppSign = 'YourAppSign'; // Replace with your actual appSign
    const userID = 'YourUserID'; // Replace with your actual userID
    const userName = 'YourUserName'; // Replace with your actual userName
    const liveID = 'YourLiveID'; // Replace with your actual liveID

    return (
        <View style={styles.container}>
            <ZegoUIKitPrebuiltLiveStreaming
                appID={yourAppID}
                appSign={yourAppSign}
                userID={userID}
                userName={userName}
                liveID={liveID}
                config={{
                    ...HOST_DEFAULT_CONFIG,
                    onLeaveLiveStreaming: () => { props.navigation.navigate('HomePage') }
                }}
            />
        </View>
    );
}

const styles = StyleSheet.create({
  container: {
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center',
      zIndex: 0,
  }
});

This HostPage component sets up a live streaming session using ZEGOCLOUD's prebuilt UI kit. It configures necessary credentials, centers the live stream UI, and navigates back to the home page when the user leaves the stream.

4. Configure Your Project

a. Android configuration

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

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

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

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

b. iOS Configuration

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

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

5. Run and Test Your App

a. To run the app on an iOS device, open your terminal and execute:

yarn ios

b. To run the app on an Android device, open your terminal and execute:

yarn android

Note: If your device is not performing well or you experience UI stuttering, try running the app in Release mode for a smoother experience.

Conclusion

Creating a live streaming app with React Native is now within reach. This guide has equipped you with the essential steps and tools to build a dynamic and engaging platform. By following these instructions and leveraging the power of ZEGOCLOUD, you can create a live streaming experience that captivates your audience. With this knowledge, you're ready to turn your live streaming vision into reality.