Talk to us
Talk to us
menu

How to Create a React Native App

How to Create a React Native App

Are you eager to embark on an exhilarating journey into mobile app development using React Native? This comprehensive tutorial is tailored for beginners, guiding you step-by-step in crafting your very first React Native application. Leveraging React Native, you have the unique opportunity to apply your web development expertise in the realm of native mobile applications, crafting sophisticated and high-performance apps that seamlessly run on both Android and iOS platforms.

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.

react native

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

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.

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.

react native app

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

create react native app

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.

 react native application

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

react native apps
apps built with react native

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

react native app

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

create react native app

Integrating and using ZEGOCLOUD:

  1. 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
  1. 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
  1. 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):

  1. 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" />
  1. Add the following to the[project]/android/app/proguard-rules.pro file:
-keep class **.zego.**  { *; }

Configure your project (iOS):

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

Read More:

Talk to Expert

Learn more about our solutions and get your question answered.

Talk to us

Take your apps to the next level with our voice, video and chat APIs

Free Trial
  • 10,000 minutes for free
  • 4,000+ corporate clients
  • 3 Billion daily call minutes

Stay updated with us by signing up for our newsletter!

Don't miss out on important news and updates from ZEGOCLOUD!

* You may unsubscribe at any time using the unsubscribe link in the digest email. See our privacy policy for more information.