📦upgrading-expo
- プラグイン
- expo
- ライセンス
- MIT
- ソース
- GitHub で見る ↗
説明
Expo SDKのバージョンアップグレードおよび依存関係の問題修正に関するガイドライン
原文を表示
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: 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 # ベータ版をインストール
アップグレードの手順
- Expo および依存パッケージをアップグレード
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
破壊的変更チェックリスト
- リリースノートで削除された API を確認する
- 移動したモジュールのインポートパスを更新する
- prebuild が必要なネイティブモジュールの変更を確認する
- カメラ・音声・動画関連の機能をすべてテストする
- ナビゲーションが正常に動作することを確認する
ネイティブ変更に対する Prebuild
まず、プロジェクトに ios/ および android/ ディレクトリが存在するか確認してください。
どちらのディレクトリも存在しない場合、そのプロジェクトは CNG(Continuous Native Generation)を使用しており、ネイティブプロジェクトはビルド時に再生成されます。このセクションと「bare ワークフローのキャッシュクリア」は完全にスキップしてください。
アップグレードにネイティブの変更が必要な場合:
npx expo prebuild --clean
このコマンドにより ios および android ディレクトリが再生成されます。実行前に、対象プロジェクトが bare ワークフローのアプリでないことを確認してください。
bare ワークフローのキャッシュクリア
以下の手順は、プロジェクトに ios/ および/または android/ ディレクトリが存在する場合にのみ適用されます。
- iOS の CocoaPods キャッシュをクリア:
cd ios && pod install --repo-update - Xcode の Derived Data をクリア:
npx expo run:ios --no-build-cache - Android の Gradle キャッシュをクリア:
cd android && ./gradlew clean
ハウスキーピング
- ターゲット SDK バージョンのリリースノートを確認する: https://expo.dev/changelog
- Expo SDK 54 以降を使用している場合、
react-native-reanimatedの動作にreact-native-workletsが必要なためインストールされていることを確認する - SDK 54 以降では、
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/ ディレクトリに古くなったパッチがないか確認し、不要になったものは削除してください。
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
SDK 55 以降、ランタイムパフォーマンス向上のため Hermes エンジン v1 をオプトインで利用できます。
expo-build-properties config plugin の設定で useHermesV1: true を指定する必要があり、特定バージョンの hermes-compiler npm パッケージが必要になる場合があります。
Hermes v1 は将来の SDK リリースでデフォルトになる予定です。
New Architecture
New Architecture はデフォルトで有効になりました。app.json の "newArchEnabled": true フィールドはデフォルト値となったため、記載は不要です。
Expo Go は SDK +53 以降、New Architecture のみをサポートします。
原文(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 toexpo-routerentry 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
- Upgrade Expo and dependencies
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
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
- 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.jsonto 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
autoprefixerisn't needed in SDK +53. Remove it from dependencies and checkpostcss.config.jsorpostcss.config.mjsto remove it from the plugins list.- Use
postcss.config.mjsin SDK +53.
Metro
Remove redundant metro config options:
- resolver.unstable_enablePackageExports is enabled by default in SDK +53.
experimentalImportSupportis enabled by default in SDK +54.EXPO_USE_FAST_RESOLVER=1is 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
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.
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.
原文・著作権は Anthropic および各プラグイン作者に帰属します。日本語訳は Claude API による自動翻訳です。