Step-by-Step Guide: Running Your First React Native android App in 2023
Tags: reactnative, javascript, android, mobile
Published: 2023-03-07 07:00:00

In 2020, I wrote the Getting Started Guide of React Native for Android devices.

{% embed https://dev.to/aneeqakhan/how-to-run-your-first-react-native-app-on-macos-for-android-devices-7co %}

But a lot is changed since 2020, so I wrote the latest guide for it.

> I have used macOS M1 version(13.2.1) for this guide.

---------

## 1. Install Homebrew
Run this command in the root directory to install homebrew.
```
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
```
After this command ran successfully, the brew will tell you commands to add brew to your terminal. You can run those commands so then later use brew to install more dependencies.

---------

## 2. Install Node and Watchman
Run these commands to install Node and Watchman.
```
brew install node
brew install watchman
```

*Make sure to install Node 14 or newer versions. You can check the version by this command.*
```
node -v
```

---------

## 3. Install Java Development Kit
React Native guide recommends installing Java Development Kit using `Homebrew`
```
brew tap homebrew/cask-versions
brew install --cask zulu11
```
You'll get this message after successful installation.
>🍺  zulu11 was successfully installed!

---------

## 4. Download and Install Android Studio

Download the Android Studio from the official [site](https://developer.android.com/studio/index.html). 

After the download is successful, follow the steps and install the standard Android Studio settings.

> I downloaded "Android Studio Electric Eel" version for this guide.

---------

## 5. Install Android SDK
Open Android Studio and click the "More Actions" button, and select "SDK Manager".

### i. SDK Platforms
Go to the "SDK Platforms" tab and check the box "Show Package Details" in the bottom right corner.

Now select the `Android 12 (S)` all items or make sure to at least select these items from the list.

* `Android SDK Platform 31`
* `Intel x86 Atom_64 System Image or Google APIs Intel x86 Atom System Image or (for Apple M1 Silicon) Google APIs ARM 64 v8a System Image`

### ii. SDK Tools
After this, select the "SDK Tools" tab and check the box "Show Package Details" in the bottom right corner as well.

Make sure to check the box next to `31.0.0` build tool.

Now, click the "Apply" button to download and install Android SDK and build tools.

### iii. Configure the ANDROID_HOME environment variable
To create a new `.bash_profile` file, type `touch .bash_profile` to create your new file, then type `open -e .bash_profile` to open your file and add these lines:
```
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
```
Run source `source ~/.bash_profile` to load the config into your current shell. 
Verify that ANDROID_HOME has been set by running `echo $ANDROID_HOME` and the appropriate directories have been added to your path by running `echo $PATH`

> Verify the "$ANDROID_HOME" path with the "Android SDK Location" path in the SDK Manager of Android Studio

----------

## 6. Create a new application
Let's create a new React Native project called `AwesomeProject` using React Native's built-in command line interface.

```
npx react-native@latest init AwesomeProject
```

----------

## 7. Preparing the Android device
Open `./AwesomeProject/android` folder in the android studio. Open "Device Manager" and press the "Create Virtual Device" button.
Then pick the phone from the list and click "Next", then select the S API Level 31 image.
Click "Next" and "Finish" to create the  AVD.

----------

## 8. Running the application
### 1. Start Metro
To run a react-native app, you need to start the metro first. Run this command in the terminal to start metro.
```
npx react-native start
```

### 2. Start the application
Open a new terminal, and run this command to run the app on the android emulator.
```
npx react-native run-android
```

> You may need to run adb reverse command to expose a port on your Android device to a port on your computer.

```
adb reverse tcp:8081 tcp:8081
``` 
Reload the app on the emulator and you'll see the Application loaded.


![android app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/plv023hnfz3jco7dcfpw.png)