The more-involved approach uses Node, Watchman, XCode, and the React Native command-line interface.
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?
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 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.
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.
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.
- 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.
- Node: https://nodejs.org/en/download/
- Expo: https://docs.expo.io/versions/latest/
- Expo Client: https://github.com/expo/expo/blob/master/README.md
- Expo Eject (detach): https://github.com/expo/expo-docs/blob/master/versions/v24.0.0/expokit/detach.md
- React Native: https://facebook.github.io/react-native/docs/getting-started
- Expo difference: https://stackoverflow.com/questions/39170622/what-is-the-difference-between-expo-and-react-native\
- Code on Windows: https://blog.udemy.com/xcode-on-windows/