How To Build Live Streams App With React Native
Tags: webdev, zegocloud, livestreaming, appwritehack
Published: 2022-11-22 04:10:20

**

## How To Build Live Streams App With React Native
**

It might be challenging to record and transmit a live feed from your app, especially if you want to do so with little to no latency for a global audience. When one or more persons are streaming their feeds to a large audience worldwide, the ZEGOCLOUD Live Streaming Kit SDK is ideal for providing low-latency communications with reliability.
**
Introduction to React Native Live Streaming Kit**

[Flutter Live Streaming Kit](https://www.zegocloud.com/product/live-streaming) is a brand-new pre-built UIKits by ZEGOCLOUD. Through it, You can complete the development of a live-stream app within 10 minutes.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k5oe01az32cmfo7zkl0s.png)

As shown in the figure, React Native Live Streaming Kit handles all the logic and UI of the live streams 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](https://console.zegocloud.com/account/signup)
React Native 0.60.0 or later
Basic understanding of React Native development

**Implement live video streams**

**Create Project**

Run the following code to create a new project.

npx react-native init live_streaming 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fkdmh0zmhq19dyk2g2kr.png)
**
Add ZegoUIKitPrebuiltLiveStreaming as a dependency**

Add the following dependencies in package.json

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x2cu2c1ncce900xodebp.png)

**Add live Streams Button
**
For the convenience of demonstration, I have added two buttons for creating live streams and joining live streams. In your application, you need to add the entrance for creating live streams for the host and the entry for joining live streams for viewers.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/flnmd7mf500kp1vkfh29.png)

**Implement Video Live Streaming**

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/swa17e23uzfy45gk5uqk.png)

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

**Configure your project**

**Android:**

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lhxgydz2v9sqefga35xz.gif)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9fq0fzygkr4mchxk7cj6.png)

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

**iOS:**

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g04fiquytcyuxe2y8oy9.gif)

<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](https://www.youtube.com/watch?v=TXoIJXTGjEA)**

**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 as well as 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.

Take action now, You can download the [sample demo source code](https://github.com/DavidReloo/live_streaming_kit_demo_react_native) of this article., or consult us [24h technical support](https://www.zegocloud.com/developers/support).