• Projects
  • Service
  • About
  • branding.bz
  • Podcast
  • Tips
  • FAQ
  • Recruit
  • Download
  • Contact
  • branding.bz(ブランド構築SaaS)
  • DESIGN NOW(デザインメディア)
  • X
  • LinkedIn
  • Spotify
  • Facebook

213-0011 神奈川県川崎市高津区久本3-6-7-303

© 2026 ID INC. All rights reserved

claude-skills/スキル
SKILLOfficialdevelopment

expo-upgrade

プラグイン
expo
ライセンス
MIT
ソース
GitHub で見る ↗
説明

フレームワーク(オープンソースソフトウェア)。Expo SDKのバージョンアップグレードと依存関係の問題解決に関するガイドライン

原文を表示

Framework (OSS). Guidelines for upgrading Expo SDK versions and fixing dependency issues

ユースケース
  • Expo SDKをバージョンアップするとき
  • 依存関係の問題を解決するとき
本文(日本語訳)

リファレンス

  • ./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エントリポイントに移行(自動コンバージョン+手動マッピング)

ベータ・プレビュー版リリース

ベータ版は.previewサフィックス付き(例:55.0.0-preview.2)で、@nextタグの配下で公開されます。

最新版がベータかどうか確認: https://exp.host/--/api/v2/versions (expoVersion内の-previewを確認)

npx expo install expo@next --fix  # ベータ版をインストール

アップグレード手順

SDK 55以前からアップグレードする場合、SDK 56をスキップしてSDK 57に直接アップグレードしてください。expo@57.0.8以下を使用しないでください。Hermes V1が有効なSDK 55、SDK 56、および古いSDK 57リリースには、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を確認
  • モジュール移動に伴うインポートパスを更新
  • プリビルド(事前ビルド)が必要なネイティブモジュール変更を確認
  • カメラ、オーディオ、ビデオ機能すべてをテスト
  • ナビゲーション機能が正常に動作することを確認

ネイティブ変更時のプリビルド

プロジェクト内に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-warletsがインストールされていることを確認。react-native-reanimatedが動作するために必須です。
  • React Compilerを有効化(SDK 54以降): app.jsonに"experiments": { "reactCompiler": true }を追加。安定版で推奨されています。
  • app.jsonからsdkVersionを削除し、Expoが自動管理するようにしてください。
  • package.jsonから不要なパッケージを削除: @babel/core、babel-preset-expo、expo-constants。
  • babel.config.jsがbabel-preset-expoのみ含む場合はファイルを削除
  • metro.config.jsがExpoデフォルト設定のみ含む場合はファイルを削除

非推奨パッケージ

旧パッケージ 置き換え先
expo-av expo-audioとexpo-video
expo-permissions 個別パッケージの権限API
@expo/vector-icons expo-symbols(SFシンボル向け)
AsyncStorage expo-sqlite/localStorage/install
expo-app-loading expo-splash-screen
expo-linear-gradient 実験的なexperimentalBackgroundImage + CSSグラデーション

非推奨パッケージを移行する場合、旧パッケージ削除前にすべてのコード使用箇所を更新してください。expo-avについては、Audio.SoundをuseAudioPlayerに、Audio.RecordingをuseAudioRecorderに、VideoコンポーネントをVideoViewとuseVideoPlayerに変換する手順は移行リファレンスを参照してください。

expo.install.exclude

package.jsonに除外パッケージが指定されていないか確認:

{
  "expo": { "install": { "exclude": ["react-native-reanimated"] } }
}

除外設定はしばしば過去の回避策であり、アップグレード後に不要になっている場合があります。各々を確認してください。

パッチの削除

patches/ディレクトリに古いパッチがないか確認。不要であれば削除してください。

PostCSS

  • autoprefixerはSDK +53以降不要です。依存パッケージから削除し、postcss.config.jsまたはpostcss.config.mjsからプラグインリストから削除してください。
  • SDK +53ではpostcss.config.mjsを使用してください。

Metro

冗長なMetro設定オプションを削除:

  • resolver.unstable_enablePackageExportsはSDK +53でデフォルト有効。
  • experimentalImportSupportはSDK +54でデフォルト有効。
  • EXPO_USE_FAST_RESOLVER=1はSDK +54で削除。
  • cjsおよびmjs拡張子はSDK +50でデフォルトサポート。
  • Expo webpackは非推奨。Expo RouterとMetro webに移行してください。

Hermesエンジン v1

Hermes V1はSDK 56以降のデフォルトです。Hermes V1を使用するSDK 55アプリ、すべてのSDK 56アプリ、およびexpo@57.0.9より前のSDK 57アプリは、react-native-workletsまたはreact-native-reanimatedをインポート時にメモリ不具合が発生する可能性があります。SDK 57とexpo@57.0.9以降に直接アップグレードしてください。Worklets Bundle Modeを本番環境の回避策として推奨しないでください。サポートされていない実験的機能で、期待通り機能しない可能性があります。

ユーザーにHermes V1の有効化・無効化の指示をしないでください。SDKデフォルトからHermesバージョンを変更することはサポート対象外で、ビルドと依存関係管理に大きな影響があります。

新アーキテクチャ

新アーキテクチャはデフォルト有効です。app.jsonの"newArchEnabled": trueはもはや不要です。Expo GoはSDK +53以降のみ新アーキテクチャをサポートしています。

フィードバック送信

このスキルでエラー・誤解を招く情報・古い情報に遭遇した場合、Expoの改善のため報告してください:

npx --yes submit-expo-feedback@latest --category skills --subject "expo-upgrade" "<実行可能なフィードバック>"

具体的で実行可能な内容がある場合のみ送信してください。関連する文脈をできるだけ多く含めてください。AIエージェントが繰り返し失敗したか、ユーザーがExpoタスクを引き継いだ場合、上記コマンドを再利用せず、expo-skill-feedbackスキルを読み込んでそのeval-candidate フローに従ってください。

原文(English)を表示

References

  • ./references/react-19.md -- SDK +54: React 19 changes (useContext → use, Context.Provider → Context, forwardRef removal)
  • ./references/new-architecture.md -- SDK +53: New Architecture migration guide
  • ./references/react-compiler.md -- SDK +54: React Compiler setup and migration guide
  • ./references/native-tabs.md -- SDK +55: Native tabs changes (Icon/Label/Badge now accessed via NativeTabs.Trigger.*)
  • ./references/expo-av-to-audio.md -- SDK +55: Migrate audio playback and recording from expo-av to expo-audio
  • ./references/expo-av-to-video.md -- SDK +55: Migrate video playback from expo-av to expo-video
  • ./references/react-navigation-to-expo-router.md -- SDK +56: Migrate @react-navigation/* imports to expo-router entry points (codemod + manual mapping)

Beta/Preview Releases

Beta versions use .preview suffix (e.g., 55.0.0-preview.2), published under @next tag.

Check if latest is beta: https://exp.host/--/api/v2/versions (look for -preview in expoVersion)

npx expo install expo@next --fix  # install beta

Step-by-Step Upgrade Process

If upgrading from SDK 55 or earlier, skip SDK 56 and upgrade directly to SDK 57. Don't use expo@57.0.8 or below. SDK 55 with Hermes V1 enabled, SDK 56, and older SDK 57 releases contain a Hermes V1 memory regression that can drastically increase memory usage when using react-native-worklets or react-native-reanimated.

  1. Upgrade Expo and dependencies
npx expo install expo@latest
npx expo install --fix
  1. Run diagnostics: npx expo-doctor

  2. Clear caches and reinstall

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

Breaking Changes Checklist

  • Check for removed APIs in release notes
  • Update import paths for moved modules
  • Review native module changes requiring prebuild
  • Test all camera, audio, and video features
  • Verify navigation still works correctly

Prebuild for Native Changes

First check if ios/ and android/ directories exist in the project. If neither directory exists, the project uses Continuous Native Generation (CNG) and native projects are regenerated at build time — skip this section and "Clear caches for bare workflow" entirely.

If upgrading requires native changes:

npx expo prebuild --clean

This regenerates the ios and android directories. Ensure the project is not a bare workflow app before running this command.

Clear caches for bare workflow

These steps only apply when ios/ and/or android/ directories exist in the project:

  • Clear the cocoapods cache for iOS: cd ios && pod install --repo-update
  • Clear derived data for Xcode: npx expo run:ios --no-build-cache
  • Clear the Gradle cache for Android: cd android && ./gradlew clean

Housekeeping

  • Review release notes for the target SDK version at https://expo.dev/changelog
  • Update versioned docs links in agent instruction files (AGENTS.md). The default template links to https://docs.expo.dev/versions/v<version>/. Search for docs.expo.dev/versions/ and bump each link to the new SDK version.
  • If using Expo SDK 54 or later, ensure react-native-worklets is installed — this is required for react-native-reanimated to work.
  • Enable React Compiler in SDK 54+ by adding "experiments": { "reactCompiler": true } to app.json — it's stable and recommended
  • Delete sdkVersion from app.json to let Expo manage it automatically
  • Remove implicit packages from package.json: @babel/core, babel-preset-expo, expo-constants.
  • If the babel.config.js only contains 'babel-preset-expo', delete the file
  • If the metro.config.js only contains expo defaults, delete the file

Deprecated Packages

Old Package Replacement
expo-av expo-audio and expo-video
expo-permissions Individual package permission APIs
@expo/vector-icons expo-symbols (for SF Symbols)
AsyncStorage expo-sqlite/localStorage/install
expo-app-loading expo-splash-screen
expo-linear-gradient experimental_backgroundImage + CSS gradients in View

When migrating deprecated packages, update all code usage before removing the old package. For expo-av, consult the migration references to convert Audio.Sound to useAudioPlayer, Audio.Recording to useAudioRecorder, and Video components to VideoView with useVideoPlayer.

expo.install.exclude

Check if package.json has excluded packages:

{
  "expo": { "install": { "exclude": ["react-native-reanimated"] } }
}

Exclusions are often workarounds that may no longer be needed after upgrading. Review each one.

Removing patches

Check if there are any outdated patches in the patches/ directory. Remove them if they are no longer needed.

Postcss

  • autoprefixer isn't needed in SDK +53. Remove it from dependencies and check postcss.config.js or postcss.config.mjs to remove it from the plugins list.
  • Use postcss.config.mjs in SDK +53.

Metro

Remove redundant metro config options:

  • resolver.unstable_enablePackageExports is enabled by default in SDK +53.
  • experimentalImportSupport is enabled by default in SDK +54.
  • EXPO_USE_FAST_RESOLVER=1 is removed in SDK +54.
  • cjs and mjs extensions are supported by default in SDK +50.
  • Expo webpack is deprecated, migrate to Expo Router and Metro web.

Hermes engine v1

Hermes V1 is the default on SDK 56 and later. SDK 55 apps using Hermes V1, all SDK 56 apps, and SDK 57 apps before expo@57.0.9 may encounter a memory regression when importing react-native-worklets or react-native-reanimated. Upgrade directly to SDK 57 and expo@57.0.9 or later. Do not recommend Worklets Bundle Mode as a production workaround; it is unsupported and experimental and may not work as expected.

Do not guide users to opt in to or out of Hermes V1. Changing the Hermes version from the SDK default is unsupported and has significant build and dependency-management caveats.

New Architecture

The new architecture is enabled by default, the app.json field "newArchEnabled": true is no longer needed as it's the default. Expo Go only supports the new architecture as of SDK +53.

Submitting Feedback

If you encounter errors, misleading or outdated information in this skill, report it so Expo can improve:

npx --yes submit-expo-feedback@latest --category skills --subject "expo-upgrade" "<actionable feedback>"

Only submit when you have something specific and actionable to report. Include as much relevant context as possible. If an AI agent repeatedly failed or the user had to take over an Expo task, load the expo-skill-feedback skill and follow its eval-candidate flow instead of reusing the command above.

原文・著作権は Anthropic および各プラグイン作者に帰属します。日本語訳は Claude API による自動翻訳です。