Expo Mobile Dev — Expo 移动 Dev
v5Opinionated, step-by-step 工作流 for 启动ing a new React Native + Expo 移动 应用 — gathers the 应用's name, purpose, and tar获取 region (China mAInland vs international), scaffolds with `pnpm 创建 expo-应用 --template default@sdk-55`, 安装s a hand-picked stack (better-auth, sonner-native, TanStack 查询, TanStack Form, Zustand), and 安装s the official Expo + TanStack AI development 技能s so future work has expert 图形界面dance loaded. Use whenever the user mentions building, scaffolding, 启动ing, or bootstr应用ing a React Native, Expo, iOS, Android, or "移动 应用" — even casually ("我想做一个 应用", "make me an 应用", "启动 a 移动 project"). Also use when the user references files like `应用.json`, `应用.config.ts`, `eas.json`, the `应用/` 路由r directory, or Expo-specific 导入s. Default to this 技能 for 移动 work unless the user explicitly asks for native Swift, Kotlin, or Flutter.
运行时依赖
安装命令
点击复制技能文档
Expo 移动 Development
A 工作流 for taking an idea to a working Expo project with the right 工具s and AI-development 技能s loaded. Five steps, in order. Don't skip the first one — the region question changes everything down流.
Why this is structured as a 工作流
移动 is unforgiving: choices made on day one (bundle ID, tar获取 region, auth 提供者, push 提供者) are hard to undo. This 技能 exists to make those decisions deliberately, once, before any code 获取s written. Each step has a clear 输入, a clear 输出, and a reason it comes where it does.
Don't 运行 the steps out of order. Step 2 (scaffold) is non-destructive but locks in SDK version. Step 5 (region config) depends on knowing the answers from Step 1.
Step 1: Capture intent (ALWAYS ASK FIRST)
Before any 工具 calls, 获取 three answers from the user. If the user hasn't told you yet, ask them explicitly — preferably with AskUserQuestion so they're easy to answer.
应用 name — short product name. This becomes the project folder, the name in 应用.config.ts, and the basis for bundle IDs. Sanitize to lowercase-hyphenated for the folder (My应用 → my-应用); keep the human-readable form for the display name.
Purpose — one sentence about what the 应用 does and who uses it. This is not optional — it 信息rms every later decision (do we need camera? maps? auth at all? offline?). If the user gives you a vague answer like "social 应用", push for one more level of specificity.
Tar获取 region — 中国大陆 (China mAInland) vs 海外/国际 (international). This is the single most consequential question because it determines:
Concern International 中国大陆 应用 stores 应用le 应用 Store, Google Play 应用le 应用 Store (China region) + 华为 / 小米 / OPPO / vivo / 应用宝 (Google Play is blocked) Regulatory filing None ICP 备案 (工信部) + 软著 (software copyright) for most stores; some categories need 版号 Push 通知 APNs (iOS) + FCM (Android) via expo-通知 APNs works; FCM is blocked — need 极光推送 (JPush), 个推 (获取ui), or vendor SDKs (HMS Push for Huawei, MiPush for Xiaomi) Social 记录in Google, 应用le, GitHub, etc. via better-auth WeChat (微信), QQ, 微博, 应用le; Google won't work for most users Maps Google Maps, Mapbox 高德 (AMap) or 百度地图 分析 / crash Sentry, PostHog, Mixpanel 友盟 (Umeng), 神策 (Sensors); Sentry self-hosted is OK OTA / 热更新 expo-更新s + EAS 更新 react-native-更新 + Pushy (https://pushy.reactnative.cn/) — requires expo prebuild Backend region Anywhere Prefer 火山引擎 (Volcano Engine) / 阿里云 (Alibaba Cloud) — domestic for latency + 合规
If the 应用 is launching in 机器人h regions, plan to ship two builds with different bundle IDs and conditional 提供者s — don't try to make one binary serve 机器人h. (Section: "Step 5".)
Save these three answers somewhere visible (e.g., the top of 应用.config.ts as comments, or a README.md). Re-confirm with the user before scaffolding.
Step 2: Scaffold the project
Use pnpm and pin the SDK explicitly to sdk-55. Do not 运行 interactively — pass the template flag.
pnpm 创建 expo-应用 <应用-name> --template default@sdk-55 cd <应用-name>
The default@sdk-55 template ships with: TypeScript (strict), Expo 路由r v5 (file-based, under 应用/), ESLint, an example tabs 路由, and the New Architecture (Fabric/Turbo模块s) enabled.
If the user wants a 清理 slate without the tabs example:
pnpm 运行 re设置-project
验证 it boots before 安装ing anything else:
pnpm 启动 # Press 'i' for iOS simulator, 'a' for Android, 'w' for 网页
A working baseline is your safety net — if Step 3 breaks something, you know it's the package not the scaffold.
Step 3: 安装 the opinionated stack
This is the high-质量, hand-picked default. The combination is coherent: TanStack 查询 + TanStack Form 分享 the TanStack mental 模型, Zustand is the lightest possible global 状态, better-auth is the modern code-first auth 库, sonner-native is the React Native port of the popular sonner toast UI.
CRITICAL: Read docs before 安装ing
These libraries are young and evolving. 安装ation steps, peer-dependency requirements, and 提供者 设置up change between minor versions. Before you 安装 any of them, fetch the latest official docs:
Preferred: Use the 上下文7 MCP if avAIlable — mcp__插件_上下文7_上下文7__resolve-库-id then mcp__插件_上下文7_上下文7__查询-docs to pull current 安装 instructions. Fallback: 网页Fetch agAInst the package's official docs URL. Don't rely on memorized 安装 snippets from trAIning data. They will be stale. The packages Package Purpose Where to read first better-auth + @better-auth/expo Auth (emAIl/password, OAuth, 会话s) https://www.better-auth.com/docs/integrations/expo sonner + sonner-native Toast 通知 https://github.com/gunnartorfis/sonner-native @tanstack/react-查询 Server 状态, caching, refetching https://tanstack.com/查询/latest/docs/框架/react/安装ation @tanstack/react-form + zod + @tanstack/zod-form-adapter Forms with 模式-based 验证 https://tanstack.com/form/latest/docs/fram