We are going to setup a new macOS computer to run React Native and simulate an iOS and Android device on your mac.

These instructions have been tested on macOS Sierra 10.12 using the following tools

react@15.6.1

react-native@0.47.1

react-native-cli@2.0.1

We will be walking through

Creating a new React Native app

Running it in iOS Simulator

Running it in Android Emulator

Potential setup issues

Initial Setup

First install Homebrew — follow the directions on the Homebrew homepage as the script gets updated from time to time.

Once the Homebrew installation has finished check that there are no existing configuration issues

brew doctor

If there are no Homebrew issues, move onto the next step. If you do have any issues (brew usually tells you if an issue is insignificant) it’s best to sort those out first before moving on.

Install node

brew install node

Install additional React Native requirements

brew install watchman

npm install -g react-native-cli

Make sure everything is up to date

brew update

Next create a new React Native project

cd ~

react-native init myapp

Go into the myapp directory

cd myapp

1. Running Your App on an iOS Simulator

First install Xcode via the Mac App Store. This step will take a while.

Next emulate your app in the iOS Simulator. Warning: This will take a while on its first run.

react-native run-ios

You should now either be

In your new app. Success! or You are at the iOS homescreen. If you can see the homescreen, you may be able to see an icon and label for your app, or you may need to click and drag left to get to the next screen. Then your app should appear. Double click on your app to enter. Success!

If you encountered any errors, check the problems section towards the bottom of this document.

2. Running Your App on an Android Emulator

You can install Java from the Oracle website or you can install it using Homebrew (less clicking)

brew cask install java

Continue the directions to install React Native here. These docs are solid. We already have created an app in the previous section so skip the section ‘Create a New Application’. Also we are going to be using a virtual device.

Continue on, following the notes on making a virtual device from the React Native docs. Make a note of the device name that you added.

Now make sure everything is up to date

brew update

sdkmanager --update // old command: android update sdk --no-ui

Loading Android Emulator via the command line

If you are only using Android Studio to launch an Android Emulator then there are 3 steps

Load Android Studio, then Load the Android Virtual Device Manger, then Load the Android Emulator

We can avoid steps 1 & 2 and jump to step 3 straight from the command line. This will save you some time and some RAM and CPU usage.

First quit any running Android Emulators and Android Studio.

Next add this to the bottom of your ~/.bash_profile file, then save the file.

export ANDROID_HOME=$HOME/Library/Android/sdk

PATH=$PATH:$ANDROID_HOME/emulator

PATH=$PATH:$ANDROID_HOME/tools

PATH=$PATH:$ANDROID_HOME/platform-tools

PATH=$PATH:$ANDROID_HOME/tools/bin

export PATH

Now source your new ~/.bash_profile file

source ~/.bash_profile

At this point it can be a good idea to quit all your Terminal sessions and restart Terminal to ensure that your PATH, ANDROID_HOME and other environmental variables have updated.

Next let’s check the name of our Android virtual device image (remember I mentioned before to jot this down?)

avdmanager list avd

Copy the Name property of the virtual device you want to use, then run

emulator -avd <NAME>

Wait for the virtual device to boot up.

Now it’s time to run your app in the emulator

react-native run-android

Switch over to the Android Emulator. You should see your app. Success!

If not…read on.

Potential Errors

Broken AVD system path. Check your ANDROID_SDK_ROOT value

Make sure you haven’t installed android-sdk using homebrew. If you have then uninstall it.

brew uninstall android-sdk

No ANDROID_HOME

SDK location not found. Define location with sdk.dir in the local.properties file or with an ANDROID_HOME environment variable.

See above for how to add the ANDROID_HOME environmental variable to ~/.bash_profile. Restart Terminal. Now check it is correct

echo $ANDROID_HOME // default: /Users/<USERNAME>/Library/Android/sdk

Android Emulator Won’t Run from Android Virtual Device Manager

Unfortunately in Android Studio, errors encountered in the Android Virtual Device Manager may not be visible to you. See ‘Loading Android Emulator via the command line’ above to launch the Virtual Device from the command line to get better error message visibility.

No connected devices

Execution failed for task ‘:app:installDebug’.

> com.android.builder.testing.api.DeviceException: No connected devices! ...

Make sure you have an Android emulator running or a device connected and have set up your Android development environment:

https://facebook.github.io/react-native/docs/android-setup.html Could not install the app on the device, read the error above for details.Make sure you have an Android emulator running or a device connected and have set up your Android development environment:

Don’t forget that the Android emulator needs to be running before you run

react-native run-android

Wrong Android ‘emulator’

Could not launch ‘../emulator/qemu/darwin-x86_64/qemu-system-x86_64’: No such file or directory

You want the right ‘emulator’

find ~ -name emulator -type f

/Users/<USERNAME>/Library/Android/sdk/emulator/emulator // this

/Users/<USERNAME>/Library/Android/sdk/tools/emulator // not this

To ensure you get it, check the order of the entries in yout PATH. You also might need to restart Terminal.

Warning: File /Users/<USERNAME>/.android/repositories.cfg could not be loaded.

Can happen when running

sdkmanager — update

Solution

touch ~/.android/repositories.cfg

avdmanager not found

Make sure you add the following line to the bottom of your ~/.bash_profile

PATH=$PATH:$ANDROID_HOME/tools/bin

export PATH

then run

source ~/.bash_profile