DEV Community

Cover image for Step-by-Step Guide: Running Your First React Native android App in 2023
Aneeqa Khan
Aneeqa Khan

Posted on

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.

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)"
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Make sure to install Node 14 or newer versions. You can check the version by this command.

node -v
Enter fullscreen mode Exit fullscreen mode

3. Install Java Development Kit

React Native guide recommends installing Java Development Kit using Homebrew

brew tap homebrew/cask-versions
brew install --cask zulu11
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Reload the app on the emulator and you'll see the Application loaded.

android app

Latest comments (0)