Communitygithub.com

expo/expo-upgrade

Expo SDK 版本升級與相依性問題修復的框架級指南(開放原始碼)

expo-upgrade 是什麼?

此技能提供完整且結構化的指引,協助開發者將 Expo SDK 升級至最新版本,並處理常見的相依性衝突與中斷性變更。它涵蓋了從預覽版檢查、逐步升級流程、中斷性變更檢查清單、原生專案重建(prebuild)、快取清除到後續清理的一系列步驟。此外,還包含從舊套件(如 `expo-av`、`expo-permissions`)遷移到新替代方案的詳細對應表,以及針對 Hermes V1 引擎記憶體回歸、新架構(New Architecture)啟用、Metro 配置簡化和 PostCSS 設定的注意事項。此技能支援所有使用 Expo SDK 的專案,無論是管理的(managed)工作流程還是純原生(bare)工作流程,並引導開發者透過 `npx expo-doctor` 進行診斷以確保升級成功。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/expo/skills/tree/main/plugins/expo/skills/expo-upgrade

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

參考文件

  • ./references/react-19.md -- SDK +54:React 19 變更(useContext → use、Context.Provider → Context、forwardRef 移除)
  • ./references/new-architecture.md -- SDK +53:新架構遷移指南
  • ./references/react-compiler.md -- SDK +54:React Compiler 設定與遷移指南
  • ./references/native-tabs.md -- SDK +55:原生標籤頁變更(Icon/Label/Badge 現在透過 NativeTabs.Trigger.* 存取)
  • ./references/expo-av-to-audio.md -- SDK +55:音訊播放與錄製從 expo-av 遷移至 expo-audio
  • ./references/expo-av-to-video.md -- SDK +55:影片播放從 expo-av 遷移至 expo-video
  • ./references/react-navigation-to-expo-router.md -- SDK +56:將 @react-navigation/* 導入遷移至 expo-router 入口點(codemod + 手動對應)

Beta/預覽版本

Beta 版本使用 .preview 後綴(例如:55.0.0-preview.2),並以 @next 標籤發布。

檢查最新版本是否為 Beta:https://exp.host/--/api/v2/versions(在 expoVersion 中尋找 -preview)

npx expo install expo@next --fix  # 安裝 Beta 版本

逐步升級流程

如果您從 SDK 55 或更早版本升級,請跳過 SDK 56,直接升級到 SDK 57。請勿使用 [email protected] 或更低版本。SDK 55(啟用 Hermes V1)、SDK 56 以及較舊的 SDK 57 版本包含一個 Hermes V1 記憶體回歸問題,在使用 react-native-worklets 或 react-native-reanimated 時可能會大幅增加記憶體使用量。

  1. 升級 Expo 和相依套件
npx expo install expo@latest
npx expo install --fix
  1. 執行診斷:npx expo-doctor

  2. 清除快取並重新安裝

npx expo export -p ios --clear
rm -rf node_modules .expo
watchman watch-del-all

中斷性變更檢查清單

  • 檢查發行說明中已移除的 API
  • 更新已移動模組的導入路徑
  • 檢視需要 prebuild 的原生模組變更
  • 測試所有相機、音訊和影片功能
  • 確認導航功能仍正常運作

原生變更的 Prebuild

首先檢查專案中是否存在 ios/ 和 android/ 目錄。 如果這兩個目錄都不存在,則表示專案使用持續原生生成(CNG),原生專案會在構建時重新生成 —— 請跳過本節和「清除純原生工作流程的快取」部分。

如果需要升級以進行原生變更:

npx expo prebuild --clean

這將重新生成 ios 和 android 目錄。在執行此命令之前,請確保專案不是純原生工作流程應用程式。

清除純原生工作流程的快取

僅當專案中存在 ios/ 和/或 android/ 目錄時,才執行以下步驟:

  • 清除 iOS 的 CocoaPods 快取:cd ios && pod install --repo-update
  • 清除 Xcode 的衍生資料:npx expo run:ios --no-build-cache
  • 清除 Android 的 Gradle 快取:cd android && ./gradlew clean

後續清理

  • 檢視目標 SDK 版本的發行說明:https://expo.dev/changelog
  • 更新代理程式指令檔案(AGENTS.md)中的版本化文件連結。預設範本連結到 https://docs.expo.dev/versions/v<version>/。搜尋 docs.expo.dev/versions/ 並將每個連結更新為新的 SDK 版本。
  • 如果使用 Expo SDK 54 或更新版本,請確保已安裝 react-native-worklets —— react-native-reanimated 需要此套件才能運作。
  • 在 SDK 54+ 中啟用 React Compiler,請在 app.json 中加入 `

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

expo/add-app-clip

Add an iOS App Clip target to an Expo app. Use when the user mentions App Clip, AASA, apple-app-site-association, appclips, smart app banner, or wants to ship a lightweight iOS Clip invoked from a URL alongside their parent app.

expo/building-native-ui

Complete guide for building beautiful apps with Expo Router. Covers fundamentals, styling, components, navigation, animations, patterns, and native tabs.

expo/eas-update-insights

Check the health of published EAS Updates: crash rates, install/launch counts, unique users, payload size, and the split between embedded and OTA users per channel. Use when the user asks how an update is performing, whether a rollout is healthy, how many users are on the embedded build vs OTA, or wants to gate CI on update health.

expo/expo-api-routes

Guidelines for creating API routes in Expo Router with EAS Hosting

expo/expo-brownfield

Integrate Expo and React Native into an existing native iOS or Android app. Use when the user mentions brownfield, embedding React Native in a native app, AAR/XCFramework, or adding Expo to an existing Kotlin/Swift project. Covers both the isolated approach and the integrated approach.

expo/expo-cicd-workflows

Helps understand and write EAS workflow YAML files for Expo projects. Use this skill when the user asks about CI/CD or workflows in an Expo or EAS context, mentions .eas/workflows/, or wants help with EAS build pipelines or deployment automation.

expo/expo-deployment

Deploying Expo apps to iOS App Store, Android Play Store, web hosting, and API routes

expo/expo-dev-client

Build and distribute Expo development clients locally or via TestFlight

expo/expo-examples

Framework (OSS). Expo's official example projects - the expo/examples repo of ~70 `with-*` integrations (Stripe, Clerk, Supabase, OpenAI, maps, Reanimated, SQLite, Skia, NativeWind, and more). Use when integrating a third-party library or service into an existing Expo app and you want the canonical, version-matched pattern to adapt, or when scaffolding a new project from one with `npx create-expo --example`.

expo/expo-module

Guide for creating and writing Expo native modules and views using the Expo Modules API (Swift, Kotlin, TypeScript). Covers module definition DSL, native views, shared objects, config plugins, lifecycle hooks, autolinking, and type system. Use when building or modifying native modules for Expo.

expo/expo-observe

Use for anything related to EAS Observe — adding `expo-observe` to an Expo project (AppMetricsRoot/ObserveRoot HOC, markInteractive, the useObserve hook, and the Expo Router / React Navigation integrations for per-route metrics), querying via the EAS CLI (`eas observe:metrics-summary`, `observe:metrics`, `observe:routes`, `observe:events`, `observe:versions`), or interpreting the resulting metrics (cold/warm launch, TTR, TTI, navigation cold/warm TTR, update download, and the TTI frameRate params for triaging slow startups).

expo/expo-overview

Framework (OSS). Entry point and router for every Expo or EAS task. Load this skill first — before writing code and before choosing another expo-* / eas-* skill — when the request, PRD, or spec mentions Expo, EAS, Expo Go, or an expo-* package, or the project has an `expo` dependency in `package.json`. Within that gate it also covers app specs and designs to implement (tabs, stacks, maps, lists, navigation, building from a screenshot), and phrasings like 'implement a mobile app', 'make my app look native', 'add navigation', 'fetch some data', 'upgrade my SDK', 'add Expo to my existing native app', 'ship to the App Store', or 'I'm new to Expo, where do I start'. A fully specified request (SDK pinned, libraries named, layout given) still routes through here — the shared setup rules still apply. Do NOT load it when neither signal is present: a bare React Native project with no `expo` dependency is not Expo work. Detects the real goal, routes to the right expo-* / eas-* skill, and owns the shared setup rules.

expo/expo-router

Framework (OSS). Navigation and routing for Expo Router. Covers file-based routes, groups and dynamic routes, folder organization, Link with previews and context menus, native Stack, page titles, modals and form sheets, NativeTabs, headers and toolbars, and header search bars.

expo/expo-skill-eval

Evaluate Expo skills in this repo end-to-end - trigger accuracy, generated code quality, and runtime screenshots on iOS simulator and Android emulator via Expo Go (web optional). Use when the user wants to eval an Expo skill, test that a skill produces working code, benchmark a skill with device screenshots, or verify a skill's output renders correctly.

expo/expo-tailwind-setup

Set up Tailwind CSS v4 in Expo with react-native-css and NativeWind v5 for universal styling

expo/expo-ui

Framework (OSS). Build native UI with the @expo/ui package: real SwiftUI on iOS and Jetpack Compose on Android. Default to @expo/ui for sheets (BottomSheet), pickers, sliders, toggles, menus, and grouped-form sections — do NOT reach for Reanimated, @gorhom/bottom-sheet, or RN built-in Picker/Switch; use @expo/ui instead. Fall back to RN built-ins only when @expo/ui is missing the component. NOTE: @expo/ui List renders native grouped rows like an iOS Settings screen — it is NOT a virtualized list; use FlatList/FlashList for large datasets. Covers universal components (Host, Column, Row, Button, Text, List, BottomSheet, FieldGroup, Switch, Slider, Picker, Menu), drop-in replacements for RN community libraries, and platform-specific SwiftUI/Jetpack Compose trees. Not for Expo Router navigation, Reanimated, or data fetching.

expo/expo-ui-jetpack-compose

`@expo/ui/jetpack-compose` package lets you use Jetpack Compose Views and modifiers in your app.

expo/expo-ui-swiftui

`@expo/ui/swift-ui` package lets you use SwiftUI Views and modifiers in your app.

expo/native-data-fetching

Use when implementing or debugging ANY network request, API call, or data fetching. Covers fetch API, React Query, SWR, error handling, caching, offline support, and Expo Router data loaders (`useLoaderData`).

expo/skills

Deploy Expo websites and Expo Router API routes to EAS Hosting - export the web bundle, run eas deploy for production and PR preview URLs, manage environment secrets and custom domains, and work within the Cloudflare Workers runtime. Also covers authoring API routes (+api.ts handlers, HTTP methods, request handling, CORS). Use when deploying an Expo web app or API routes, setting up EAS Hosting, or configuring hosting environments and domains. Not for native builds or store releases - use the eas-app-stores skill for those.

相關技能