DEV Community

Cover image for Run an iOS App on the Physical Phone - Demystified
Cathy Lai
Cathy Lai

Posted on

Run an iOS App on the Physical Phone - Demystified

Introduction

So you have your app running on the iOS Simulator. What to do next to test, preview, and go live on the Apple App Store?

Even though React Native makes mobile development feels like writing JavaScript, the deployment process is nothing like web deployment (one click publishing)! Below is a mental model I found helpful when I published my PlanetFam Quiz app last year.

App Store, EAS, TestFlight, different Builds - an supermarket analogy

The parties involved

  • We (the developers): The brand owners
  • Our app: The product
  • EAS (Expo Application Service): The manufacturer + logistics company
  • Apple App Store: The supermarket
    • TestFlight: supermarket's tasting room. The product (our app) must be "registered" first before it can be entered in this room

The different app builds

To run a React Native app on a physical iPhone without a Metro server, you must package the JavaScript code into an offline bundle by switching your build configuration.

Build type Mental model Runs on Who is it for? Typical command
Expo Go πŸ§ͺ Prototyping in the lab Simulator + physical phone Fast experimentation & learning npx expo start
Development build 🍳 Internal test kitchen Simulator + physical phone Real-device testing during development eas build --profile development
Preview build 🧾 Samples / staff or VIP - only stock Physical phone (via TestFlight) QA, stakeholders, real-world testing eas build --profile preview
Production build πŸͺ Retail-ready packaged goods App Store / TestFlight Public users eas build --profile production

Technical requirements

Build type Expo Go required? Phone registered with Apple (UUID)? Local Metro server needed? Source code in GitHub?
Expo Go βœ… Yes ❌ No βœ… Yes ❌ No
Development build ❌ No βœ… Yes βœ… Yes ❌ No
Preview build ❌ No No if via TestFlight, Yes if via Ad Hoc Build* ❌ No βœ… Yes
Production build ❌ No ❌ No ❌ No βœ… Yes
  • Ad Hoc = installing a file directly; TestFlight = installing via Apple’s testing app."

Common confusions

Why a Production Build (+ submit) is needed before a Preview Build

The production build/submit step is not shipping your app to users yet. We are doing one specific thing:

Registering your product with the supermarket

That registration creates:

  • An App Store record
  • Distribution certificates
  • Provisioning profiles
  • Permission for Apple to host any builds of this app

Without that step:

  • TestFlight doesn’t know your app exists
  • Preview builds have nowhere to land
  • Apple has no legal or technical context for your binary

Why are there two QR codes when I build a development/preview version ?

When we run

eas build --profile development
Enter fullscreen mode Exit fullscreen mode

We get this QR code which is the address of our build

Scan the above QR code to install the app (the app icon will show up).

Then when we run the Metro server

npx expo start
Enter fullscreen mode Exit fullscreen mode

The second (smaller) QR code appears. This is the Metro server address.

Scan this smaller QR code to hot reload the code changes.

  • QR 1 (The Shell): This is the "house" for your app.
  • QR 2 (The Furniture): This is the actual code/logic moving into the house.

Next

I plan to write a 3 part series explaining a bit more details on each of the development phases: development, preview, published, and maintenance. Hopefully, they clear up some of the most confusing parts of iOS app development!

Questions

Please comment below and I will try to explain as much as possible..

Top comments (0)