0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Expo (React Native) で "expected dynamic type 'boolean', but had type 'string'" エラーが出た時の対処法

Posted at

はじめに

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']

エラー箇所は以下の通りです。

app/_layout.tsx
// ...
    <>
      <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-screensexpo-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 のインストール漏れに注意が必要です。
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?