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.
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):
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: Preferences → Components and then install the Simulator:
Try running the following command again:
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 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:
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.
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:
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!