🔗expo-brownfield
- プラグイン
- expo
- ソース
- GitHub で見る ↗
説明
ExpoおよびReact Nativeを、既存のネイティブiOSまたはAndroidアプリに統合します。 次のような場合に使用: ユーザーがブラウンフィールド、ネイティブアプリへのReact Nativeの組み込み、AAR/XCFramework、または既存のKotlin/SwiftプロジェクトへのExpoの追加について言及している場合。 独立アプローチ（isolated approach）と統合アプローチ（integrated approach）の両方に対応します。
原文を表示
Integrate Expo and React Native into an existing native iOS or Android app. Use when the user mentions brownfield, embedding React Native in a native app, AAR/XCFramework, or adding Expo to an existing Kotlin/Swift project. Covers both the isolated approach and the integrated approach.
ユースケース
- ✓既存のネイティブアプリにReact Nativeを組み込む
- ✓iOSアプリにExpoを統合する
- ✓AndroidアプリにExpoを追加する
- ✓Kotlin/SwiftプロジェクトへのExpo導入
本文（日本語訳）
Expo Brownfield
ブラウンフィールドアプリとは、最初からReact Nativeで構築されたグリーンフィールドアプリとは異なり、既存のネイティブiOS/Androidアプリに段階的にReact Nativeを導入したアプリのことです。
ExpoはブラウンフィールドプロジェクトへのReact Native追加について、2種類の方法をサポートしています。
| アプローチ | ネイティブアプリに含まれるもの | 選択すべき状況 |
|---|---|---|
| 分離型（Isolated） | ビルド済みAAR / XCFramework | ネイティブチームがNodeやRNツールチェーンを必要としない場合、またはRNコードを別リポジトリで管理できる場合 |
| 統合型（Integrated） | 既存のGradle / CocoPodsビルドにReact Nativeのソースを追加 | 一つのチームがすべてを管理しており、RNツールチェーンに慣れていて、単一ビルドにまとめたい場合 |
詳細な判断基準については ./references/comparison.md を参照してください。
アプローチの選択
以下の簡易ルールを参考にしてください。
判断が難しい場合は comparison.md を確認してください。
- iOS/Androidチームが、Node・Yarn・React Nativeビルドツールチェーンをインストールせずに、RNを通常のライブラリ依存関係（AARまたはXCFramework）として利用する必要がある場合は、分離型を選択してください。
- RNコードとネイティブコードが別々のリポジトリに存在する場合や、独立したサイクルでリリースする場合は、分離型を選択してください。
- ネイティブコードとRNコードの両方を一つのチームが管理しており、ネイティブプロジェクトのGradleおよびCocoaPodsのセットアップにReact Native + Expoを追加することを厭わない場合は、統合型を選択してください。
- 既存のネイティブビルドプロセス内で、ホットリロードやJSソースマップをシームレスに動作させたい場合は、統合型を選択してください。
リファレンス
./references/brownfield-isolated.md— RNをAAR/XCFrameworkとしてビルドし、ネイティブアプリから利用する方法（BrownfieldActivity、ReactNativeViewController、ReactNativeView）./references/brownfield-integrated.md— RNとExpoを既存のGradleおよびCocoaPodsビルドに直接追加する方法（ReactActivity、RCTRootView、Podfile）./references/comparison.md— アプローチ選択のための判断基準、トレードオフ、およびシナリオ別の対応表./references/troubleshooting.md— 両アプローチ共通のトラブルシューティング（Metroの接続、ビルド、署名、モジュール解決に関する問題）
詳細情報: https://docs.expo.dev/brownfield/overview/
共通の前提条件
どちらのアプローチでも、React Nativeをビルドする環境において以下が必要です。
- Node.js（LTS） — Expo CLIおよびJavaScriptコードの実行に使用します。
- Yarn — JavaScriptの依存関係を管理します。
統合型アプローチでは、iOSのビルドにおいて追加で CocoaPods が必要です（sudo gem install cocoapods）。
分離型アプローチでは、RNコードを利用する側のネイティブアプリにCocoaPodsやRNツールチェーンは不要です。
バージョンに関する注意
ブラウンフィールド統合がサポートされる最低バージョンはExpo SDK 55です。
それ以前のSDKには expo-brownfield パッケージ、および必要なエントリポイントである ExpoReactHostFactory / ExpoReactNativeFactory、現行のautolinkingの仕組みが含まれていません。
Expoプロジェクトを作成する際は、必ずSDKバージョンを明示的に固定してください。
npx create-expo-app@latest my-project --template default@sdk-55
RNプロジェクトと組み込み依存関係の両方で、同じExpo SDKバージョンを固定してください。
原文（English）を表示
Expo Brownfield
A brownfield app is an existing native iOS or Android app that adopts React Native incrementally, as opposed to a greenfield app that is React Native from day one.
Expo supports two distinct ways to add React Native to a brownfield project:
| Approach | What ships to the native app | When to choose |
|---|---|---|
| Isolated | Prebuilt AAR / XCFramework | Native team doesn't need Node or RN tooling; RN code can live in a separate repo |
| Integrated | React Native sources added to the existing Gradle / CocoaPods build | One team owns everything; comfortable with RN tooling; wants a single build |
For the full decision matrix, see ./references/comparison.md.
Pick an approach
Use these quick rules — fall through to comparison.md for anything ambiguous.
- Choose isolated if the iOS/Android team must consume RN as a regular library dependency (AAR or XCFramework), without installing Node, Yarn, or the React Native build toolchain.
- Choose isolated if RN code and native code live in separate repositories or release on independent cadences.
- Choose integrated if a single team owns both the native and RN code and is willing to add React Native + Expo to the native project's Gradle and CocoaPods setup.
- Choose integrated if you want hot reload and JS source maps to work seamlessly inside the existing native build process.
References
- ./references/brownfield-isolated.md -- Build RN as AAR/XCFramework and consume from the native app (BrownfieldActivity, ReactNativeViewController, ReactNativeView)
- ./references/brownfield-integrated.md -- Add RN and Expo directly to existing Gradle and CocoaPods builds (ReactActivity, RCTRootView, Podfile)
- ./references/comparison.md -- Decision criteria, trade-offs, and scenario mapping for choosing an approach
- ./references/troubleshooting.md -- Metro connection, build, signing, and module-resolution issues common to both approaches
More information available at https://docs.expo.dev/brownfield/overview/
Shared prerequisites
Both approaches require, in the environment that builds the React Native side:
- Node.js (LTS) — runs the Expo CLI and JavaScript code.
- Yarn — manages JavaScript dependencies.
The integrated approach additionally requires CocoaPods on iOS (sudo gem install cocoapods). The isolated approach does not require CocoaPods or any RN tooling in the consuming native app.
Versioning note
Expo SDK 55 is the minimum supported version for brownfield integration. Earlier SDKs lack expo-brownfield, the required ExpoReactHostFactory / ExpoReactNativeFactory entry points, and the current autolinking surface. When creating the Expo project, always pin the SDK explicitly:
npx create-expo-app@latest my-project --template default@sdk-55
Pin the same Expo SDK across both the RN project and any embedded dependencies.
原文・著作権は Anthropic および各プラグイン作者に帰属します。日本語訳は Claude API による自動翻訳です。