Are you ready to dive into the exciting world of mobile app development with React Native?
This tutorial will guide beginners in creating their first React Native app. With React Native, you can bring your web development skills to the world of native mobile apps, creating sleek and efficient applications for both Android and iOS.
What Is React Native?
React Native is a powerful and cost-effective framework for building native mobile apps. It is a popular JavaScript framework that allows developers to build native mobile apps for Android and iOS platforms. Developed by Facebook in 2015, it has become a go-to choice for many developers and organizations.
One significant advantage of React Native is that it allows developers to use familiar tools and languages, such as JavaScript and React, to build native apps. This can be especially beneficial for those with a background in web development, as it simplifies the transition to mobile development.

Why Should You Learn React Native
If you are considering learning React Native for your next mobile development project, here are some of the reasons why it may be a good option:
Widely adopted by developers and organizations
React Native has existed since 2015 and has gained widespread adoption among developers and organizations worldwide. This means a large and active community of developers who can help you along the way and a wide range of resources available to learn from.
Build native apps using familiar tools.
One of the significant benefits of React Native is that it allows developers to build native mobile apps using familiar tools and languages like JavaScript and React. This means that developers with a background in web development can easily transition to building mobile apps, increasing efficiency and productivity.
Cost-effective solution
Building native mobile apps can be a time-consuming and expensive process. React Native offers a cost-effective solution, allowing developers to build native apps using a single codebase, which can be a significant time-saver.
Strong performance
React Native apps have strong performance and are comparable to native apps built using platform-specific languages. This means that you can create high-quality, performant apps using React Native.
How to Build Your First React Native App
Whether you are a seasoned developer or just getting started, this tutorial will provide the foundation to build your first React Native app using ZEGOCLOUD API.
Why ZEGOCLOUD API for React Native Apps
ZEGOCLOUD is a cloud-based platform that offers a range of tools and services for video chat, voice chat, app chat, and live streaming. With these tools, you can easily add real-time communication capabilities to your React Native app, whether for one-on-one video calls, group video conferences, live streaming events, or in-app chat.
ZEGOCLOUD features
Here are the features of ZEGOCLOUD as a real-time communication provider:
- Video conferencing: ZEGOCLOUD offers a range of video conferencing tools, including support for one-on-one and group calls, screen sharing, and whiteboarding.
- Voice calls: The platform includes tools for high-quality voice calls, including support for call forwarding and voicemail.
- Chat: ZEGOCLOUD offers in-app chat capabilities, including group chat and messaging support.
- Live streaming: The platform includes tools for live streaming, including support for real-time interactions and engagement.
- SDKs and APIs: ZEGOCLOUD offers SDKs and APIs to seamlessly integrate its real-time communication tools into your applications.
- Customization options: The platform includes various customization options, including customizing branding and the user interface.

ZEGOCLOUD pricing typically starts at $0.99 per 1000 minutes, but don’t miss out on our special offer – sign up now and get 10,000 free minutes every month.
How to Build React Native Apps With ZEGOCLOUD
Ready to start building your react native application for video chat with ZEGOCLOUD? Here’s how to get your app credentials:
Getting app credentials:
1. First, sign up for a ZEGOCLOUD developer account.

2. Once you’ve signed up, go to the ZEGOCLOUD admin console and create a new project.

3. When creating your project, select the appropriate app use case – in this case, we recommend selecting “video and voice” for a video call app.

4. Enter a name for your project, choose UIKit, and wait for the build process to complete.


5. Next, select the platform for your app – if you’re building a React Native app, be sure to choose that option.

6. Finally, copy your credentials from the project files. With these credentials, you can integrate ZEGOCLOUD into your app.

Creating a React Native app:
- Install Expo CLI
npm install -g expo-cli
- Create a new project
expo init video-call
- Install dependencies and start the development server
cd video-call
expo start
Integrating and using ZEGOCLOUD:
- Install the package: You can install the package using either Yarn or npm. For Yarn, run the following command:
yarn add @zegocloud/zego-uikit-prebuilt-call-rn
For npm, run the following command:
npm install @zegocloud/zego-uikit-prebuilt-call-rn
- Install other dependencies: To ensure that
@zegocloud/zego-uikit-prebuilt-call-rn
can work properly, you will need to install some additional dependencies.
yarn add @zegocloud/zego-uikit-rn react-delegate-component zego-express-engine-reactnative
For npm, run the following command:
npm install @zegocloud/zego-uikit-rn react-delegate-component zego-express-engine-reactnative
- Locate the
app.js
file and add the following codes inside it, and replace theappID
andappSign
parameters with the credentials we got initially.
// App.js
import React, { Component } from 'react';
import ZegoUIKitPrebuiltCall, { ONE_ON_ONE_VIDEO_CALL_CONFIG } from '@zegocloud/zego-uikit-prebuilt-call-rn'
export default function VoiceCallPage(props) {
return (
<View style={styles.container}>
<ZegoUIKitPrebuiltCall
appID={yourAppID}
appSign={yourAppSign}
userID={userID} // userID can be something like a phone number or the user id on your own user system.
userName={userName}
callID={callID} // callID can be any unique string.
config={{
// You can also use ONE_ON_ONE_VOICE_CALL_CONFIG/GROUP_VIDEO_CALL_CONFIG/GROUP_VOICE_CALL_CONFIG to make more types of calls.
...ONE_ON_ONE_VIDEO_CALL_CONFIG,
onOnlySelfInRoom: () => { props.navigation.navigate('HomePage') },
onHangUp: () => { props.navigation.navigate('HomePage') },
}}
/>
</View>
);
}
Configure your project (Android):
- Add the following to the
[project]/android/app/src/main/AndroidManifest.xml
file:
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.CAMERA" />
- Add the following to the
[project]/android/app/proguard-rules.pro
file:
-keep class **.zego.** { *; }
Configure your project (iOS):
- Add the following to the
[projec]t/ios/my project/Info.plist
file:
<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
Conclusion
Congratulations! You have successfully completed this tutorial on creating a React Native app. Now you have the skills and knowledge to build your mobile apps using this robust framework.
Build great real-time React Native applications with ZEGOCLOUD by checking out our demo sample source code.
If the need for support and inquiries arises, please contact our technical support team.
Read More
Talk to Expert
Learn more about our solutions and get your question answered.