Create a React Native app on an Android emulator.

This is the challenge I had to tackle this week, in an enterprise setting. Bootstrapping a React Native project with create-react-native-app
, having it be live-testable on the same machine with an Android emulator, and doing this all within the confounds of a high-security, non-permissive corporate setting (namely, using proxies).
React Native recommends the Genymotion emulator out of the box. For many developers (and corporations), the price tag on Genymotion is not worth the expense. We’ll be using the free Android Studio emulator for this walkthrough.
While it’s unlikely you will need all of the steps provided, I am hoping this walkthrough covers any of the boxes you happen to need checked.
Step 1: Create or Install the Project
If you are the project creator, bootstrap a project using create-react-native-app. They have great documentation to get you through this step, and it should be about as easy as npm i -g create-react-native-app && create-react-native-app my-app
. In your my-app
directory, open app.json
and change sdkVersion
to 28.0.0
then execute yarn add expo@^28.0.0 jest-expo@~28.0.0
to upgrade your Expo dependencies to the latest API version. Your co-contributors need not perform these actions.
If you are a project contributor, download the project and install its dependencies by executing yarn
in the root directory (where the package.json
and yarn.lock
files are located).
Step 2: Install the Necessary Tools
Download and install Android Studio 3.0 or newer. Your company may offer a pre-configured bundle through their software center.
From the command line, execute npm i -g exp expo
or yarn global add exp expo
to install the Expo CLI globally.
From expo.io, download and install the Expo Development Environment. As of the time of writing, direct links for the installers are macOS, Windows (64-bit), and Linux. The Expo Development Environment is a GUI for the expo command line tool. Many of you may prefer GUIs to CLIs. Though directly interacting with Expo is not necessary when running a React Native project bootstrapped by CRNA (neither through GUI or CLI), there is one feature in this GUI that is not supported by the CLI: Updating the Expo app on the Android emulator to the latest version. We will use it for that, as well as offer it as a GUI for anyone who so happens to want to use it.
🏠 Windows Pro and Enterprise users only: From your start menu, search for “Turn Windows features on or off.” This will require administrative account permissions. Uncheck Hyper-V
, then click Ok. Restart your computer when prompted (yes, it’s actually necessary).
👤 Proxy configuration: From Android Studio, select File
then Settings...
Under the Appearance & Behavior
category, then under the System Settings
category, select the HTTP Proxy
page. Select Manual proxy configuration
and adjust accordingly.
From Android Studio, select File
, then Settings...
Under the Appearance & Behavior
category, then under the System Settings
category, select the Android SDK
page.
Select the SDK Platforms
tab, if it’s not selected by default. Select the Show Package Details
checkbox. Under Android API 28
, check the boxes for Intel x86 Atom System Image
and Intel x86 Atom_64 System Image
.

Select the SDK Tools
tab. Check the boxes next to Android SDK Platform-Tools
and Intel x86 Emulator Accelerator (HAXM installer)
. Click OK, then click OK again.

Accept all License Agreements and Recommended settings. If prompted for administrative access, login with an authorized account. Click Finish, then click Finish again.
From your start menu, search for “Edit the system environment variables.” This will require administrative account permissions. Click Environment variables...
Under System variables
, click New...
Enter ANDROID_SDK
as the variable name and %LOCALAPPDATA\Android\Sdk
as the variable value. Under System variables
, edit Path
. If your configuration takes a single string, append ;%LOCALAPPDATA%\Android\Sdk\platform-tools
(preceding semicolon). If your configuration takes multiple strings, append %LOCALAPPDATA%\Android\Sdk\platform-tools
(no preceding semicolon). Click OK, then click OK again.
From command line, execute exp path
to configure Expo’s path to match your newly-set environment variables.
From Android Studio, select Tools
then AVD Manager
. To the right of Nexus 5X API 28 x86
, press the green Play arrow to launch the Android emulator.

👤 Proxy configuration: From the Android emulator, open the Settings app. Choose Network & internet
then Wi-Fi
then AndroidWifi
then click the Edit button.

👤 Proxy configuration (cont.): Set Proxy
to Manual
. Set Proxy hostname
and Proxy port
accordingly. Set Bypass proxy for
to 127.0.0.1,localhost
. Click Save.
From the Android emulator, open Google Chrome. Navigate to https://d1ahtucjixef4r.cloudfront.net/Exponent-1.14.0.apk
. Download and install the APK. Adjust the system permissions as needed to allow this, which should be as easy as following the prompts.
From the Expo Development Environment, choose Open existing project...
and choose your React Native application. Select Expo XDE
(where File is normally located) then Install Android App
.

This will uninstall the APK we just installed and replace it with the newest version. Why did we just install an outdated version? Because attempting to install the newest version without having an outdated version results in an error while attempting to uninstall a non-existent outdated version. 🤔
You will not get an “Installation success!” message. The spinner will simply disappear upon completion.
Still in the Expo Development Environment, click the settings gear, then change the Host
to localhost
.

From the Android emulator, open the emulator settings via the ...
on the right-hand side of the window.

Click the Snapshots
page and then click the Take Snapshot
button. This will help insure your work thus far won’t be erased! Your configuration should now be in a working state.
Step 3: Run the Application
From Android Studio, select Tools
then AVD Manager
. To the right of Nexus 5X API 28 x86
, press the green Play arrow. This will start your emulator. You may close the AVD Manager and Android Studio windows, leaving only the emulator open.
From command line, execute yarn android
in the root directory of your React Native project.
From the Android emulator, open the Expo app. To find the Expo app, drag up on the Google search bar, then click Expo.

You may click and hold your mouse on the Expo app to place it on your desktop for future, easy access.
From the Expo app, click the Explore icon.

Click the search icon and type exp://localhost:19000
or the URL that was output by yarn android
.

Click Tap to attempt to open project at exp://localhost:19000
. You should now see your React Native application in the flesh! Edit the project files in your favorite text editor and enjoy the hot reloading.
Note: You can pin the emulator to always be in front of other windows (e.g. your text editor). Under the emulator settings (...
to the right of the window), click the Settings
page. Under the General
tab, toggle the Emulator always on top
switch.
Conclusion
If you liked this article, feel free to give it a clap or two. It’s quick, it’s easy, and it’s free! If you have any questions or relevant great advice, please leave them in the comments below.
To read more of my columns, you may follow me on LinkedIn and Twitter, or check out my portfolio on CharlesStover.com.