Why Doesn't Expo Android Emulator Show App?

Issue

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:

Here is what the emulator looks like once it launches:

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

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

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.

Solution

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:

6. Cancel out of your current run attempt by using Ctrl+C
7. 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)

Answered By - Elliptica