Frontend · How to use a skill

build-mobile-app-with-expo

Builds an iOS and Android app with Expo and React Native - start the project the standard way, check the SDK version before any advice, install packages with npx expo install, then pick the right path for screens, navigation, dev builds or store release. Use when the user wants a mobile app, mentions Expo, React Native, Expo Go or EAS, or asks how to ship an app to the App Store.

Version 1.0 · Updated 2026-10-31

View raw SKILL.md

curl -fsSL --create-dirs 'https://theskillvault.ai/api/skills/build-mobile-app-with-expo/raw' -o ~/'.claude/skills/build-mobile-app-with-expo/SKILL.md' && curl -fsSL --create-dirs 'https://theskillvault.ai/api/skills/build-mobile-app-with-expo/files/LICENSE.txt' -o ~/'.claude/skills/build-mobile-app-with-expo/LICENSE.txt'

curl -fsSL --create-dirs 'https://theskillvault.ai/api/skills/build-mobile-app-with-expo/raw' -o '.cursor/skills/build-mobile-app-with-expo/SKILL.md' && curl -fsSL --create-dirs 'https://theskillvault.ai/api/skills/build-mobile-app-with-expo/files/LICENSE.txt' -o '.cursor/skills/build-mobile-app-with-expo/LICENSE.txt'

curl -fsSL --create-dirs 'https://theskillvault.ai/api/skills/build-mobile-app-with-expo/raw' -o '.agents/skills/build-mobile-app-with-expo/SKILL.md' && curl -fsSL --create-dirs 'https://theskillvault.ai/api/skills/build-mobile-app-with-expo/files/LICENSE.txt' -o '.agents/skills/build-mobile-app-with-expo/LICENSE.txt'

{
  "mcpServers": {
    "theskillvault": {
      "url": "https://theskillvault.ai/mcp"
    }
  }
}

Build a mobile app with Expo

Expo is the standard way to build an iOS and Android app with React Native. Most mistakes come from advice for the wrong SDK version or packages that do not match it. This skill sets up the shared rules, then sends each goal down the right path.

When to use

• Starting a new phone app for iOS and Android.
• Working in a project whose package.json has an expo dependency.
• Shipping an Expo app to TestFlight, the App Store or Google Play.

Not for a bare React Native project with no expo dependency.

Steps

1. Confirm it is Expo work. The user mentions Expo or EAS, or package.json lists expo. A native app that only uses EAS to build and ship counts too.
2. Read the real goal in plain words: build screens, add navigation, fetch data, ship to the stores, upgrade? Ask if it is unclear.
3. New app? Start the standard way:

   npx create-expo-app@latest my-app
   cd my-app && npx expo start

Open it in Expo Go on your phone by scanning the QR code. Keep screens in the app/ folder (Expo Router, file-based routes).

1. Detect the SDK version before any version-specific advice. Read the expo version in package.json and app.json or app.config.ts.
2. Read the docs for that SDK, not latest. Use version-pinned pages like https://docs.expo.dev/versions/v<SDK>.0.0/.... The latest pages can describe APIs your project does not have yet.
3. Install packages with npx expo install <pkg>, not plain npm install. It picks versions that match your SDK.
4. Know which setup you have. Committed ios/ and android/ folders mean native projects exist (prebuild or bare). Config plugins and native steps differ from a managed project.
5. Pick the path for the goal:

• Screens, styling, native controls: Expo UI and React Native components.
• Navigation (tabs, stacks, modals): Expo Router.
• A library that Expo Go cannot run: a development build (expo-dev-client).
• Builds and store release: EAS Build and EAS Submit. Check eas whoami, log in with eas login, and run eas init if extra.eas.projectId is missing.
• Over-the-air fixes after release: EAS Update.
• Moving to a newer SDK: a separate upgrade task, not hand-edited versions.

Expo publishes detailed skills for each path at github.com/expo/skills.

1. Check health with npx expo-doctor before builds and after adding packages.

Gotchas

• Advice written for another SDK is the most common failure. Always check step 4 first.
• Some libraries need native code and will not run in Expo Go. Use a development build.
• Upgrading the SDK by bumping version numbers by hand breaks dependencies. Use Expo's upgrade guide.
• FlatList or FlashList is for long lists. A settings-style grouped list is not virtualised.

Safety

• Never put API keys or secrets in app code or EXPO_PUBLIC_ variables. Anything in the app bundle can be read by users. Keep secrets on a server.
• Store signing credentials (keystores, certificates) in EAS or a password manager, never in git.

Works with other setups

Works on macOS, Windows or Linux; iOS builds run in the cloud with EAS if you have no Mac. Prefer another mobile stack, such as Flutter or native Swift and Kotlin, instead? Steps 2, 4 and 5 still apply: confirm the goal, check versions, read version-matched docs.

Done when

• The app runs on a phone or simulator, and npx expo-doctor reports no problems.
• You know the SDK version and which path (dev build, EAS Build, EAS Update) the next step needs.

Example prompt

"I'm new to Expo. Help me start an iPhone and Android app for my booking site."

---

Adapted from "expo-overview" in expo/skills by Expo / 650 Industries (MIT). See LICENSE.txt.

Adapted from Expo / 650 Industries (expo/skills, 'expo-overview') (Copyright (c) 2025-present 650 Industries, Inc. (aka Expo)), MIT License. Adapted by TheSkillVault: the router and shared setup rules rewritten as plain-language steps for beginners; skill map shortened to a goal list pointing at Expo's own skills; feedback-CLI section dropped; added gotchas, safety, portability and done-when sections.

Licence: MIT License. Attribution when you reuse it: Based on work by Expo / 650 Industries (expo/skills, 'expo-overview') (Copyright (c) 2025-present 650 Industries, Inc. (aka Expo), MIT License), https://github.com/expo/skills/blob/05754e71d02abe0d2d7a2fb5259ccac41f5ea59c/plugins/expo/skills/expo-overview/SKILL.md; adapted by TheSkillVault, https://theskillvault.ai