My latest publication about getting started with Expo and React Native has been followed by quite a few questions about previewing the app in a simulator, rather than on the physical device through Expo gateway. The solution is really simple.

This post will be really short – it’s rather a lifehack than a subject for separate write out, but after the number of questions received I decided to publish this little hint here.

Let’s come back to the app we have created recently: our demo React Native and Expo app.

iOS

First and the most important thing is: make sure you have Xcode and iOS Simulator installed correctly. It’s available in the App Store for free. You must run it before launching your app to set up and cover the initial steps. After that, you just need to run one command in the project root (or provide project path as a parameter):

exp ios

Trying to run the app without setting up Xcode may result in the following message, so if you see it in your terminal, go back and have the Xcode sorted!

To install iOS Simulator, open Xcode and click: PreferencesComponents and then install the Simulator:

Try running the following command again:

exp ios

The output should look like this:

[exp] Making sure project is set up correctly...
[exp] Your project looks good!
[exp] Opening iOS simulator
[exp] Opening exp://...:80 in iOS simulator

If you still see the error try checking the command listed in the error message and then try again:

sudo xcode-select -s /Applications/Xcode.app
exp ios

Android

Android Emulator is a little bit more complicated. If you wish to preview your app in an emulator on your computer, the recommended (by Expo) way is Genymotion. They offer a plan for personal use only, which is perfect for learning and trying your non-commercial project.

In order to start you’ll need to create an account:

Then after successful account activation you will be able to download Genymotion software

After installation and logging in into the installed Genymotion app you need to create a virtual device. Feel free to use whichever phone and Android version you like, but I recommend using Android 7.1.0 for compatibility reasons.

The next step is to tell Expo to use Genymotion tools. On macOS they are normally stored in the following path:

/Applications/Genymotion.app/Contents/MacOS/tools/

Run the following command and check the output to verify that you’re doing the correct thing:

$ ls /Applications/Genymotion.app/Contents/MacOS/tools/
aapt     adb     glewinfo

You can now safely export the path above and feel free to add it to your .bash_profile or if you’re using ZSH like me to your .zshrc.

export PATH=/Applications/Genymotion.app/Contents/MacOS/tools/:$PATH

That’s all! You can now run your virtual Android device in Genymotion.

After the device is started, run the following command in your Expo project root:

exp android

The output should be like the following

[exp] Making sure project is set up correctly...
[exp] Your project looks good!
[exp] Downloading latest version of Expo
[exp] Installing Expo on device
[exp] Opening on Android device

You can now enjoy running your app on the Android emulator! 🙂

Please note that Genymotion software you’ve downloaded is only allowed for free personal use. In order to work on commercial project you’ll need to purchase appropriate license!