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.
