# Beginner's Guide: Building 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:

1. **Node.js**: React Native requires Node.js to run. You can download it from [Node.js official website](https://nodejs.org/).
    
2. **React Native CLI**: You can install it globally using npm (Node Package Manager) with the command:
    
    ```bash
    npm install -g react-native-cli
    ```
    
3. **Android Studio:** You'll need to install Android Studio. Here's how: Download and install Android Studio from [the official website](https://developer.android.com/studio) (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:

1. Using the [React Native CLI](https://github.com/react-native-community/cli) for a more customizable setup.
    
2. Using [Expo CLI](https://docs.expo.dev/more/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:

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

```bash
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:

1. **Open Android Studio.**
    
2. **Create a new Project named "Hello World"**
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1719050641317/8313a7f2-0060-4add-ba61-8866c64b9c46.png align="center")
    
3. **Configure Device Manager**
    
    Once Android Studio is installed:
    
    * Click on the Device Manager located inside Tools window.
        
        ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1720085896135/c535e7aa-cd75-45a7-8bc0-7533a5e74ea2.png align="center")
        
4. **Start the Emulator**
    
    * Click the play button (`▶`) to start it. The emulator will take a few moments to boot up.
        
        ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1719051609680/41ac2637-0018-4fed-9236-db6b81ed068a.gif align="center")
        
5. **Run Your React Native App**
    
    Open a terminal or command prompt in your React Native project directory (`MyApp`) and run:
    
    ```bash
    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.
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1719051703671/39719cb2-4b63-4010-be7b-537491977bdb.png align="center")
    

### Step 3.1: Running on a Physical Android Device

1. **Enable Developer Options and USB Debugging**
    
    Follow the steps in the [website](https://developer.android.com/studio/run/device) to enable USB Debugging on your physical device.
    
2. **Verify Device Connection**
    
    Open a terminal or command prompt and run:
    
    ```bash
    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:
    
    ```bash
    nano ~/.zshrc
    ```
    
    Then edit the file
    
    ```bash
    # 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`
    
3. **Run Your React Native App**
    
    In the terminal or command prompt, navigate to your React Native project directory (`MyApp`) and run:
    
    ```bash
    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.
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1719050327890/c0336ef4-7ff3-427e-982c-6230a2d67178.jpeg align="center")

**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 with**`adb 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:

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1719053066269/a5bd3ec2-964e-429b-a655-7326ec790b69.jpeg align="center")

## 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](https://reactnative.dev/docs/getting-started), join forums, or participate in online communities to seek help and share your knowledge.

## **Connect with us**

* [**LinkedIn**](https://www.linkedin.com/company/deuexsolutions/)
    
* [**Twitter**](https://x.com/DeuexSolutions)