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 ・ 3 min read
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.
3. Install Java Development Kit
React Native guide recommends installing Java Development Kit using
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
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
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
./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.
Top comments (0)