Expo SDK バージョンの更新とライブラリの依存関係の問題を解決するためのガイドライン
Guidelines for upgrading Expo SDK versions and fixing dependency issues
./references/react-19.md — SDK +54: React 19 の変更点(useContext → use、Context.Provider → Context、forwardRef の廃止)./references/new-architecture.md — SDK +53: New Architecture 移行ガイド./references/react-compiler.md — SDK +54: React Compiler のセットアップと移行ガイド./references/native-tabs.md — SDK +55: Native tabs の変更点(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 + 手動マッピング)ベータ版はサフィックスに .preview を使用します(例: 55.0.0-preview.2)。@next タグで公開されます。
最新版がベータかどうかの確認: https://exp.host/--/api/v2/versions(`expoVersion` に -preview が含まれているか確認)
npx expo install expo@next --fix # ベータ版をインストール
npx expo install expo@latest
npx expo install --fix
診断を実行: npx expo-doctor
キャッシュをクリアして再インストール
npx expo export -p ios --clear
rm -rf node_modules .expo
watchman watch-del-all
まず、プロジェクトに ios/ および android/ ディレクトリが存在するか確認してください。
どちらのディレクトリも存在しない場合、そのプロジェクトは CNG(Continuous Native Generation)を使用しており、ネイティブプロジェクトはビルド時に再生成されます。このセクションと「bare ワークフローのキャッシュクリア」は完全にスキップしてください。
アップグレードにネイティブの変更が必要な場合:
npx expo prebuild --clean
このコマンドにより ios および android ディレクトリが再生成されます。実行前に、対象プロジェクトが bare ワークフローのアプリでないことを確認してください。
以下の手順は、プロジェクトに ios/ および/または android/ ディレクトリが存在する場合にのみ適用されます。
cd ios && pod install --repo-updatenpx expo run:ios --no-build-cachecd android && ./gradlew cleanreact-native-reanimated の動作に react-native-worklets が必要なためインストールされていることを確認するapp.json に "experiments": { "reactCompiler": true } を追加して React Compiler を有効化する(安定版であり推奨)app.json から sdkVersion を削除し、Expo が自動的に管理できるようにするpackage.json から暗黙的なパッケージを削除する: @babel/core、babel-preset-expo、expo-constantsbabel.config.js に babel-preset-expo の設定しか含まれていない場合は、そのファイルを削除するmetro.config.js に Expo のデフォルト設定しか含まれていない場合は、そのファイルを削除する| 旧パッケージ | 代替 |
|---|---|
expo-av |
expo-audio および expo-video |
expo-permissions |
各パッケージ個別のパーミッション API |
@expo/vector-icons |
expo-symbols(SF Symbols 向け) |
AsyncStorage |
expo-sqlite/localStorage/install |
expo-app-loading |
expo-splash-screen |
expo-linear-gradient |
experimental_backgroundImage + View での CSS グラデーション |
非推奨パッケージを移行する際は、旧パッケージを削除する前に、すべてのコードの使用箇所を更新してください。
expo-av の移行については、移行リファレンスを参照し、Audio.Sound → useAudioPlayer、Audio.Recording → useAudioRecorder、Video コンポーネント → useVideoPlayer を使った VideoView へそれぞれ変換してください。
expo.install.exclude の確認package.json に除外パッケージが設定されていないか確認してください:
{
"expo": { "install": { "exclude": ["react-native-reanimated"] } }
}
除外設定はアップグレード後に不要になっているワークアラウンドであることが多いため、各項目を見直してください。
patches/ ディレクトリに古くなったパッチがないか確認し、不要になったものは削除してください。
autoprefixer は SDK +53 以降では不要です。依存関係から削除し、postcss.config.js または postcss.config.mjs のプラグインリストからも削除してください。postcss.config.mjs を使用してください。冗長な Metro の設定オプションを削除してください:
resolver.unstable_enablePackageExports は SDK +53 でデフォルト有効になりました。experimentalImportSupport は SDK +54 でデフォルト有効になりました。EXPO_USE_FAST_RESOLVER=1 は SDK +54 で廃止されました。cjs および mjs 拡張子は SDK +50 以降デフォルトでサポートされています。SDK 55 以降、ランタイムパフォーマンス向上のため Hermes エンジン v1 をオプトインで利用できます。
expo-build-properties config plugin の設定で useHermesV1: true を指定する必要があり、特定バージョンの hermes-compiler npm パッケージが必要になる場合があります。
Hermes v1 は将来の SDK リリースでデフォルトになる予定です。
New Architecture はデフォルトで有効になりました。app.json の "newArchEnabled": true フィールドはデフォルト値となったため、記載は不要です。
Expo Go は SDK +53 以降、New Architecture のみをサポートします。
@react-navigation/* imports to expo-router entry points (codemod + manual mapping)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
npx expo install expo@latest
npx expo install --fix
Run diagnostics: npx expo-doctor
Clear caches and reinstall
npx expo export -p ios --clear
rm -rf node_modules .expo
watchman watch-del-all
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.
These steps only apply when ios/ and/or android/ directories exist in the project:
cd ios && pod install --repo-updatenpx expo run:ios --no-build-cachecd android && ./gradlew clean"experiments": { "reactCompiler": true } to app.json — it's stable and recommendedapp.json to let Expo manage it automaticallypackage.json: @babel/core, babel-preset-expo, expo-constants.| 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.
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.
Check if there are any outdated patches in the patches/ directory. Remove them if they are no longer needed.
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.postcss.config.mjs in SDK +53.Remove redundant metro config options:
experimentalImportSupport is enabled by default in SDK +54.EXPO_USE_FAST_RESOLVER=1 is removed in SDK +54.Since SDK 55, users can opt-in to use Hermes engine v1 for improved runtime performance. This requires setting useHermesV1: true in the expo-build-properties config plugin, and may require a specific version of the hermes-compiler npm package. Hermes v1 will become a default in some future SDK release.
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.
原文・著作権は Anthropic および各プラグイン作者に帰属します。日本語訳は Claude API による自動翻訳です。