Beginner's Guide to Your First React Native Android App

React Native is a popular framework for building mobile applications using JavaScript and React. With it, you can create apps for both iOS and Android platforms with a single codebase. In this blog, we will walk through the steps to set up a basic React Native Android app. Let's get started!

Prerequisites

Before we dive in, ensure you have the following installed on your machine:

Node.js: React Native requires Node.js to run. You can download it from Node.js official website.
React Native CLI: You can install it globally using npm (Node Package Manager) with the command:
```
 npm install -g react-native-cli
```
Android Studio: You'll need to install Android Studio. Here's how: Download and install Android Studio from the official website (Android Studio Koala). Ensure you have the necessary Android SDKs installed.

Step 1: Setting Up the Development Environment

React Native supports two main ways to create a new project:

Using the React Native CLI for a more customizable setup.
Using Expo CLI for a quicker setup with some limitations in customization.

For this guide, we will use the React Native CLI.

1.1 Installing Dependencies

First, install the necessary dependencies:

npm install -g react-native-cli

Step 2: Creating a New React Native Project

With the environment set up, you can now create a new React Native project.

npx react-native@latest init MyApp

This command will create a new React Native project named MyApp.

Step 3: Running the App

Step 3.1: Running on Android Emulator

To run your React Native app on an emulator, follow these detailed instructions:

Open Android Studio.
Create a new Project named "Hello World"
Configure Device Manager

Once Android Studio is installed:
- Click on the Device Manager located inside Tools window.
Start the Emulator
- Click the play button (▶) to start it. The emulator will take a few moments to boot up.
Run Your React Native App

Open a terminal or command prompt in your React Native project directory (MyApp) and run:
```
 npx react-native run-android
```
This command will build your app and deploy it to the running emulator. If everything is set up correctly, you should see your React Native app running on the emulator.

Step 3.1: Running on a Physical Android Device

Enable Developer Options and USB Debugging

Follow the steps in the website to enable USB Debugging on your physical device.
Verify Device Connection

Open a terminal or command prompt and run:
```
 adb devices
```
This command lists all connected devices. If your device is listed, it means your device is successfully connected.

If you get an error of adb: command not found, try the below steps:
```
 nano ~/.zshrc
```
Then edit the file
```
 # Android ADB
 export ANDROID_HOME="$HOME/Library/Android/sdk"
 export PATH="$ANDROID_HOME/tools:$ANDROID_HOME/tools/bin:$ANDROID_HOME/platform-tools:$PATH"
```
control + X OR Save file. Restart Terminal and try running again adb devices
Run Your React Native App

In the terminal or command prompt, navigate to your React Native project directory (MyApp) and run:
```
 npm install
 npx react-native run-android
```
This command will build your app and deploy it to your connected Android device. If everything is set up correctly, you should see your React Native app running on your device.

Troubleshooting Common Issues

Android SDK not found: Ensure that you have installed the Android SDK and set the ANDROID_HOME environment variable correctly.
Emulator not starting: Check the AVD configuration and make sure your system meets the requirements for running an Android emulator.
Device not listed withadb devices: Ensure USB debugging is enabled and try reconnecting the USB cable. Restarting adb can also help: adb kill-server and then adb start-server.

Step 4: Editing the App

Now that your app is running, let's modify it to display "Hello World". Open the App.js file in your project directory and replace its contents with the following code:

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

const App = () => {
  return (
    <SafeAreaView style={styles.container}>
        <Text style={styles.text}>Our First React Native App</Text>
        <Text style={styles.text}>Hello World</Text>
    </SafeAreaView>
  );
};

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

export default App;

This code defines a simple React component that displays "Hello World" centered on the screen.

Step 5: Refreshing the App

After saving your changes in App.js, your app should automatically reload and display "Hello World". If it doesn't, you can manually reload the app by pressing R on your keyboard.

Conclusion

Congratulations! You've successfully set up and run your first React Native Android app. This "Hello World" project marks the beginning of your exciting journey into mobile app development with React Native.

While this is a simple start, it lays the foundation for creating more complex and feature-rich applications.

Remember, the React Native community is vast and supportive. Don't hesitate to consult the official documentation, join forums, or participate in online communities to seek help and share your knowledge.

Beginner's Guide: Building Your First React Native Android App

Table of contents