Expo SDK 52 アップグレード時の文字列変換エラー解決法 (largeエラー)

問題説明

Expo SDK 52へアップグレード後、次のエラーが発生するケースがあります：

(NOBRIDGE) ERROR Error: Exception in HostFunction: Unable to convert string to floating point value: "large"

このエラーの特徴:

• SDK 52アップグレード後に突然発生
• "large"という文字列を数値に変換できないことが原因
• スタイルプロパティでの誤った値指定で発生することが多い
• ライブラリ内部の互換性問題が根本原因である場合が多い

根本原因

このエラーの主な原因は以下のいずれかです：

1. 古いライブラリの互換性問題:

   • SDK 52で変更された内部実装に対応していないサードパーティライブラリ
   • 特に日付ピッカーやUIコンポーネント系ライブラリで発生しやすい

2. スタイル値の不正な指定:

   // 誤った例 (string値が期待されていない場所)
   <View style={{ width: "large" }} />
   
   // 正しい例 (数値か有効な文字列定数のみ)
   <View style={{ width: 100 }} />
   <View style={{ width: "100%" }} />

3. アップグレード時の依存関係不一致:

   • node_modules の依存関係キャッシュが原因で正常にアップデートされていない

解決手順

ステップ 1: 問題のあるライブラリを特定

# 一時的にnode_modulesを削除
rm -rf node_modules

# パッケージロックファイルを削除
rm -rf package-lock.json  # npm
rm -rf yarn.lock          # yarn

# 依存関係を再インストール
npm install   # or yarn install

# プロジェクト再起動
expo start --clear

ステップ 2: サードパーティライブラリを更新

1. 使用しているライブラリの最新バージョンを確認：

   expo doctor

2. ライブラリを明示的に更新：

   expo install react-native-date-picker@latest  # 例: 日付ピッカー

ステップ 3: ライブラリ再インストール

既知の不具合があるライブラリは完全削除→再インストール：

# 問題のあるライブラリ削除
npm uninstall react-native-date-picker

# プロジェクトクリーンアップ
npx expo prebuild --clean

# 最新版を再インストール
expo install react-native-date-picker

ステップ 4: スタイル定義を精査

以下のパターンがないかプロジェクト全体を検索：

1. "large" が数値が必要な場所で使用されていないか

   // 誤った使用例
   padding: "large" // エラーの原因
   fontSize: "large" // 無効な値
   
   // 有効な値
   padding: 12
   fontSize: 16

よく影響するライブラリ

アップデート必須の主なライブラリ：

• react-native-date-picker
• react-native-paper
• react-native-elements
• その他のUIコンポーネントライブラリ

根本解決のベストプラクティス

1. 段階的アップグレード:

   # SDK 51→52の推奨アップグレードパス
   expo install expo@~52.0.0

2. 互換性チェックリスト:

   # 依存関係の整合性確認
   npx expo install --check
   
   # 互換性問題を自動修正
   npx @expo/doctor

3. 更新前のバックアップ:

   git commit -m "Pre SDK52 upgrade state"
   # または
   expo prebuild --template /path/to/backup

4. モジュール解消キャッシュ:

   # Metroバンドラのキャッシュ削除
   npx react-native start --reset-cache

対応後の検証方法

1. 最小再現環境でテスト:

   expo init test-project --template bare-minimum

2. 問題ライブラリを個別追加:

   cd test-project
   expo install react-native-date-picker

予防策

• Expo CLIを使用した依存管理:

  # インストールには常にexpo installコマンドを使用
  expo install [package-name]

• 定期的な互換性チェック:

  expo doctor --fix-dependencies

• ロックファイル管理:

  // package.jsonの推奨設定
  {
    "scripts": {
      "postinstall": "expo install --fix"
    }
  }

アップグレード時には公式移行ガイドを必ず参照: → Expo SDK 52 Official Migration Guide