How Run and Test React Native / Expo On Your Apple iOS Device and a FullStack Dev’s First Impressions

Once you have your Expo project up and running, start the local dev server in command line running npm run start in root of your project.

This will launch a development server and localhost:19002, with the message Tunnel ready. With options like running Android device/emulator, and run iOS simulator. With support for connection via Tunnel, LAN, and Local.

Got these two error messages by clicking on Run on Android, Run on iOS.

ERROR
16:27
Simulator not installed. Please visit https://developer.apple.com/xcode/download/ to download Xcode and the iOS simulator. If you already have the latest version of Xcode installed, you may have to run the command `sudo xcode-select -s /Applications/Xcode.app`.
ERROR
16:27
Couldn’t start project on Android: Error running adb: No Android device found. Please connect a device and follow the instructions here to enable USB debugging: https://developer.android.com/studio/run/device.html#developer-device-options. If you are using Genymotion go to Settings -> ADB, select “Use custom Android SDK tools”, and point it at your Android SDK directory.

Error above means you either don’t have Xcode installed, or it’s not linked, see below how to install it.

Install Xcode for Expo iOS Simulator

First login to developer.apple.com/download using your Apple ID, and accept terms and conditions. Then download Xcode, it’s 7.2GB so might take some time. Or if you are on a Mac from the Mac Apple Store, update to latest if you already have it. On my machine the update got stuck in App Store and wouldn’t finish, this forced me download it from the web then clean up the hard drive to create enough space to extract dmg file.

After it installed open Xcode from Spotlight, on localhost:19002 click on Run on iOS simulator.

Next we link Xcode, check the name of Xcode in your Applications folder, for me it was (Xcode-beta):

sudo xcode-select -switch /Applications/Xcode-beta.app/Contents/Developer/

Now Run on iOS simulator will open it. But still problems…

INFO
16:34
Booting device in iOS simulator...
ERROR
16:34
Error running `xcrun simctl boot 523E6366-FB24-4AF5-877B-5C95B1B50E16`: Invalid device: 523E6366-FB24-4AF5-877B-5C95B1B50E16
ERROR
16:34
There was a problem booting a device in iOS Simulator. Quit Simulator, and try again.
ERROR
16:34
Error installing or running app. Error: xcrun exited with non-zero code: 164

On the Expo install guide I saw this advice which fixed the issue. https://docs.expo.io/versions/latest/workflow/up-and-running/

Note: If you are on MacOS and Expo CLI gets stuck on Starting project at <path>, you may need to install Watchman on your machine. The easiest way to do this is with Homebrew, brew install watchman.

Now Expo app is there, launch it and your project should be there to start.

Run Expo on your own device (iOS)

To get it running on your device. Download the Expo Client App on your iOS device, register for a free account or login.

When the app starts, there is no clear way to attach to your localhost running project. Neither a button to scan the QR code our Expo server provided?

Going back to our localhost:19002, click on Send link with email…

This will email you a link, click it from your Mail app, and WALLA it’s running on your device!

Visual Studio (VS) Code Debugging with Expo on iOS

One of the best features is inline debugging while development. To get it running I did the following steps:

1. Install React Native Tools in VS Code

2. create a new debug config in .vscode/launch.json

{
"configurations": [
  {
    "name": "Attach to packager",
    "program": "${workspaceRoot}/.vscode/launchReactNative.js",
    "type": "reactnative",
    "request": "attach",
    "sourceMaps": true,
    "outDir": "${workspaceRoot}/.vscode/.react"
  }
  ]
}

3. Create a launch.json file .vscode

{
  "react-native": {
    "packager": {
    "port": 19001
  }
 }
}

4. Start debugger in VS Code, make sure you select the name of your config Attach to packager

5. Launch iOS Simulator from Expo in localhost mode, open expo app on iOS and launch the project.

6. In iOS Simulator go to Hardward > Shake Gesture to see Expo Debug settings and select Debug Remote JS. This should attach to your VS Code debugger.

7. Have an inline breakpoint in the code, it should stop there! Your debugging setup is finished.

Watch for the footer of VS code to light-up Orange. This will indicate your setup is ready to Rock and Roll!

If you see the error bellow, make sure you don’t have a tab open in Chrome with the debugger, close it and reload the Expo app.

Could not debug. Another debugger is already connected to packager. Please close it before trying to debug with VSCode. (error code 505)

My NPM project dependancies:

expo — build, deploy, and quickly iterate on native iOS and Android apps from the same JavaScript codebase
axios — Promise based HTTP client for the browser and node.js
jwt-decode — library that helps decoding JWTs token which are Base64Url encoded
mod10-check-digit — exports a single function that takes a number string as argument and returns the check digit number
moment — Parse, validate, manipulate, and display dates in javascript. (
react — A declarative, efficient, and flexible JavaScript library for building user interfaces.
react-native — Build native mobile apps using JavaScript and React
react-native-camera — A Camera component for React Native. Also supports barcode scanning.
react-navigation — Routing and navigation for your React Native apps