Claude Code for Mobile Apps: Build React Native and Expo Apps with AI

Claude Code works just as well for mobile development as it does for web — but almost nobody is talking about it.

The workflow is the same: describe what you want, Claude Code builds it, you test on your device or simulator.

---

Use Case 1: Expo Project Scaffold with Navigation

Create a new Expo project with TypeScript:

Navigation (Expo Router):
- Tab bar with 4 tabs: Home, Search, Activity, Profile
- Home tab: stack navigator (Home → Detail screen)
- Profile tab: stack navigator (Profile → Settings → Edit Profile)

Shared components:
- Avatar — circular image with fallback initials
- Card — standard card with title, subtitle, image
- Custom TabBar with icons (lucide-react-native)

Config: TypeScript strict, path aliases, dark mode via useColorScheme.
Make the tab bar look modern — not the default Expo tab bar.

---

Use Case 2: Authentication Flow

Build the auth flow for our Expo app:

Screens: Welcome, Sign In, Sign Up, Forgot Password, Verify Email (6-digit OTP)
Backend: Supabase Auth with Google OAuth (Expo AuthSession)
Store session using expo-secure-store (not AsyncStorage).
Auto-redirect to main app if session exists.
Auth context with useAuth() hook.
Navigation guard: unauthed → auth screens, authed → main tab navigator.

---

Use Case 3: Offline-First Data Sync

Implement offline-first data sync:

- expo-sqlite for local database mirroring Supabase schema
- All CRUD operations hit local SQLite first
- Sync engine: on app foreground + connectivity restore, push unsynced changes
- Conflict resolution: last-write-wins on updated_at
- UI indicator: green (synced), yellow (syncing), red (offline)
- Pull-to-refresh triggers manual sync
- Queue failed syncs with exponential backoff

---

Use Case 4: Native Device Features

Add camera and location features:

Camera: full-screen view, tap capture, front/rear switch, preview with Use/Retake.
Location: attach to posts (optional toggle), reverse geocode to neighborhood name,
small map preview on posts.

Handle all permission states: not asked (custom explanation), denied (Open Settings button), granted.

---

Use Case 5: Push Notifications

Set up Expo push notifications:

- Register for tokens, store in Supabase linked to user_id
- Foreground: in-app banner. Background: system notification.
- Deep links: new_message → chat, task_assigned → task detail
- Notification preferences screen with quiet hours
- Handle: expired tokens, reinstalls, multiple devices

---

Use Case 6: App Store Preparation

Prepare for App Store and Google Play:

- app.json: privacy descriptions, permissions, splash screen, icons
- EAS Build config: development, preview, production profiles
- Pre-submission checklist script (type check, tests, no console.logs, correct versions)
- Store listing metadata: description, keywords, release notes

---

Mobile CLAUDE.md Template

# CLAUDE.md

## Stack
Expo SDK 52, Expo Router, TypeScript strict, Supabase, expo-sqlite for offline.

## Conventions
- Screens in app/ using Expo Router file-based routing
- Use useColorScheme() for dark mode
- Always handle permission states (not asked, denied, granted)
- Always handle offline state gracefully
- Safe area insets on all screens

## Don'ts
- Don't eject from Expo managed workflow
- Don't use AsyncStorage for sensitive data (use expo-secure-store)
- Don't hardcode dimensions — use flex layouts

If you're building mobile apps with Claude Code, join AI Builder Club. We discuss cross-platform strategies, Expo workflows, and real app launches.