Why Doesn't Expo Android Emulator Show App?

Viewed 1653

I'm new to Expo and I'm trying to run a React Native app using yarn android. (The app is just the basic one created using expo init my-project.) However, while the command launches the emulator just fine, all I ever see is the emulated device --- the app never appears. If I close the emulator after waiting a long time, the terminal says that the emulator closed before it finished loading.

This is what the terminal shows right before the emulator launches:

enter image description here

Here is what the emulator looks like once it launches:

enter image description here

Here is what terminal says if I finally just close the emulator:

enter image description here

And here is what it looks like if I let the emulator run until it times out trying to load the app:

enter image description here

Do you have any idea why the app never loads and how to get it to do so? If I run yarn web, the app loads in browser fine, so I know it's not an issue with the app itself.

2 Answers

There are a few steps missing from the Expo instructions online / in their terminal output. You can't immediately jump into yarn android after creating a project unless you have met the following condition:

  • The Expo Go app is installed on your emulator/simulator

If you don't have the app installed, the command yarn android (which calls expo start --android as the real command) will fail with a timed out error.

You can install Expo Go via the command line (as long as you're cd'd into your project) using the command:

  • expo client:install:android [for Android]
  • expo client:install:ios [for iOS]

However, that command will also fail (with a timed out error) unless you've already gone into your emulator/simulator and logged into your Play Store / App Store.

So if you're trying to run Expo on a new emulator / one that's never run it before, your steps must be:

  1. Open your emulator. Navigate to its Play/App Store and log into your account
  2. Open Terminal. Create an Expo project using expo init my_project_name
  3. cd into your project
  4. Install Expo Go using the command expo client:install:android or expo client:install:ios
  5. Run your app using yarn android or yarn ios (or expo start --android or expo start --ios if you don't have yarn installed)

Do that and everything should work!

Note: One other error I've seen pop up after all this happens is a Network Response Timed Out in the emulator itself when it's trying to load the app. If you get that error after step 5, do:

  1. Cancel out of your current run attempt by using Ctrl+C
  2. Append --tunnel to your original run command and try again (e.g. yarn android --tunnel). (Keep an eye on the Terminal, you may see something akin to the following The package @expo/ngrok@^4.1.0 is required to use tunnels, would you like to install it globally? Just type yes or hit Enter if "yes" is already present.) See this post for more information about the --tunnel solution and a couple of alternatives (the issue most likely arising due to firewall behavior)
  • execute:
expo start

that generate a QR code

  • download ExpoGo on the device from Play Store. Is necessary play store android emulator version and google account for using play store.
  • scan QR code and the app is loaded on the device or click open on android device in the web page that is open after execute expo start.
Related