Beyond Vibe Coding: Build a Native Mobile App

A follow-along guide from tonight's build night. Event page: luma.com/event/evt-O6KJjtFuV9ctESO.

Tonight you're getting a real app running on your actual phone. Not a web page pretending to be an app. A real one, with the camera, the motion sensors, the GPS, all of it.

The stack: Expo and React Native for the app, Expo Go on your phone to run it, and Claude Code (I'll be demoing in the desktop app) to write it.

How the night goes: we get set up, we build one small app together so you can see the whole loop, then you pick a challenge and build your own. Demos at the end.

Quick prep

Do these before you arrive so you spend the night building instead of installing.

• Install Expo Go on your phone. It's a free app on the App Store and Google Play. This is what runs your code.
• Create a free Expo account, and give it a password. On iPhone, Expo Go will not run your project unless you're signed in to the same account in your terminal and in the app. Bring the username and the password — you'll type both. Full walkthrough in Get connected below.
• Get Git, Node.js, and a code editor on your computer. Not sure if you have them? Use the prompt below. Stuck? Come early and I'll help you out.
• Have a paid Claude or ChatGPT subscription. I'll demo primarily in the Claude Code desktop app, but either one works.

If you're not sure what's already installed, paste this into Claude or ChatGPT and let it walk you through it:

Help me install a code editor, Node.js (LTS, including npm), and Git. Ask which operating system I use, check what's already installed, and guide me one step at a time using official downloads. Verify everything works.

How this works

Four pieces, and it's worth 60 seconds to understand why the setup is shaped this way.

• Expo is the framework. It gives you React Native plus a standard library of native modules, so "use the camera" is an import instead of a project.
• Expo Go is a free app you install on your phone. It loads your project over the network, which means you skip Xcode, Android Studio, simulators, and app store review. You save the file, your phone updates.
• Your dev server runs on your laptop and prints a QR code in the terminal. Your phone scans it and connects.
• Your Expo account is the handshake between the two. Sign in to the same account in the terminal and in Expo Go and your laptop's dev server shows up on your phone. On iOS this stopped being a convenience and became a requirement — see the next section.

That QR code matters more than you'd think, which brings us to the one instruction that saves the night.

Get connected: sign in on both sides

As of Expo Go 57, iPhone requires you to be signed in to the same Expo account in two places: the Expo CLI in your terminal, and the Expo Go app on your phone. Miss either side and Expo Go refuses to load your project — it shows a message telling you which side needs the login. Android doesn't enforce it yet, but sign in there too, because it's what makes your dev server appear in the app on its own.

Five steps. Do them in this order — the order is the whole point.

1. Create an Expo account, with a password

Already have one and remember the password? Skip to step 2.

Sign up at expo.dev/signup with an email, a username, and a password. If you'd rather stay in the terminal, npx expo register opens that same page in your browser.

2. Log in to Expo in the terminal

npx expo login

It prompts for Email or username, then Password. If you'd rather authenticate in a browser tab, npx expo login --browser does the same job.

Then confirm it landed:

npx expo whoami

That prints your username. If it says you're not logged in, run npx expo login again before you go any further.

3. Scaffold the project and start the dev server

Now bring in the agent. Open an empty folder in Claude Code and send this, verbatim:

Help me create a new mobile app using Expo using React Native. Scaffold out the initial project and then make it easy to open up in Expo Go.

Don't start the dev server as a background task. Start it in the terminal, so I can scan the QR code for Expo Go at any time.

When it finishes you'll have a QR code sitting in your terminal. Leave it there and pick up your phone.

4. Log in to Expo Go on your phone

Open Expo Go, go to the Home tab, tap the avatar icon in the top right corner, and sign in with the same username and password from step 1.

Same account as the terminal. A different account fails exactly the same way as no account at all, which is a genuinely confusing five minutes if you have two.

Once you're in, the dev server you started in step 3 shows up right there on the Home tab under your development servers. Tapping it opens your project without scanning anything — handy every time after the first.

5. Scan the QR code

• iPhone: open the built-in Camera app, point it at the QR code in your terminal, and tap the banner that slides down. That hands the URL to Expo Go, which opens your project.
• Android: open Expo Go, tap Scan QR code, point it at the QR code.

A starter screen appears on your phone. That's the entire loop working, and everything after this is just prompting.

If you get a login message instead, read it: Expo Go tells you whether the terminal, the app, or both need signing in. Fix that side, then scan again or tap the dev server on the Home tab.

The build: Battery Match

We're building Battery Match. Your phone shows a QR code encoding your current battery percentage. You scan someone else's. If you're within 5% of each other, you match. It's silly, and that's on purpose: it touches the camera, a hardware sensor, structured data, and a real interaction between two humans in the room, in about 20 minutes.

With that starter screen live on your phone, here's the second prompt, verbatim:

now let's build out a simple app to display my current battery % as a QR code (structured data, not just a number) and scan other people's QR to see if we are a match (within 5% battery left).

* I open the app and it has a big QR code that represents my battery % left.
* it also has an option to scan another QR code.  clicking it opens up a camera to scan with simple instructions.
* A results page after scanning:
 * If the scanning user's battery is within 5% of the scanned person's battery, it shows a "Yay you matched"
 * If it's more than that, it says "Not a match, try scanning someone else"

So it should use Expo Camera and access to battery.   The QR code should represent and structured schema (so it just works with others scanning from this app).

The UI should be simple and only include the needed elements.

Read that prompt again before you paste it, because the shape of it is the actual lesson.

• It names the screens. Home, scanner, result. Three bullets, three screens. The agent isn't guessing at your information architecture.
• It names the native APIs. "Expo Camera and access to battery." You don't need to know the package names, but naming the capability stops the agent from building a fake mock version.
• It defines the data. "Structured data, not just a number" and "a structured schema (so it just works with others scanning from this app)" is what makes your QR readable by the person next to you. Without that line, everyone builds an app that only talks to itself.
• It constrains the UI. "Simple and only include the needed elements" is the difference between a demo you can show in two minutes and a settings screen nobody asked for.

Save the file, watch your phone reload, go scan somebody.

What works in Expo Go

Expo Go covers a lot. These all work on iOS and Android tonight, no build step:

Two caveats worth knowing: location works while the app is open, and reminders are scheduled on this phone. Both are plenty for a demo.

Install any of them with npx expo install, not npm install. It picks the version that matches your SDK, which saves you a whole category of confusing errors:

npx expo install expo-camera expo-sensors expo-haptics

Save these for a development build

Three things need a real build, so don't design your demo around them tonight:

• Remote push notifications. Local reminders are fine, notifications sent from a server are not.
• Background location. Tracking while the app is closed needs a build.
• Extra native libraries. Anything outside the Expo SDK, like a third-party map or Bluetooth package.

Now build your own

Pick one challenge and prompt your way there. These aren't specs, they're constraints. Five people picking the same one will build five different apps.

Break the ice

Make an app that makes it fun to connect and introduce people at an in-person event. The room is full of strangers. Fix that.

Move to play

Make a classic game controlled only by the accelerometer or gyroscope. No buttons, no controller. The way you tilt the phone is the game.

Go exploring

Make an app that gets people to explore the area around them. If it works sitting on the couch, you've missed it.

Make a habit fun

Give someone a fun way to stick to a daily habit. The habit is the easy part. The fun is the whole assignment.

Bring your own project

Already building something you want to try on a phone? Go for it.

Whichever one you pick, borrow the shape of the two prompts above: name the screens, name the native APIs, define the data, constrain the UI, and keep the dev server in the terminal.

Things that will trip you up

Almost every problem tonight is one of these seven.

• You're not logged in on both sides. On iPhone this is the new one, and it stops everything cold. Run npx expo whoami in the terminal, then check the avatar on Expo Go's Home tab. Same account in both places, then scan again. If you logged in after starting the dev server, restart the server too.
• Phone and laptop have to be on the same Wi-Fi. The classic cause of "the QR won't connect." Venue and conference networks often block devices from seeing each other. Fix it with npx expo start --tunnel, which routes around the network entirely. Slower, but it works.
• The agent backgrounded the dev server. No QR code, no way in. Just tell it: "Stop the background task and run the dev server in the terminal so I can see the QR code."
• The camera doesn't work in a simulator. Neither do the motion sensors, really. Use your actual phone. That's the whole point of Expo Go.
• Permission prompts only appear once. If you accidentally denied the camera or location, iOS and Android won't ask again. Go to your phone's Settings, find Expo Go, and flip the permission back on.
• npm install instead of npx expo install. You'll get a version of a package that doesn't match your SDK, and the error message won't tell you that. When adding an Expo library, always use npx expo install.
• Something is stale and weird. Shake the phone to open the dev menu and reload. If that doesn't do it, restart the server with a clean cache using npx expo start -c.

Quick reference

On your phone

Docs worth bookmarking: Expo SDK reference for every native module, expo.dev/go for the Expo Go app itself, and the login changelog for the two-sided sign-in rule.

Mentors are in the room tonight. If a prompt isn't landing, grab one. Have fun building, and bring the weird one to demos.

Jeff.