React-Native and Android Development for mac

6 min readJan 30, 2019

I am fluent with development with React and just recently I had the bright idea of learning mobile development with React-Native. Setting up my environment for iOS development was pretty straight forward, download XCode and you’re all set to run your application on iOS! Then there is Android which is not quite as simple. It took me a good day to get everything set up properly after sifting through all of the React-Native docs on and other articles. Which is my reason for this article, I want it to be a simple step by step process for you to get up and running with React-Native in Android!

You will need HomeBrew in order to install Node and Watchman. If you already have Node and Watchman installed go ahead and skip forward to “Download and Install Java Development Kit (JDK)”.

Once you follow the instructions to download HomeBrew, in your terminal, run:

brew install node brew install watchman

When you download Node, it downloads the node package manager (npm) by default. What you will need to do now is run:

npm install -g react-native-cli

Create a new directory and use the command

react-native init <your project name here>

We will go ahead and leave this for later. Now that we have a React-Native CLI we can move on to setting up our Android development environment.

1. Download and Install Java Development Kit (JDK)

React-Native requires this Java Development Kit. Agree to the Oracle Binary Code License Agreement, download and install the kit for Mac OS X x64 and on to the next step!

2. Install and Set up Android Studio

Go on ahead and download and install Android Studio. This download takes a little bit so now is a good time to start aimlessly scrolling through your Instagram feed or replenish your coffee cup.

Once completed, open it up and drag it into your applications. Choose “Custom” for your set up preferences and make these are all checked:

∙ Android SDK
∙ Android SDK Platform
∙ Performance (Intel ® HAXM)
∙ Android Virtual Device

After checking those boxes proceed with the install process.

3. Install Android SDK

Android studio will handle installing the newest SDK by default since you selected it above. As of November of 2018, the Play store requires that new apps and app updates must be targetting a more recent API level, API 26 (Android 8.0 or higher). Luckily our fellow developers at React-Native are keeping things running smoothly and announced in October that React-Native now supports a target API level 26. So with that being said, lets set up our SDK with Android 8.0! In Android Studio go to Configure > SDK Manager.

From there go into Appearance & Behavior > Android SDK Enable Android 8.0 (Oreo). After that check the box in the bottom right corner of the window labeled “Show Package Details” and under Android 8.0 (Oreo) check the following boxes:

∙ Android SDK Platform 26
∙ Intel x86 Atom_64 System Image
∙ Google APIs Intel x86 Atom_64 System Image

Click apply and install. Once you accept the terms and these are downloaded you will need to go to the SDK Tools tab on the top, select the “Show Package Details” box again and select the 26.0.3 build tools and install those as well.

4. Set up PATHS

React-Native will require you to set up some environment variables in your bash_profile so that the React-Native CLI knows exactly where to find it.
Open up your terminal and access your bash_profile by entering:

nano ~/.bash_profile

now as long as you allowed the installation to install to the default path you can go ahead and copy and paste this into your bash_profile.

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

**If you installed your Android Studio in a different location this is how you find your path. In Android studio go to Preferences > Appearance & Behavior > Android SDK and your path will be located in the input at the top to the window.

Now you can use that path as your ANDROID_HOME path and everything else should be the same as above.**

Now in your bash_profile. Type control(^) + x to exit > y to confirm and save changes > and ENTER to exit the text editor. Next type source ~/.bash_profileto allow the changes to you bash to take action.

5. Set up your Emulator

Now that we have done that we can set up our emulator. In Android Studio go to Configure > AVD Manager. You’ll see this window.

Now click “+ Create Virtual Device” and select the phone you want to use for your emulator and click next. We’ll want to use our API level 26 system image so click download on the Oreo with the correct level.

After hitting next you will be able to name your device here if you would like to change it and after click finish and your emulator will be created. You can now click the green arrow on the correct device and it will run your emulator! Now every single time you want to use it, you have to open up Android Studio, go to your AVD manager, and click the green arrow! Sounds great right? But we can make this a little easier.

Go back to your terminal and open up your bash_profile in nano. Wherever you placed your other paths you can copy this alias under them and change what’s between the <>:

alias <whatever-command-you-choose>=$ANDROID_HOME/emulator/emulator @<the name of your device>

now run source ~/.bash_profileand you now can run the command you chose in your terminal and it will open your emulator without having to go through Android Studio.

6. Your first React-Native project

Now the easiest step of them all! In your terminal run your command to open your emulator if it isn’t already running, open another terminal tab and cd into the project you made earlier. Run the command:

react-native run-android

this should take a second since it is the first time you are opening your project, it will open much faster from here on out. DONE! You should see: