Agent Skillsexpo/skills › expo-brownfield

expo-brownfield

GitHub

指导如何将 Expo 和 React Native 集成到现有的原生 iOS 或 Android 应用中。涵盖隔离(AAR/XCFramework)与集成(Gradle/CocoaPods)两种方案的选择、配置及依赖要求,适用于现有项目增量接入 RN 的场景。

plugins/expo/skills/expo-brownfield/SKILL.md expo/skills

Trigger Scenarios

将 React Native 集成到现有原生应用 Expo Brownfield 配置 选择隔离或集成方案

Install

npx skills add expo/skills --skill expo-brownfield -g -y
More Options

Non-standard path

npx skills add https://github.com/expo/skills/tree/main/plugins/expo/skills/expo-brownfield -g -y

Use without installing

npx skills use expo/skills@expo-brownfield

指定 Agent (Claude Code)

npx skills add expo/skills --skill expo-brownfield -a claude-code -g -y

安装 repo 全部 skill

npx skills add expo/skills --all -g -y

预览 repo 内 skill

npx skills add expo/skills --list

SKILL.md

Frontmatter
{
    "name": "expo-brownfield",
    "description": "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."
}

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.

Version History

  • d1c68a2 Current 2026-08-19 21:53
  • 09eb052 2026-07-24 22:01

Same Skill Collection

.claude/skills/expo-skill-eval/SKILL.md
plugins/expo-experiments/skills/expo-migrate-module/SKILL.md
plugins/expo/skills/eas-update-insights/SKILL.md
plugins/expo/skills/eas-workflows/SKILL.md
plugins/expo/skills/expo-app-clip/SKILL.md
plugins/expo/skills/expo-data-fetching/SKILL.md
plugins/expo/skills/expo-dev-client/SKILL.md
plugins/expo/skills/expo-dom/SKILL.md
plugins/expo/skills/expo-examples/SKILL.md
plugins/expo/skills/expo-module/SKILL.md
plugins/expo/skills/expo-native-ui/SKILL.md
plugins/expo/skills/expo-project-structure/SKILL.md
plugins/expo/skills/expo-router/SKILL.md
plugins/expo/skills/expo-tailwind-setup/SKILL.md
plugins/expo/skills/expo-upgrade/SKILL.md
plugins/expo/skills/expo-web-to-native/SKILL.md
plugins/expo/skills/eas-app-stores/SKILL.md
plugins/expo/skills/eas-hosting/SKILL.md
plugins/expo/skills/eas-observe/SKILL.md
plugins/expo/skills/eas-simulator/SKILL.md
plugins/expo/skills/expo-animation/SKILL.md
plugins/expo/skills/expo-design-system/SKILL.md
plugins/expo/skills/expo-skill-feedback/SKILL.md
plugins/expo/skills/expo-ui/SKILL.md

Metadata

Files
0
Version
d1c68a2
Hash
3f48b4c9
Indexed
2026-07-24 22:01

inicio - Wiki
Copyright © 2011-2026 iteam. Current version is 2.155.2. UTC+08:00, 2026-08-20 01:53
浙ICP备14020137号-1 $mapa de visitantes$