Expo SDK 54アップデート実録：ハマりどころと対処法
はじめに
株式会社Another worksで「複業クラウド」の開発をしている野々山と申します。
普段からExpoを使った開発をしており、これまで10バージョン以上のアップデートを経験してきました。昔はBare Workflowでネイティブコードを触っていた時期もありますが、今はEAS Buildとdevelopment buildを使って開発しています。
Expoのアップデートはドキュメントにあるような「npx expo install expo@latest --fix」だけではうまく行きません。依存関係エラーやビルドエラー、謎のスタイル崩れなど、毎回何かしらのトラブルに見舞われます。
この記事では、Expoのアップデートを楽にするためのコツと、直近のSDK 54アップデートで実際に遭遇した問題と解決策を共有します。SDK 54へのアップデートを控えている方の参考になれば幸いです。
Expoのアップデートを楽にするために
ネイティブコードを隠蔽する
Expoを開発する際、ネイティブコード（ios/*、android/*のコード）は変更しないほうが良いです。
ネイティブコードを直接触らずに済むようにするために、以下の仕組みを活用しましょう。
- EAS Build: クラウド上でビルドを行うサービス。ビルド時に内部でCNGが実行されるため、ローカルにネイティブコードを持たずに開発できます。
-
CNG（Continuous Native Generation）:
app.jsonやconfig pluginsの設定からネイティブコードを自動生成する仕組み。ios/やandroid/をgit管理せず、ビルド時に生成させることができます。
昔はCNG用のプラグインがあまりなかったのでネイティブコードを書く必要がありましたが、最近はプラグインが豊富になりました。
例えば、広告計測ツールのAppsFlyerも今はCNG対応されています。
ネイティブコードを変更している場合
もしネイティブコードに変更を入れてしまっている場合、react-native-upgrade-helperを使って比較しながらアップデートする必要があります。
ただし、iOS・Androidの知識がかなり必要になるのであまりおすすめしません。可能であればCNGに移行することを検討してください。
直近のExpoアップデートについて
最新のExpoのバージョンはSDK 54です（もうすぐ55が出そう）。大体4ヶ月に1回くらいのペースで新バージョンがリリースされます。
SDK 54アップデートの実録
1. リリースノートの確認
まずはExpoやReact Nativeのリリースブログを確認して、どのあたりに大きな影響が起きそうかイメージをつけます。
Expo 53→54だとReact Native 0.79→0.81への更新なので、そのあたりのリリースノートをざっと確認。今回だとビルド時間の削減やExpo RouterのLiquid Glass対応あたりがメインになるという印象を持ちました。
2. アップデートコマンドの実行
以下のコマンドを実行するだけです。とはいかないのがExpoアップデートです。
npx expo install expo@^54.0.0 --fix
3. npm install依存関係エラー
まずnpm installで依存関係エラーになりました。
今回だと、react-nativeとExpo Routerの依存するreactのバージョンが競合するようになりました。
最近発生したReactの脆弱性対応パッチによって発生したもののようです。
issueにあるようにreact-domの明示的なバージョンを上げることで修正しました。
サポートするTypeScriptのバージョンが変わったりして、型エラーが発生することもよくありますが、今回は発生しませんでした。
4. EASビルド時のエラー（New Architecture必須化）
Expo SDK 54とreact-native-reanimated v4の組み合わせでは、New Architectureが必須になりました。
Expo側はSDK 54がNew Architectureからオプトアウトできる最後のバージョンと発表していましたが、react-native-reanimated v4との組み合わせにより、実質このタイミングで移行が必須となりました。
最近だと問題が発生してissueを確認しに行くと、「古いアーキテクチャでのみ発生しているので新しいアーキテクチャを使ってください」といった回答が散見されるので、このタイミングで移行するのが無難かと思います。
適用してみた感じdatetimepickerまわりのバグに遭遇しましたが、ほかはあまり問題なかったです。
5. UI崩れの発生（Liquid Glass問題）
ビルドエラーを解消してQAを開始したところ、Liquid Glassが自動で適用されてしまう問題が発生しました。
まだLiquid Glassのデザイン対応ができていなかったのでオプトアウトしました。
app.jsonのinfoPlistに以下を追加：
{
"expo": {
"ios": {
"infoPlist": {
"UIDesignRequiresCompatibility": true
}
}
}
}
他にも、react-native-picker-selectが押せない問題などが発生しました。
6. QAと段階的リリース
毎日数分間の網羅的チェックを1〜2週間継続し、バグが発見されたら修正します。
App StoreとGoogle Playには段階的なリリース機能があるので、それを活用して最初のリリースから1週間くらいかけて段階的にリリースしていきます。
「複業クラウド」の場合調査からQAに上げるまでは大体3~5日程度、QAに上げてからは都度修正点が発生したら直すという流れです。
React Nativeのアップデートが大変な理由
ここまで読むと「大変そう...」と思われるかもしれません。実際、React Nativeのアップデートには手間がかかります。
その理由の一つとして、UIを実現するためにライブラリを多用しないといけないことが挙げられます。
React Nativeは昔からコミュニティがライブラリを作る文化があり、コア機能は最小限に抑えられています。DatePickerやPicker、ナビゲーションなど、基本的なUIコンポーネントもサードパーティ製のライブラリに頼ることが多いです。
そのため、各ライブラリの依存関係を気にしたり、コアであるReact NativeやExpoとの互換性がない場合にバグになることが多いのです。
ただ、3日でQAに上げられるというのは、iOSとAndroidを個別にネイティブでアップデートするのと比べれば圧倒的に速いと思います。
今後に期待
昨今ではExpo Routerを始めとしたExpo製のライブラリがかなり増えています。最近発表されたExpo UIにもかなり期待しています。
互換性の取れたライブラリが増え、さらにExpoのアップデートが楽になっていくのではないかと予想しています。
Expoのアップデートは昔に比べてかなり楽になりましたが（昔は2週間くらいかかってた気がする）、今もそこそこ大変です。ただ、確実に良くなってきているので今後も期待しています。
まとめ
- ネイティブコードを隠蔽する: EAS BuildやCNGを活用してネイティブコードを触らないようにする
- リリースノートを確認: アップデート前に影響範囲を把握する
- GitHub Issueを確認: 問題が発生したら同様の報告がないかチェック
- 段階的リリース: App Store / Google Playの機能を活用してリスクを軽減
Expo製ライブラリの充実により、今後さらにアップデートが楽になっていくことを期待しています。
ここまで読んでいただきありがとうございました。
参考
Expo Routerへの移行については、以下の記事も参考になります。
「複業クラウド」はreact-nativeで作っているのでぜひさわってみてください
Discussion