Expo Development Patterns

Your EAS build is green, the app runs in Expo Go on your phone, and then a teammate adds react-native-vision-camera and Expo Go silently stops loading the app. Half your prompts assume the managed workflow, the other half assume a development build, and the AI keeps generating code for whichever one it guessed. The fix is not “use AI more” - it is giving the AI the two facts that actually constrain an Expo project: which SDK you are on, and whether you are running Expo Go or a dev build.

This recipe shows the Expo workflows that survive contact with EAS, app store review, and SDK upgrades, driven through Cursor, Claude Code, and Codex.

What You’ll Walk Away With

• A scaffolding prompt that pins the Expo SDK and the workflow type so the AI stops guessing
• A copy-paste prompt for an auth-protected Expo Router tab layout that handles the redirect race
• A NativeWind setup prompt that produces a typed theme, not just className strings
• An EAS Build + OTA-update prompt wired into GitHub Actions via the GitHub MCP server
• A “When This Breaks” map of the failure modes that actually cost you a day: SDK upgrades, Expo Go incompatibility, EAS credentials, and OTA runtime mismatches

Scaffolding an Expo App

The single biggest lever on output quality is naming the SDK version and the workflow type up front. As of June 2026 the current line is Expo SDK 56 (React Native 0.85, React 19.2, Hermes as the default engine). Pin it.

Cursor

Open Cursor in an empty folder, enter Agent mode (Cmd/Ctrl + I), and paste:

Scaffold a new Expo SDK 56 app using npx create-expo-app@latest with the TypeScript template. Add Expo Router (file-based routing), NativeWind v4 for styling, and configure a development build (not Expo Go) because we will add native modules later. Set up eas.json with development, preview, and production profiles.

Agent mode runs the CLI, edits app.json/eas.json, and shows a diff before applying. Review the eas.json profiles before accepting.

Claude Code

From an empty directory:

claude "Scaffold an Expo SDK 56 app with create-expo-app (TypeScript template), \
Expo Router, NativeWind v4, and an eas.json with development/preview/production \
profiles. We need a development build, not Expo Go."

Claude Code runs the scaffolder, then iterates on config files in the same session. Use a follow-up like claude "now add a typed env config with expo-constants and zod validation" to keep the context.

Codex

In the Codex CLI, prompts are positional. From an empty directory:

codex "Scaffold an Expo SDK 56 app with create-expo-app (TypeScript template), \
Expo Router, and NativeWind v4. Configure eas.json with development, preview, \
and production profiles for a development build."

For a long-running EAS setup you do not want to babysit, use codex --full-auto (workspace-write sandbox, on-request approvals) or hand the task to Codex Cloud so it runs the scaffold and opens a PR.

Caution

The managed-vs-bare distinction is gone, but the Expo Go vs development build distinction is not. Expo Go only ships the modules Expo bundles. The moment you add a third-party native module (vision-camera, a payments SDK, a custom config plugin), you need a development build (npx expo run:ios / eas build --profile development). Tell the AI which one you are targeting or it will write code that “works” in Expo Go and breaks for everyone on a dev build.

Expo Router: Auth-Protected Tabs

File-based routing is where most Expo time goes, and the auth-gate redirect is where most bugs live: redirect before the layout mounts and you get a “navigate before mounting the Root Layout” warning; redirect in render and you flash protected content for a frame.

Tip

Copy-paste prompt for an auth-protected Expo Router tab layout:

Build an Expo Router layout for SDK 56 with a (tabs) group for signed-in users and an (auth) group for login/register. Use a React context (useSession) backed by expo-secure-store for the token. In the root _layout.tsx, gate navigation with <Stack.Protected guard={isSignedIn}> so unauthenticated users only see (auth) routes - do not call router.replace during render. Show a SplashScreen until the session has finished loading from SecureStore. Include the file tree and the full app/_layout.tsx.

The AI should produce a tree like this and the matching layout files:

app/
  _layout.tsx        // SessionProvider + Stack.Protected guard
  (auth)/
    _layout.tsx
    login.tsx
  (tabs)/
    _layout.tsx      // Tabs
    index.tsx
    profile.tsx

How to evaluate the output: confirm it keeps the splash screen up with SplashScreen.preventAutoHideAsync() until SecureStore resolves, and that the gate uses Stack.Protected (SDK 53+) rather than a useEffect + router.replace, which causes the redirect flash. If you see router.replace inside a render path, send it back with “move the guard out of render.”

Styling with NativeWind

The trap with NativeWind prompts is getting a wall of className="bg-blue-500" with magic values. Ask for a typed theme so colors come from one place.

Tip

Copy-paste prompt for a typed NativeWind theme with dark mode:

Configure NativeWind v4 for this Expo SDK 56 app. Define brand colors (primary, surface, danger) as CSS variables in global.css and map them in tailwind.config.js so bg-primary works in both light and dark mode. Wire useColorScheme from nativewind to follow the system theme with a manual override stored in SecureStore. Generate a typed <Button variant="primary | danger" loading> component using these classes with a pressed-state opacity animation via Pressable.

Reject the first draft if the button hard-codes hex values instead of bg-primary - the whole point is that a rebrand is a one-file change.

EAS Build, OTA Updates, and CI

This is where the GitHub MCP server earns its place. Without it, the AI writes a plausible-looking eas-build.yml, you paste it, push, and discover the secret names are wrong. With the GitHub MCP server connected, the agent reads your actual repo - existing workflows, secret names, branch protection - and writes CI that matches.

Setup is identical across all three tools (it is the official remote GitHub MCP server):

Cursor

Add to .cursor/mcp.json:

{
  "mcpServers": {
    "github": {
      "url": "https://api.githubcopilot.com/mcp/"
    }
  }
}

Claude Code

claude mcp add --transport http github https://api.githubcopilot.com/mcp/

Authenticate with /mcp inside the REPL on first use.

Codex

Add to ~/.codex/config.toml:

[mcp_servers.github]
url = "https://api.githubcopilot.com/mcp/"

Tip

Copy-paste prompt for EAS Build + OTA in GitHub Actions (with the GitHub MCP server connected):

Using the GitHub MCP server, read this repo’s existing .github/workflows and configured secrets. Then create a workflow that runs eas build --profile preview --platform all --non-interactive on pull requests and eas update --branch production on pushes to main. Use the EXPO_TOKEN secret for auth - if a differently named token secret already exists, use that instead and tell me. Gate the build job on the existing lint/test jobs rather than duplicating them.

Caution

eas update ships JS/asset changes over the air, but an OTA update can only run against a build whose native runtime matches. If you bump expo-updates, add a native module, or change runtimeVersion, you must ship a new store build first - otherwise older installs silently stop receiving updates. Make runtimeVersion policy explicit in your prompt ("runtimeVersion": { "policy": "appVersion" }) so the AI does not generate updates that strand users.

Push Notifications

Expo notifications have one production gotcha the AI routinely skips: you must send the push token to your backend and handle the notification-tap deep link, not just request permission.

Tip

Copy-paste prompt for end-to-end Expo push notifications:

Implement push notifications for this Expo SDK 56 app using expo-notifications. Register for a push token with getExpoPushTokenAsync, POST it to /api/devices on login, and re-register when the token changes. Configure a Notifications.setNotificationHandler that shows banners in foreground. Add a useLastNotificationResponse handler that deep-links a tapped notification to the right Expo Router screen. Include the Android channel setup and the iOS aps-environment entitlement note for the dev vs production APNs key.

When This Breaks

Mobile is where AI confidence and reality diverge the most. The four failure modes below are the ones that actually cost a day:

• SDK upgrade breakage. npx expo install expo@^56 is the easy part; transitive native deps and config plugins are not. Run npx expo-doctor and paste its full output into the AI with: “We just upgraded to SDK 56. Here is expo-doctor output. Fix each version mismatch using npx expo install --fix, and flag any third-party package with no SDK 56 support.” Do not let the AI hand-edit versions in package.json - expo install resolves the compatible ranges.
• “It works in Expo Go but not the dev build” (or vice-versa). This is almost always a module that is not in Expo Go, or a config plugin that only applies during prebuild. Tell the AI which environment fails and ask it to check whether the module requires a development build and a config plugin entry in app.json.
• EAS credentials and provisioning. When eas build fails on signing, paste the build log. The usual culprits are an expired Apple distribution cert or a missing push key. Ask the AI to interpret the specific EAS error rather than regenerating credentials blindly - eas credentials is interactive and destructive if misused.
• OTA runtime mismatch. If an eas update “succeeds” but devices never pick it up, the runtimeVersion of the update does not match any installed build. Have the AI diff the update’s runtime version against your latest store build before assuming the update pipeline is broken.

Note

For crash triage, connect the hosted Sentry MCP server (https://mcp.sentry.dev/mcp) so the agent can pull the actual stack trace and breadcrumbs for a release instead of guessing from a screenshot. The Expo Sentry plugin (@sentry/react-native with the Expo config plugin) uploads source maps on EAS builds, so the agent sees symbolicated traces. The trade-off vs a one-off skill: the MCP server is a persistent, queryable connection to your real issues - worth it once you are shipping to stores.

What’s Next

• React Native patterns for the bare workflow and native module details
• Flutter Development Patterns if you are comparing cross-platform stacks
• Backend integration for the API your device-token and sync endpoints talk to