How To Setup an Android Emulator to work with React Native (Expo) on Mac

Posted on Thursday, January 18th, 2018

The goal is to emulate an Android smartphone on macOS so that you can easily develop and immediately see the changes on the screen. Furthermore, you can use other debugging tools that can make it even more useful.

1. Install Android Studio with the SDK tools

2. Install Genymotion (the emulator) and Virtual Box for Mac

3. Make sure ADB is working with the command line by doing this:

echo 'export ANDROID_HOME=/Users/$USER/Library/Android/sdk' >> ~/.bash_profile

echo 'export PATH=${PATH}:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools' >> ~/.bash_profile

source ~/.bash_profile

Test adb. The next command should return an empty list because we have no emulator instances.
adb devices

4. Copy /Users/$USER/Library/Android/sdk (change to $USER to your username) to the Genymotion ADB preferences

5. Add a device to Genymotion with an API 19, at least. Older API’s cause problem with Expo.

6. Start the device on Genymotion and leave it open

7. Run the Expo or React Native folder like this:

Expo:
1. Open the Expo XDE on your Mac
2. Open your project
3. Click Device and choose Android

React Native:

npm run android

8. Enable Hot Reloading in the Genymotion simulator menu:

That’s it. Enjoy.