Build Your Video Call App With React Native UIKit
Tags: uikits, dev, apps, zegocloud
Published: 2022-11-14 08:24:22


As 5G networks become widely used, people usually communicate via social media and messaging apps. Today, even the most minor software systems have simple video call functions, enabling users to communicate directly.
Have you considered creating a WhatsApp-like real-time video call app?
In this article, I will tell you exactly how to build a Video Call app using the ***React Native UIKit**** *SDK.

Specifically, we will implement the following functions:
* 1v1 video call
* Camera switching
* Microphone, and speaker management

**Introduction to React Native UIKit SDK**

React Native UIKit SDK is a brand-new pre-built UIKits and UI Component by ZEGOCLOUD. Through it, we can develop video calls, live-streaming, video conference, and other scenarios within 10 minutes.


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

As shown in the figure, React Native UIKit SDK is responsible for processing audio and video calls and the logic related to text chat, including:

* UI and interaction of the calling module
* call status management
* Audio and video data transmission

You only need to implement business-related logic, such as:

* User login registration
* Friends List Management
* Call billing recharge

**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 Video Call

**Create Project**
**First, You need to run the following code to create a new project.**

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

**Add React Native UIKit SDK dependencies.**
Next, you need to open the package.json file in the root directory and add the React Native UIKit SDK dependencies.


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

**Add a call button**

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vvuncxxt8rfh82dbjsbf.png)
**
Add Video Call page**
Use ZegoUIKitPrebuiltCall to easily build a Call page


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

Now, you can make a new call by navigating to this CallPage.

**Add Device permission**
Android:
Open the my_project/android/app/src/main/AndroidManifest.xml file and add the permission:

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

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

Open the my_project/android/app/proguard-rules.pro file and add the following:
-keep class **.zego.**  { *; }


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

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/hypdkqohg3stg1rsvwv3.png)


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

**Run a demo**
https://www.youtube.com/watch?v=HDJAJ2trrxc

## Conclusion
Thanks to a rising need for more reliable and dynamic communication, video streaming apps' growth appears to continue. As a result, plenty of businesses concentrated on creating social apps, video conferencing, and video calling.

You can download the [sample demo source code](https://github.com/DavidReloo/call_kit_demo_react_native) of this article.

You can use our [Core SDK](https://www.zegocloud.com/developers/sdks) if you have deeper requirements, such as streaming mix, noise reduction, censorship, etc.

If you have any questions, you can always consult us [24h technical support](https://www.zegocloud.com/developers/support).