Tia EastwoodI 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
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_profileorsource ~/.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
- If you're using bash:
- Then, run
open -e ~/.bash_profileto 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_profileorsource ~/.zshrcto 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
