RNSScreenエラー: React Native Navigationのネイティブコンポーネントが見つからない問題

React Nativeアプリで画面ナビゲーションを実装する際に、「Invariant Violation: requireNativeComponent: "RNSScreen" was not found in the UIManager」というエラーに遭遇することがあります。この問題は、React Navigationライブラリのセットアップに関する様々な要因によって発生します。

問題の原因

このエラーは主に以下のいずれかが原因で発生します：

• react-native-screensパッケージが正しくインストールされていない
• ネイティブモジュールのリンクが適切に行われていない
• パッケージインストール後の再ビルドが行われていない
• バージョン互換性の問題
• キャッシュの問題

基本ソリューション

1. 必要なパッケージのインストール

まず、以下のパッケージが正しくインストールされていることを確認してください：

npm install @react-navigation/native
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

またはYarnを使用している場合：

yarn add @react-navigation/native
yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

2. ビルドの再起動

パッケージをインストールした後、必ず現在のビルドプロセスを停止し、再起動してください：

# Metroバンドラーを停止（Ctrl+C）
npx react-native run-ios  # iOSの場合
# または
npx react-native run-android  # Androidの場合

重要

パッケージインストール後にアプリを再起動しないと、新しいネイティブモジュールが読み込まれず、このエラーが発生します。

プラットフォーム別の対応

iOSの場合

iOSの場合は、CocoaPodsの設定も必要です：

cd ios
pod install
cd ..

Androidの場合

Androidでは、Gradleのクリーンビルドを実行します：

cd android
./gradlew clean
cd ..

Expoを使用している場合

Expoプロジェクトで開発ビルドを使用している場合、より多くの手順が必要です：

1. Metroサーバーを停止
2. 必要な依存関係をインストール
3. babel.config.jsにReanimatedプラグインを追加：

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: [
      [
        "module-resolver",
        {
          extensions: [".tsx", ".ts", ".js", ".json"],
        },
      ],
      "react-native-reanimated/plugin", // 最後に追加
    ],
  };
};

4. 開発ビルドを再構築：

npx expo install --check
# エミュレータで開発ビルドをアンインストール後、再インストール
expo r -c  # キャッシュをクリア

バージョン互換性の問題

React Nativeとreact-native-screensのバージョン間に互換性問題がある場合もあります。特に、React Native 0.69未満を使用している場合は、react-native-screensのバージョンを3.18.0に固定してください：

{
  "dependencies": {
    "react-native-screens": "3.18.0"
  }
}

上級者向け：手動リンク

自動リンクが機能しない場合、手動でリンクすることも可能です：

Androidの手動リンク

1. android/settings.gradleに追加：

include ':react-native-screens'
project(':react-native-screens').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-screens/android')

2. android/app/build.gradleに追加：

dependencies {
  implementation project(':react-native-screens')
}

3. MainApplication.javaに追加：

import com.swmansion.rnscreens.RNScreensPackage;

// ...
@Override
protected List<ReactPackage> getPackages() {
  List<ReactPackage> packages = new PackageList(this).getPackages();
  packages.add(new RNScreensPackage());
  return packages;
}

iOSの手動リンク

ios/Podfileに以下を追加：

pod 'RNScreens', :path => '../node_modules/react-native-screens'

その後、podを再インストール：

cd ios
rm Podfile.lock
pod install

トラブルシューティング

キャッシュの問題

キャッシュが原因で問題が発生する場合は、キャッシュをクリアして再ビルドします：

npx react-native start --reset-cache

根本的な問題の特定

他のネイティブモジュール（例えばReact Native Google Maps）を統合している場合、それらの設定がreact-native-screensと競合している可能性があります。この場合、該当するライブラリの設定を見直す必要があります。

結論

「RNSScreen was not found」エラーは、React Navigationを適切に設定する過程で一般的に発生する問題です。ほとんどの場合、以下の手順で解決できます：

1. すべての必要なパッケージをインストール
2. ネイティブの依存関係を正しくリンク（iOSならpod install、Androidならクリーンビルド）
3. アプリを完全に再起動
4. 必要に応じてキャッシュをクリア

これらの手順に従っても問題が解決しない場合は、プロジェクトの設定や他のネイティブモジュールとの互換性を確認してください。