Build Your First App: React Native Development

How to Build Your First Android and iOS App Using React Native CLI

Mobile apps are part of our everyday life, there are almost 9 million of them. Many businesses, from internet companies and social networks to cinemas and local stores, launch their applications. For developers, this means that there’s a high demand for professionals who build mobile applications.

The most popular tool for mobile app development is React Native Command Line Interface (CLI). This solution gives you full control over your project, but it’s important to remember to set up the right development environment and follow a structured approach. This will help you prevent technical issues and ensure code consistency. In this React Native app tutorial, we’ll guide you through the whole process.

What Is React Native and Why Use It for Mobile App Development?

React Native is an open-source framework created by Meta. It’s one of the most popular frameworks because it enables developers to create applications for both iOS and Android with React and JavaScript. Using it, you can write a single codebase that’ll work across both platforms, saving a significant amount of time and effort.

React Native app development has numerous advantages, and we’d like to highlight three of the biggest.

• Near-native performance. It can render native components and is compatible with Android and iOS native tools. This means React Native works as well as the ones built natively, while having enhanced flexibility and portability.
• Hot-reloading. You don’t have to restart or reload an app when making changes to your code. All changes, whether it’s UI updates or bug fixing, will be immediately reflected in the running application. This boosts speed and productivity.
• A rich ecosystem of libraries. It makes it easier to add additional features, making React Native app development a perfect choice for any solution – MVPs, enterprise-scale apps, and everything in between.

It’s important to mention that besides its versatility, this solution also remains accessible for everyone, even for beginners. Now let’s find out how to use React Native.

React Native CLI vs. Expo: Choosing the Right Development Approach

When getting started with React Native documentation, there are two official ways:

• Expo Go Quickstart
• React Native CLI Quickstart

Let’s consider their differences and what approach to choose.

Expo is a set of many tools designed to facilitate development with tools like React Native. It simplifies development with pre-configured tools, which makes it perfect for prototyping. However, it’s less flexible and doesn’t suit production use cases where you need native code.

React Native CLI Quickstart, on the other hand, is a perfect choice for building apps using native code. It provides you with full control over the project, allowing you to integrate native modules, customize build configurations, and access platform-specific APIs. It’s a go-to for devs who work on complex projects and need more control over functionality and architecture.

Setting Up the React Native Development Environment

To create a React Native app, first, you need to set up a development environment. The full React native setup requires installing the following tools:

• Node.js. It’s essential for running a JavaScript environment. For Windows, it’s recommended to install it via Chocolatey.
• Watchman (MacOS). It’ll monitor file changes for faster development.
• JDK. Same for Windows. You can also use Chocolatey to install it.
• Android dependencies. First of all, you’ll need Android Studio. For React Native Android Studio setup boxes next to all of the following items should be checked: Android SDK, Android SDK Platform, Android Virtual Device, and, for Windows, also Performance (Intel ® HAXM) if you’re not using Hyper-V already. 
• iOS dependencies. Install Xcode, Xcode Command Line Tools, and Cocoapods (dependency manager). For native iOS app development, make sure you have the latest iOS simulator and command-line tools configured.

This short react native setup guide will help you properly configure the environment to ensure smooth development and testing across platforms.

Creating Your First React Native App

When all is set up, it’s time to build your first React Native app. To start, you need to have React Native CLI installed. To do that, run a command prompt:

[npm install -g react-native-cli]

This will install it globally on your device.

Take these steps:

1. Initialize the project. In your terminal, run a command [npx react-native init appname] where ‘appname’ is the name of your app. Once initialized, your project will contain key files like App.js (the main app component), and android/ and ios/.
2. Choose a template (e.g., “blank (JavaScript)” or “blank (TypeScript)”), then navigate into your new app folder:
   [cd appname]
3. Install dependencies. Go to the project folder (cd appname) and run [npm install] to install all required dependencies.

Writing and Running Your First React Native Code

Now you can write some react native code to create a simple app interface. To do this:

4. Open App.js in your code editor and replace the default code with the following:

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello, React Native!</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  text: { fontSize: 24, fontWeight: 'bold' },
});

export default App;

And this is how to run a React Native app to see this in action:

5. Start the development center. Use the command [npm react-native start].

6. Preview your app. React Native for iOS and Android here works the same – you can connect a physical device or use an emulator (Android Studio or Xcode).

For iOS devices, run a command [npx react-native run-ios]

For Android
– If you’re using an  emulator:
[cd MyFirstApp
npx react-native run-android]

If you’re using an Android device:

[npx react-native run-android]

7. Test and edit the app. Open the project in Visual Studio Code or any other preferred code editor. Go to app.js, use React Native components to change the app’s UI, and save changes when you’re done. Thanks to hot-reloading, the app will be automatically refreshed.

These quite simple steps are enough to create a React Native app using the CLI. After this, you can modify your app by adding components, features, and integrating libraries and APIs that fit your needs.
When everything’s ready, you can build the app for release. 

For Android release build run:
cd android
./gradlew assembleRelease

Then you can find your .apk file in android/app/build/outputs/apk/release/

For iOS:
Open project in Xcode > Use product > Archive to build and export for TestFlight or App Store.

That’s it, you’ve just built your first application!

Building and Running the App on Android and iOS

Now let’s see how to use React Native to deploy your app.

• Android: Open Android Studio and navigate to the /android folder of your project. Generate an APK or AAB file using the Build menu. For testing, make sure that the emulator is on. To deploy the app, run the command:
  [npx react-native run-android]
  React Native Android Studio simplifies this process with its integrated tools.
• iOS: Open the ios/appname.xcodeproj in Xcode. Then:
  • Configure your signing team
  • Select a simulator
  • Click the Run button
• Or run a command  [npx react-native run-ios] to build the app directly from the terminal.
  

These are the basics of how to use React Native to build iOS and Android applications. Yet, our guide on mobile app development with React Native doesn’t end here, as there’s more to learn.

Exploring Essential React Native Components and Features

• View. It’s a fundamental component for building UI. It’s similar to <div> in HTML, and it’s a container for other components (like styling, nesting, touch handling, etc)
• Text. It displays text to users. Text can be customized to different styles.
• Image. The purpose of this component is to show images from different sources (local or remote), as well as enable styling like resizing.
• Button. Adds interactive buttons that trigger action when clicked.
• ScrollView. Enables scrolling when content exceeds the size of the screen.

To style components, you can use the StyleSheet API. This is the utility that helps users define and organize styles for their components. It will create a style object only once, thus keeping your code cleaner and improving performance.

For state management, use useState. This is a React Native Hook to manage interactivity with state. Putting it simply, it enables your app to respond to users’ inputs like toggling a button or showing/hiding content.

But to trigger specific behaviour when a user taps a button or touches the screen, you’ll also need Event Handlers (for example, onPress). This is commonly used to open another screen, or open a link, submit a form, or play/pause media, and so on.

Understanding how to use it all in mobile app development with React Native is crucial, as it’s the key to creating dynamic and user-friendly interfaces.

Finalizing and Testing Your React Native App

The critical step before your app goes live is to make sure it’s polished and without bugs. Here’s the React Native CLI Quickstart tools for quality assurance:

• Debugging
  To inspect the code, enable the “Debug JS Remotely” option in the developer menu. This will allow you to use Chrome DevTools.
  
• Troubleshooting
  Typical issues (e.g., “Unable to load script”) can often be resolved by restarting the Metro Bundler or clearing the cache [npx react-native start –reset-cache].
  
• Testing
  Test your app on multiple emulators and physical devices. This will ensure responsiveness. For unit testing, use tools like Jest.

Knowing how to run a React Native app helps you identify issues, fix them, and ensure a smooth and positive user experience.

Conclusion and Next Steps in React Native Development

Congratulations! Now you can build your first Android and IOS app with React Native CLI. We’ve all the basic steps, tools, and elements – from React Native setup and writing React Native code to testing and deploying your app.

But do not stop here, improve your skills, and explore advanced topics like navigation (using React Navigation), state management (with Redux or Context API), and API integration for dynamic data. This will enable you to build even more flexible, powerful, and dynamic real-life applications.

Start your React Native mobile app development journey today with Ethora.

---

Keep Reading

• Inside the Ethora Chat Component NPM for messaging and AI agents
• TypeScript vs JavaScript — choosing the right language
• Build your first Android and iOS mobile app with Ethora

Ship a React Native app with chat built in — explore the React Native chat SDK, or start building for free.

More from Ethora: Ethora AI SDK, self-hosted chat server on AWS.