• Projects
  • Service
  • About
  • branding.bz
  • Podcast
  • Tips
  • FAQ
  • Recruit
  • Download
  • Contact
  • branding.bz(ブランド構築SaaS)
  • DESIGN NOW(デザインメディア)
  • X
  • LinkedIn
  • Spotify
  • Facebook

213-0011 神奈川県川崎市高津区久本3-6-7-303

© 2026 ID INC. All rights reserved

claude-skills/スキル
SKILLOfficialdevelopment

expo-brownfield

プラグイン
expo
ソース
GitHub で見る ↗
説明

フレームワーク(オープンソースソフトウェア)。既存のネイティブiOSアプリやAndroidアプリに、ExpoおよびReact Nativeを統合します。 **次のような場合に使用:** - ユーザーが「ブラウンフィールド開発(既存アプリへの段階的な新技術導入)」について言及している - ネイティブアプリの中にReact Nativeを組み込む方法を探している - AAR/XCFrameworkについて質問されている - 既存のKotlinまたはSwiftプロジェクトにExpoを追加する方法について質問されている このスキルは「独立型アプローチ」と「統合型アプローチ」の両方に対応しています。

原文を表示

Framework (OSS). 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を組み込むとき
  • AAR/XCFrameworkについて質問されたとき
  • 既存のKotlin/Swiftプロジェクトに追加するとき
本文(日本語訳)

Expo Brownfield

ブラウンフィールドアプリとは、既存のネイティブ iOS または Android アプリに React Native を段階的に導入していくもので、これは初日から React Native で構築されたグリーンフィールドアプリとは異なります。

Expo は、ブラウンフィールド プロジェクトに React Native を追加する 2 つの方法をサポートしています:

アプローチ ネイティブアプリに含まれるもの 選択する場合
独立型 プリビルド済み AAR / XCFramework ネイティブ チームが Node や React Native ツールを必要としない場合、または React Native コードを別のリポジトリで管理する場合
統合型 既存の Gradle / CocoaPods ビルドに追加された React Native ソースコード 1 つのチームがすべてを管理しており、React Native ツールに対応できる場合、または単一のビルドが必要な場合

詳しい判断基準は ./references/comparison.md をご覧ください。

アプローチを選択する

以下の簡単なルールに従ってください。判断に迷う場合は comparison.md をご覧ください。

  • 独立型を選択してください:iOS/Android チームが Node、Yarn、React Native ビルド ツールをインストールせずに、React Native を通常のライブラリ依存関係(AAR または XCFramework)として使用する必要がある場合
  • 独立型を選択してください:React Native コードとネイティブ コードが別々のリポジトリにあるか、リリース スケジュールが異なる場合
  • 統合型を選択してください:1 つのチームがネイティブ コードと React Native コードの両方を所有しており、既存ネイティブ プロジェクトの Gradle と CocoaPods 設定に React Native と Expo を追加できる場合
  • 統合型を選択してください:ホットリロード(保存した変更をリアルタイムに反映)と JavaScript ソースマップ(デバッグ時のコード対応)が既存ネイティブ ビルド プロセス内でシームレスに機能することが必要な場合

リファレンス

  • ./references/brownfield-isolated.md -- React Native を AAR/XCFramework としてビルドしネイティブアプリから使用する方法(BrownfieldActivity、ReactNativeViewController、ReactNativeView)
  • ./references/brownfield-integrated.md -- 既存の Gradle と CocoaPods ビルドに React Native と Expo を直接追加する方法(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)。独立型アプローチでは、使用するネイティブアプリに CocoaPods や React Native ツールは不要です。

バージョン注釈

ブラウンフィールド統合には Expo SDK 55 以上が必須です。 それより前のバージョンには、expo-brownfield と必須の ExpoReactHostFactory / ExpoReactNativeFactory エントリポイント、および現在の自動リンク機構が含まれていません。Expo プロジェクト作成時は、SDK を明確に指定してください:

npx create-expo-app@latest my-project --template default@sdk-55

React Native プロジェクトと埋め込まれた依存関係全体で同じ Expo SDK バージョンを使用してください。

フィードバック送信

このスキルでエラーや誤った情報、古い情報を見つけた場合は、Expo が改善できるようにご報告ください:

npx --yes submit-expo-feedback@latest --category skills --subject "expo-brownfield" "<具体的で実行可能なフィードバック>"

具体的で実行可能な内容がある場合のみ送信してください。可能な限り関連するコンテキストを含めてください。

AI エージェントが何度も失敗した場合、またはユーザーが Expo タスクを引き継ぐ必要があった場合は、expo-skill-feedback スキルを読み込み、上記のコマンドを再利用する代わりに eval-candidate フローに従ってください。

原文(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.

Submitting Feedback

If you encounter errors, misleading or outdated information in this skill, report it so Expo can improve:

npx --yes submit-expo-feedback@latest --category skills --subject "expo-brownfield" "<actionable feedback>"

Only submit when you have something specific and actionable to report. Include as much relevant context as possible. If an AI agent repeatedly failed or the user had to take over an Expo task, load the expo-skill-feedback skill and follow its eval-candidate flow instead of reusing the command above.

原文・著作権は Anthropic および各プラグイン作者に帰属します。日本語訳は Claude API による自動翻訳です。