📱 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 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:

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 set up and running now.

Happy apping!

Cover photo by Photo by Rob Hampsono on Unsplash