How To Set Up Your Android Development Environment (React Native & Mac OS)

I think there's a certain thrill about setting up a new machine...until you realize you need to remember how to configure your development environments all over again! After going through the steps myself, here's my guide on how to set up your Android development environment (in my case, specifically for React Native applications) on macOS. Whether you're setting up a fresh machine or just need a refresher, hopefully you'll find this guide helpful. Without further ado, let's dive right in...

Step 1: Install Homebrew

Homebrew is a package manager for macOS that simplifies the installation of software. If you haven't installed it yet, open Terminal and run:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Step 2: Install Node, Watchman, and Java

Next you will need Node and Watchman. You'll also need the Java. For node, I would highly recommend using NVM (Node Version Manager) to install node as it makes it much easier to manage different versions of node that you may need for different projects.

You can use Homebrew to install all these:

brew install nvm
// or if you don't want to use nvm:
brew install node
brew install watchman

If you decided to go with NVM, then install your preferred version of node now via NVM, or just the latest version with
nvm install node
Then download and install Java

Step 3: Install Android Studio

Download and install Android Studio from https://developer.android.com/studio. During the setup, check the boxes for:

Android SDK
Android SDK Platform
Android Virtual Device

If the checkboxes are not visible, you'll be able to install these components later via the Android Studio's SDK Manager.

Step 4: Configure the JAVA_HOME variable

Open Terminal.
If you're using bash, all you have to do is:

echo export "JAVA_HOME=\$(/usr/libexec/java_home)" >> ~/.bash_profile

If you're using zsh (which probably means you're running macOS Catalina or newer), then it should instead be:

echo export "JAVA_HOME=\$(/usr/libexec/java_home)" >> ~/.zshrc

Then restart the shell with
source ~/.bash_profile
or
source ~/.zshrc

Step 5: Configure the ANDROID_HOME Environment Variable

React Native needs to know where your Android SDK is, which is achieved by setting the ANDROID_HOME environment variable.

Open Terminal.
To create the file if it doesn't exist, or open it if it does:
- If you're using bash:
  touch ~/.bash_profile
- or if you're using zsh:
  touch ~/.zshrc
Then, run
open -e ~/.bash_profile
to open the file in TextEdit.
Add the following lines to the file and save it:

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

Back in the terminal, run
source ~/.bash_profile
or
source ~/.zshrc
to reload the profile.

Step 6: Create and Configure a Virtual Device

You'll need an Android Virtual Device (AVD) to run your app.

Open Android Studio.
Click on Device Manager in the top menu.
Click on "Create Device" (if you want to test Play Store purchases, you need to select a device featuring Play Store)
Choose a device definition and click "Next".
Select a system image and click "Next"
Verify the configuration and click "Finish".

Step 7: Install React Native

Follow the instructions on the React Native docs (I'm using Bare React Native, but there are also instructions for Expo).

Step 8: Create a New Application

You're all set! You can create a new React Native application by running:

react-native init MyNewApp

// Replace "MyNewApp" with the name of your app.

To run your React Native application on the Android Virtual Device:

Ensure the AVD is running. You can check this in Android Studio's AVD Manager.
In the Terminal or your code editor, run
npm start
Then type "a" for Android

Voila! I hope you're all up and running now. Happy apping!

Cover photo by Photo by Rob Hampsono on Unsplash