Mobile development with Cursor + Expo (guide outline)#

This entry is intentionally written as an outline you can follow. It’s optimized for a mobile-first workflow (Expo Go on a real phone), then expands to iOS/Android simulators.

1) What you’ll build (small, real app)#

Build a tiny coffee app to keep scope tight and make navigation real:

• Recipes list (brew methods)
• Recipe detail (ratio + steps)
• Brew timer (countdown, optional step cues)
• Optional: brew history (stored locally)

“Done” for this stage: you can open a recipe, start a timer, and complete a brew on your phone.

2) The development loop (Expo mental model)#

Expo’s mental model is simple:

1. You run a dev server (Metro)
2. You open the app (Expo Go or a simulator)
3. You edit code in Cursor
4. The app reloads, you verify, you repeat

Expo Go vs simulator/emulator (practical definition)#

• Expo Go: fastest path to test on a real device, great for camera, GPS, real performance feel.
• Simulator/emulator: great for repeatable testing, different device sizes, and platform-specific behavior.

3) Prerequisites (link, don’t repeat)#

This guide assumes you already have Cursor, Node.js, and Git installed.

• If you don’t, follow /blog/dev-environment-setup first (Cursor + Node.js LTS + Git).

You’ll also need:

• A phone with Expo Go installed
• For simulators/emulators:
  • iOS Simulator: requires macOS + Xcode
  • Android Emulator: requires Android Studio

4) Project creation (baseline commands)#

Use the official Expo project generator, then iterate inside Cursor.

Typical flow:

npx create-expo-app@latest my-coffee-timer
cd my-coffee-timer
npx expo start

Your exact steps can vary by Expo version and template. The important part is: use TypeScript and use Expo Router (recommended for file-based navigation).

5) Expo app entry structure (required section, Expo Router)#

This section prevents the most common beginner problem in Expo Router: “I don’t know which file runs first.”

If using Expo Router (recommended)#

Key ideas:

• app/_layout.tsx renders before any route. It’s the root layout for your app.
• The initial route is the first matching index.tsx for / (often app/index.tsx).
• Route groups use parentheses (example: app/(tabs)/...). The group name doesn’t become part of the URL.

References (Expo):

• Expo Router root layout (app/_layout.tsx): https://docs.expo.dev/router/basics/layout/#root-layout
• Initial route via first matching index.tsx: https://docs.expo.dev/router/basics/
• Route groups notation ((group)): https://docs.expo.dev/router/basics/notation/

Example structure:

my-coffee-timer/
  app/
    _layout.tsx
    index.tsx
    recipes/
      [id].tsx
    timer.tsx
    history.tsx
    (tabs)/
      _layout.tsx
      index.tsx

“Done” for this stage: you can point at your repo and explain which files control:

• the app root (app/_layout.tsx)
• the first screen (app/index.tsx or a grouped index.tsx)
• a detail route (app/recipes/[id].tsx)
• a focused flow screen (example: app/timer.tsx)

If not using Expo Router (brief contrast)#

Classic React Native apps often start at App.tsx. Advanced setups can use a custom main entry in package.json and registerRootComponent, but this guide stays focused on Expo Router.

6) Navigation and screens#

Map the outline to routes/screens:

• Recipes list → app/index.tsx (or app/recipes/index.tsx if you prefer)
• Recipe detail → app/recipes/[id].tsx
• Timer → app/timer.tsx
• Optional: History → app/history.tsx

“Done” for this stage: you can open a recipe, navigate to the timer, and return back to the recipe list.

7) Data & state (minimal)#

Start with local state (current recipe, timer state). If you want persistence, make it an optional step:

• Save a brewHistory[] list locally (example: AsyncStorage)
• Each entry can store: recipe id, brew method, timestamp, and total time

“Done” for this stage: your timer flow works end-to-end, and optional history persists after app restart.

8) Styling & UI basics (mobile UX checklist)#

Keep UI minimal and readable. Mobile UX basics that matter:

• Tap targets large enough
• Safe area respected
• Keyboard doesn’t hide inputs
• Lists scroll smoothly

9) Running on a phone (Expo Go)#

Outcome: open the project in Expo Go on a real phone and use it as your primary development loop.

How Expo Go works (quick mental model)#

• Expo Go is a pre-built client app that already includes the Expo SDK (camera, notifications, etc.).
• When you scan the QR code / open the dev URL, Expo Go opens an “experience” that points to your dev server.
• Your phone downloads the JavaScript bundle + assets from Metro and runs them inside Expo Go.
• Because Expo Go is pre-built, it can only use native capabilities that ship with Expo Go. If you need custom native modules, switch to a development build (see the note earlier in this guide).

Download & setup Expo Go (first time)#

1. Install Expo Go from the App Store (iOS) or Google Play (Android).
2. Open it once and grant Camera permission (for QR scanning).
3. Make sure your phone and computer are on the same network. If LAN is blocked (hotel/corporate Wi‑Fi), use Tunnel mode in the Expo dev server UI.

What to do (practical flow):

1. Start Metro from Cursor’s terminal (npx expo start)
2. Open the Expo Go app
3. Scan the QR code (or use the URL)
4. Make a small UI edit and confirm it reloads

Common pitfalls and quick fixes:

• Phone and computer on different networks
• QR code scanning issues
• “Stuck” bundler cache

10) Running on simulators/emulators#

Simulators are for repeatability. Use them after your flow works on your phone.

Outcome: run the same app in:

• iOS Simulator (macOS + Xcode)
• Android Emulator (Android Studio)

iOS Simulator setup (macOS only)#

Requirements: macOS + Xcode.

Steps:

• Confirm Xcode is installed
• Confirm you can open iOS Simulator
• Run the Expo app on the simulator

Common issues:

• Xcode command line tools missing
• Simulator fails to boot

Android Emulator setup (Windows/macOS/Linux)#

Requirements: Android Studio, Android SDK, and an AVD (emulator device).

Steps:

• Confirm Android Studio + SDK tools are installed
• Create an AVD
• Boot the emulator
• Run the Expo app on Android

Common issues:

• Missing SDK / environment variables
• Emulator networking (app can’t reach localhost)

11) Troubleshooting (reusable Cursor prompt)#

12) How to use Cursor effectively for mobile dev#

High-leverage habits:

• Start in Plan Mode: ask for a small plan, then execute one step at a time.
• Keep prompts scoped: one feature or one bug per prompt.
• Paste logs exactly, don’t summarize errors.
• Verify after each change on phone first, then simulators.

13) Next steps#

Keep the next steps honest and small:

• Learn about dev clients and EAS builds (store-ready workflow), when you actually need them
• Add authentication and a backend later (for example, Supabase), once navigation and the core loop are solid