🚀
Expo SDK 54が動かない？実行環境の選択で全て解決【Expo Go vs 開発ビルド】
Expo SDK 54が動かない？実行環境の選択で全て解決【Expo Go vs 開発ビルド】
🎯 この記事で分かること
初めてExpoでモバイルアプリを作って動かそうとした時に、Expo SDK 54でアプリが動かない問題に1日費やしました。結果真の原因が発覚したので残しておきます。
結論
- ❌ Expo SDK 54に問題があるわけではない
- ✅ 実行環境（Expo Go）の制約が原因
- ✅ 開発ビルドに移行すればSDK 54は完璧に動作 ※すべての機能を確認したわけではない
⚡ 要約
問題
Expo SDK 54でAndroidアプリが全く起動しない
真の原因
Expo Goの制約
Expo Goは常にNew Architectureを強制するため、app.jsonの設定が無視されエラーが発生
2つの解決策
解決策A: Expo Goで続ける
→ SDK 53にダウングレード（所要時間: 約30分）
解決策B: 開発ビルドに移行（推奨）
→ SDK 54が使える（所要時間: 初回20分、以降は即座）
🚨 発生したエラー（症状）
エラー① PlatformConstants not found
❌ TurboModuleRegistry.getEnforcing(...):
'PlatformConstants' could not be found.
Bridgeless mode: true # ← New Architecture強制中
エラー② 型変換エラー
❌ java.lang.String cannot be cast to java.lang.Boolean
エラー③ react-native-screens型エラー
❌ TypeError: expected dynamic type 'boolean', but had type 'string'
Call Stack: RNSScreenStack
共通点: 全て「New Architectureの制御不可」に起因
💡 真の原因
最初の誤解
「Expo SDK 54とReact 19.1.0の相性が悪い」
真実
Expo Goの制約が問題だった
app.json: { "newArchEnabled": false }
// Expo Goの実際の動作
newArchEnabled = true //（強制？）
結果、設定と動作が矛盾 → エラー
🎯 どちらの解決策を選ぶべき？
解決策A: Expo Goで続ける
こんな人におすすめ
- 学習中・プロトタイプ作成
- 基本機能のみ使用
- QRコードで即テストしたい
制限事項
- SDK 53に妥協
- Stack使用不可（Slotのみ）
- Reanimated v3のみ
解決策B: 開発ビルドに移行（推奨）
こんな人におすすめ
- 本格的な開発
- 最新技術を使いたい
- 本番リリースを目指している
メリット
- SDK 54が使える
- すべての機能が使える
- 本番と同じ環境でテスト
✅ 解決策A: Expo Goで続ける場合
📦 ステップ1: SDK 53にダウングレード
# 1. package.jsonを編集
"expo": "~53.0.0"
# 2. クリーンアップ
Remove-Item -Recurse -Force node_modules, package-lock.json, .expo
# 3. 依存関係を自動調整
npx expo install --fix
# 4. 再インストール
npm install
変更内容
| パッケージ | 変更前 | 変更後 |
|---|---|---|
| expo | 54.0.22 | 53.0.0 |
| react | 19.1.0 | 19.0.0 |
| react-native | 0.81.5 | 0.79.6 |
| reanimated | 4.1.3 | 3.17.4 |
⚙️ ステップ2: 新アーキテクチャ設定を削除
app.jsonから以下を完全に削除
{
"expo": {
// ❌ この行を削除
"newArchEnabled": false,
"plugins": [
"expo-font",
// ❌ このブロック全体を削除
[
"expo-build-properties",
{
"android": { "newArchEnabled": false },
"ios": { "newArchEnabled": false }
}
],
"expo-router"
]
}
}
修正後
{
"expo": {
"plugins": [
"expo-font",
"expo-router"
]
}
}
🧭 ステップ3: Stack → Slot
app/_layout.tsx
// ❌ 変更前
import { Stack } from 'expo-router';
export default function RootLayout() {
return <Stack>...</Stack>;
}
// ✅ 変更後
import { Slot } from 'expo-router';
export default function RootLayout() {
return <Slot />;
}
制限: 戻るボタンなどのStack機能が使えない
🎉 動作確認
npx expo start --tunnel
Expo Goで QRコードをスキャン → アプリが起動
🚀 解決策B: 開発ビルドに移行する場合（推奨）
開発ビルドの特徴
| 項目 | Expo Go | 開発ビルド |
|---|---|---|
| SDK 54対応 | ❌ 制約あり | ✅ 完全対応 |
| New Architecture制御 | ❌ 強制ON | ✅ 自由に選択 |
| Stack navigation | ❌ エラー | ✅ 正常動作 |
| Reanimated v4 | ❌ 使えない | ✅ 使える |
| 本番環境 | ❌ 異なる | ✅ 同じ |
📦 ステップ1: SDK 54のまま準備
# Node.jsバージョン確認（20.19.4以上必要）
node --version
# EAS CLIをインストール
npm install -g eas-cli
⚙️ ステップ2: app.jsonを設定
New Architectureを有効化
{
"expo": {
"plugins": [
"expo-font",
[
"expo-build-properties",
{
"android": {
"newArchEnabled": true // ← trueに設定
},
"ios": {
"newArchEnabled": true
}
}
],
"expo-router"
]
}
}
🔧 ステップ3: 非対応パッケージを削除
expo-in-app-purchases（New Architecture非対応）を削除
npm uninstall expo-in-app-purchases
package.jsonから該当行を削除
{
"dependencies": {
// "expo-in-app-purchases": "^14.5.0", ← 削除
}
}
🏗️ ステップ4: 開発ビルドを作成
# EASにログイン（初回のみ）
eas login
# プロジェクトを設定（初回のみ）
eas build:configure
# Android開発ビルドを作成
eas build --profile development --platform android
初回は15-20分かかります（2回目以降は変更時のみ）
📱 ステップ5: アプリをインストール
ビルド完了後
- QRコードが表示される
- スマホでスキャン → APKをダウンロード
- インストール（初回のみ）
注意:
- 「提供元不明のアプリ」の許可が必要
- Google Play Protectの警告は「詳細」→「インストール」
🔄 ステップ6: 開発サーバーに接続
# Metroサーバーを起動
npx expo start
アプリを開いて：
- 「Fetch development servers」をタップ
-
http://localhost:8081（またはhttp://10.0.2.2:8081）を選択 - 接続 → アプリが起動！
🎊 成功！
SDK 54で動作確認:
- ✅ New Architecture有効
- ✅ Reanimated v4動作
- ✅ Stack navigation正常
- ✅ 本番と同じ環境
📊 試行錯誤の記録（参考）
効果がなかった対応
- ❌ React Nativeのダウングレード（0.81.5 → 0.73.6）
- ❌ AsyncStorageのクリア
- ❌ babel.config.jsの調整
- ❌ app.jsonで
newArchEnabled: falseを設定
有効だった対応
- ✅ 実行環境の変更（Expo Go → 開発ビルド）
- ✅ New Architectureを有効化
- ✅ 非対応パッケージの削除
💡 根本原因の真実
誤解
「Expo SDK 54 + React 19.1.0の組み合わせが不安定」
真実
Expo Goの制約が問題
問題の本質:
Expo Go → New Architecture強制
↓
app.json → newArchEnabled: false
↓
矛盾 → エラー
解決:
開発ビルド → app.jsonを完全制御
↓
newArchEnabled: true
↓
一致 → 成功！
まとめ
今回は私が初めてExpoを触って、よく知らずに進めてエラーから抜け出せなくなったことから始まった試行錯誤を記録しました。
単純なアプリであってもExpo Goでは制約にひっかかることもあるということのようです。
学んだこと
1. SDK 54は問題ない
- ✅ Expo SDK 54は正常に動作する ※全て確認したわけではない
- ✅ 問題は実行環境（Expo Go）の制約
- ✅ 開発ビルドなら完璧に動く
2. 実行環境の選択が重要
- Expo Go: 便利だけど制約あり
- 開発ビルド: 時間かかるけど自由
3. 最新版が常にベストではない
- 実行環境との相性を考慮する
- 制約を理解して選択する
ベストプラクティス（2025年11月）
Expo Goの場合
Expo SDK 53 + React 19.0.0
+ Reanimated v3
+ Slot navigation
= 安定動作
開発ビルドの場合
Expo SDK 54 + React 19.1.0
+ Reanimated v4
+ Stack navigation
+ New Architecture
= 最新技術で動作
参考リンク
📚 用語説明（初心者向け）
Expo Go
App Storeからダウンロードする汎用テストアプリ
メリット
- ✅ インストール不要
- ✅ QRコードで即座にテスト
デメリット
- ❌ New Architectureが強制ON
- ❌ 設定を制御できない
- ❌ カスタムネイティブコード不可
開発ビルド（Development Build）
あなた専用のテストアプリ
メリット
- ✅ 完全なカスタマイズ可能
- ✅ app.jsonの設定を完全制御
- ✅ 本番環境と同じ設定
デメリット
- ❌ 初回ビルドに15-20分
- ❌ APKインストールが必要
Discussion