React Native with Expo

Attention: The following article was published over 6 years ago, and the information provided may be aged or outdated. Please keep that in mind as you read the post.

The React Native framework supports an installable mobile application created from JavaScript source code. It is not a React-based web app wrapper. It isn’t a code generator. There is no required application source code in Java, Objective-C, Swift, or Kotlin. Moreover, a single React Native application targets both iOS and Android devices.

In this blog, we show a quick-start that results in an executing application on a phone, within five minutes. That application is live-reloadable, native cross-platform, and written in JavaScript. It is not a web application.

The vehicle is Expo: https://github.com/expo/expo/blob/master/README.md. “Expo is a set of tools, libraries, and services that let you build native iOS and Android apps by writing JavaScript.”

Quickstart

There are actually two approaches to kicking the React Native tires. We want to expend minimal effort to obtain a skeleton application development tree suitable for building a useful native cross-platform JavaScript application.

The more-involved approach uses Node, Watchman, XCode, and the React Native command-line interface.

Instead, we choose the lesser-resistance path. Let’s spin up a JavaScript React Native application via Expo.

First, ensure that Node is installed. Next, from a command line, issue:

npm install -g expo-cli

Create a HelloWorld React Native application thus:

expo init HelloWorld

During execution, respond to the prompt that mentions arrow keys. Use the vertical arrow keys to choose the fancier tabbed version of the sample. After the wizard finishes, issue:

cd HelloWorld
npm start

The local Expo server begins execution. Its dashboard (our term for the Expo server web UI) opens in the desktop default browser. Initially, we’ll load and run the application directly in an Android or iPhone.

On a mobile device, use the Google or iPhone application store to install the Expo client.
Open Expo client (have mobile device attached to the local WiFi subnet).
Use the mobile device camera to scan the QR code from the Expo dashboard.

The device loads and run the created application. See the following iPhone 7 screen capture:

Tabs and link are live. The phone immediately reflects any sane changes made to screens/HomeScreen.js source code. The source code sits in a directory structure suitable for fleshing into a useful native mobile application. It can execute on Android and iOS.

Here, our loaded iOS application bypassed the App Store! How? Apple has removed its restriction that an App Store application cannot load code. Expo client, an approved App Store app, loaded the generated boilerplate app. Our application will remain installed in the iPhone until manually removed.

So…our application runs on a real device. We could stop here, but could it run on a simulator?

iOS Simulator

XCode bundles an iOS simulator. The simulator main menu enables external actions to be carried out against the fake device. Obtain a running iOS simulator:

Install XCode
Create any project
Main menu: Open Developer Tool -> Simulator

It’s okay to close XCode after the simulator starts. The main menu items enable setting external conditions on the simulated device. E.g. rotate, shake, …

What about iOS simulator on a PC? XCode runs only on macOS. That requires a Mac. But does it? MacOS is said to be able to run on a free Virtual Box via Hackboot. Sorry, we have not tested it, but check out https://blog.udemy.com/xcode-on-windows/.

Android Simulator

Android Studio bundles an Android simulator. It needs the npm install -g watchman bundle in order to mesh with the Expo environment. The simulator must be running before the Expo dashboard connects to it.

Install Android Studio (based on JetBrains)
Create any project
Main menu: Tools -> AVG Manager
Configure a virtual device in the manager
Click its start button in the Actions column

It’s okay to close Android Studio after the simulator starts. The simulator has a floating toolbar for setting external actions on the fake device.

Both Platforms Together

The following screen capture shows a pair of executing Nexus Android and iPhone X simulators executing our single application. They’re floating over an Expo server dashboard.

The simulators are independent applications, but each simultaneously runs a load of the single React Native quick-start application.

Here, we had edited the screens/HomeScreen.js to add lorem-bacon nonsense text. Each simulator carried out an instant live reload when we saved that edit. So did a real iPhone 7 sitting on the desk.

API

An Expo application is a Native React app that bundles the Expo SDK. The Expo team’s goal is to bypass any normal need to directly access native code to build a React Native app. This means coding in JavaScript instead of Objective-C, Java, Swift, or Kotlin. The app is a still a full React Native application.

If we should need to call a module written in native code, we could “eject” the build to a native code project. This is like Brexit! There is no undo (except maybe a Git revert). An ejected app still uses the Expo SDK exposed in the build tree. It would forever lose Expo server services, however.

IDEs

We used no IDE in this quick-start example, but Eclipse and Webstorm have React Native plugins that wrap the expo-cli used here. They provide additional React Native-aware editing and simulator launching.

Wrap-up

We used a single command to quickly generate a React Native application.
The Application Store Expo mobile client loaded the application into a real device.
An Android simulator and an iOS simulator each ran an instance of the application.
The application had a live reload capability across simulators and devices.
Ejecting an Expo React Native application only removes Expo server motherhood.
Ejection is unneeded unless the application has to import a pure React Native module.

Bottom line: try by spending five minutes to generate and run a sample React Native application via the Expo client.