How to Create React Native App [ Beginners]

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 call, 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 the appID and appSign 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.plistfile:

<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.