はじめに
NativeWind のドキュメントを参考に、以下のコマンドでプロジェクトを作成しました。
bunx rn-new --nativewind
このコマンドで作成されたプロジェクトには expo-router 等が含まれていなかったため、手動で追加しながら開発を進めていました。
しかし、expo-router の <Stack /> を配置したところで、一見原因が特定しづらいエラーに遭遇しました。
最初は Expo SDK 52 や New Architecture の互換性問題を疑い、かなり遠回りをしてしまったので、備忘録として残しておきます。
発生したエラー
app/_layout.tsx にて <Stack /> を配置して実行したところ、以下のエラーが発生しました。
ERROR [Error: Exception in HostFunction: TypeError: expected dynamic type 'boolean', but had type 'string']
エラー箇所は以下の通りです。
// ...
<>
<StatusBar style="auto" />
<Stack /> {/* ここでエラーが発生 */}
</>
// ...
エラーメッセージが TypeError: expected dynamic type 'boolean', but had type 'string' というもので、具体的なプロパティ名なども示されておらず、何が原因なのか直感的に分かりませんでした。
環境
- expo: ^54.0.0 (SDK 52)
- react-native: 0.81.5
- expo-router: ^6.0.15
- nativewind: ^5.0.0-preview.2
原因調査:New Architecture を疑う(寄り道)
最近の Expo / React Native のアップデートで New Architecture がデフォルトになりつつあるため、最初は「使っているライブラリが New Architecture に対応していないのではないか?」と疑いました。
-
expo-goが New Architecture を強制している? -
react-native-screensなどのライブラリの対応状況は? - 開発ビルド (Development Build) なら動くのか?
など、色々と調べて悩みましたが、原因はもっと単純なところにありました。
本当の原因:Peer Dependencies の不足
プロジェクトの依存関係をチェックしてみたところ、重要なライブラリが不足していることがわかりました。
npx expo-doctor や依存関係のチェックコマンドを実行すると、以下のような警告が出ました。
16/17 checks passed. 1 checks failed. Possible issues detected:
Use the --verbose flag to see more details about passed checks.
✖ Check that required peer dependencies are installed
Missing peer dependency: expo-constants
Required by: expo-router
Missing peer dependency: expo-linking
Required by: expo-router
Missing peer dependency: react-native-screens
Required by: expo-router
Missing peer dependency: react-native-svg
Required by: lucide-react-native
expo-router が依存している react-native-screens などが含まれていませんでした。
私は bunx rn-new --nativewind で作成した素のプロジェクトに対し、後から expo-router を手動で追加していました。
その際、expo-router 自体はインストールしたものの、それが依存する react-native-screens や expo-linking などのインストールが漏れてしまっていたようです。
<Stack /> コンポーネントは内部で react-native-screens を使用しているため、これが存在しない(あるいは正しくリンクされていない)状態で呼び出され、内部的なネイティブモジュールの呼び出しで型不一致のようなエラー(あるいはネイティブ側の予期せぬ挙動)として expected dynamic type 'boolean' ... が発生していたものと推測されます。
解決策
不足している Peer Dependencies をインストールします。
npx expo install expo-constants expo-linking react-native-screens react-native-svg
これらをインストールした後、サーバーを再起動(npx expo start -c などでキャッシュクリア推奨)したところ、無事に <Stack /> が表示され、エラーは解消しました。
まとめ
-
エラーメッセージに惑わされない:
TypeError: expected dynamic type 'boolean' ...というエラーが出ても、必ずしもコード上の型ミスとは限りません。ネイティブモジュールの連携ミスでも発生することがあります。 -
依存関係のチェック: 何かおかしいと思ったら、まずは
npx expo-doctorで環境や依存関係に問題がないか確認するのが近道です。 -
手動セットアップの罠:
create-expo-appなどのテンプレートを使わず、ゼロから(あるいは特定のライブラリのガイドに従って)構築する場合は、Peer Dependencies のインストール漏れに注意が必要です。