Step-by-Step Guide: Running Your First React Native android App in 2023

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

How to run your first React Native App on macOS for Android devices

Aneeqa Khan ・ Jun 16 '20

#reactnative #beginners #tutorial #programming

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.

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.