Your app on your phone

8 min basa·Lesson 3 sa Your app on your phone tonight

By the end of this lesson there is an app running on your own phone that you made in the last fifteen minutes, scanned from a QR code on your laptop screen. It is not a video of an app or a picture of one. You can hand the phone to someone sitting next to you.

Three commands. That is the whole lesson.

Everything you installed in lesson 2 exists so that these three lines work, and you can run all of them without a paid Claude account. Type them yourself.

Make the project

Open a terminal in a folder you can find again — your Documents folder is fine — and run:

The @latest matters. Without it npm may reuse an old cached copy of the tool.

npx create-expo-app@latest

Dapat mong makita

It asks: What is your app named?

Type the name you chose in lesson 1. Lowercase with hyphens is safest, because this becomes a folder name — pocket-ledger, not Pocket Ledger. The examples in the rest of this module use pocket-ledger; substitute yours everywhere.

It then downloads a few hundred packages, which takes a minute or three depending on your connection. That is normal and it only happens once.

Version-pinned, verified 2026-09-04. The default template gives you Expo SDK 57.0.0 (released 30 June 2026), React Native 0.86 and React 19.2. SDK 57 is a deliberately small release with no breaking changes from the previous one.

Use your own folder name. Every command from here runs inside the project.

cd pocket-ledger

Start the dev server

npx expo start

Dapat mong makita

A QR code drawn in the terminal, and a line reading Metro waiting on exp://192.168.1.24:8081 with your own address in it.

A terminal showing the Expo dev server with a QR code and the Metro waiting on exp line beneath it — Metro is the thing that turns your files into something the phone can run. Leave this window open — it stays running for the whole session and rebuilds every time you save.

Two things about this window. It does not finish, and that is correct — a dev server runs until you stop it. And the keys listed at the bottom work while it runs: a opens it on a connected Android device, w opens it in a browser, r forces a reload. You will use r in the next lesson.

Put it on the phone

Your laptop and your phone must be on the same Wi-Fi network. Not the same provider — the same network. A phone on mobile data will not find the laptop.

Open Expo Go on the phone and use its scanner to read the QR code from your laptop screen. The app downloads your project over the Wi-Fi and starts it.

An Android phone showing the starter Expo app running, next to the terminal line confirming the phone connected to the dev server — The starter app, on a real phone, about fifteen minutes after an empty folder. What it says on screen does not matter yet — that it is your phone, running your project, is the whole point.

What you are looking at is the starter template: a couple of placeholder screens and a tab bar. It is deliberately dull. In lesson 5 you change it by asking, and in module 2 it becomes the three tabs of your actual app.

Take a photograph of the phone. Send it to someone. This is the part of the course people do not believe until they have done it.

When the QR code does not connect

This is the single most likely place to give up, so it gets a section rather than a footnote.

Expo's own documentation names the cause plainly: restrictive network conditions, common on public Wi-Fi, and firewalls, common for Windows users, can stop a phone reaching the dev server over the local network. If Windows Defender pops up a dialog the first time you run npx expo start, tick Private networks and allow access. If you dismissed it, or you are on a café network, or the phone just sits there unable to connect, use the tunnel:

Routes the connection through a public URL instead of your local network. Slower, and it works almost everywhere.

npx expo start --tunnel

Dapat mong makita

A URL like https://xxxxxxx.bacon.19000.exp.direct:80 in place of the exp:// address. Scan the new QR code.

The Windows Defender Firewall dialog beside a terminal running expo start with the tunnel flag and a public URL — Allow the private-network access if you see the dialog. If you did not, or it did not help, --tunnel goes around the whole problem — at the cost of a slower reload.

One caveat: a tunnel URL is public. Anyone who has the address can reach your dev server while it is running. For a starter project that is not a real risk, but it is a reason to use plain npx expo start when it works and keep the tunnel as the fallback.

The tutorial we are not pretending does not exist

Expo publishes a free tutorial called Build with AI, at docs.expo.dev/tutorial/build-with-ai/. It teaches non-programmers to build a mobile app by prompting Claude Code, it is about an hour long, Windows is a first-class path in it, and it is genuinely good. It covers roughly the ground you just walked, in more detail, for free.

Go and do it if you have the hour — it will make you better at the rest of this course. Two things it does not do: it never ships anything to a store, and it never mentions that Claude Code requires a paid Claude plan. Those two omissions are more or less why this course exists. We are the hours after that hour: the store, the money, the twelve-tester wall, and the specific ways this goes wrong.

I-check ito

A folder with your app's name exists and you can cd into it
npx expo start shows a QR code and a Metro waiting on exp:// line
Your phone is on the same Wi-Fi as the laptop
The starter app is on your phone, opened from Expo Go, and you can scroll it
You know which command to run when the QR code will not connect

Kung makikita mo Something went wrong. Could not connect to the server.

The phone found the QR code but not your laptop. In order: check both devices are on the same Wi-Fi; look for a Windows Defender prompt hiding behind another window and allow private-network access; then stop the server with Ctrl+C and start it again with npx expo start --tunnel. The tunnel path works on hotel Wi-Fi, on office networks and behind firewalls, which is why it exists.

Kung makikita mo The Expo Go app says the project uses a different SDK version

Each build of Expo Go supports exactly one Expo SDK version, and the project and the app have to match. Update Expo Go from the Play Store — the Android version tracks current SDKs reliably. On iOS the App Store build of Expo Go can lag a release behind, which is one of the reasons this course is written Android-first.

What you just learned

npx create-expo-app@latest then npx expo start is the entire distance from an empty folder to a running app.
The dev server stays running. Metro rebuilds on every save, and r in that window forces a reload.
The phone and the laptop must be on the same Wi-Fi for the default QR connection to work.
npx expo start --tunnel goes around Windows firewalls and restrictive networks, at the cost of speed, and its URL is public.
Expo's own free Build with AI tutorial covers this first hour well; this course starts where it stops.

pagsasanay

Buksan ang Claude Cowork sa sarili mong computer at subukan ito sa totoong mga file. Nagtatapos ang bawat module sa isang checkpoint kung saan isusumite mo ang ginawa mo.

Buksan sa Claude

Susunod

The files Expo wrote for Claude