
Expo Brownfield
FreeIntegrate React Native into existing native apps.
Free · Opens the source repo
What Expo Brownfield does
Expo Brownfield is a skill designed for developers looking to incrementally adopt React Native in their existing iOS or Android applications. Unlike greenfield projects that start with React Native from the ground up, brownfield projects allow teams to integrate React Native features into pre-existing native apps. This skill provides guidance on two primary integration approaches: isolated and integrated, helping teams choose the best method based on their project requirements and team structure.
The isolated approach is ideal for teams that prefer to keep their React Native code separate from their native code. This method allows developers to package React Native as a prebuilt AAR or XCFramework, which can be consumed by the native application without the need for Node.js or React Native tooling. This is particularly useful when the native team operates independently from the React Native team, enabling them to maintain their own release cycles.
On the other hand, the integrated approach is suited for teams that manage both native and React Native codebases together. By adding React Native sources directly into the existing Gradle or CocoaPods build, this method allows for a more streamlined development experience, including features like hot reloading and JavaScript source maps, enhancing the overall efficiency of the development process.
This skill is particularly beneficial for mobile developers and teams transitioning to React Native, as it provides clear guidance on how to effectively incorporate React Native into their existing workflows. With detailed references and troubleshooting tips, developers can navigate common challenges associated with brownfield integration, ensuring a smoother transition to using React Native in their applications.
When to use it
Use this skill when you want to incrementally adopt React Native in a brownfield project, especially when dealing with existing native codebases.
When not to use it
This skill is not suitable for greenfield projects where React Native is used from the start, or if your team is not familiar with React Native tooling.
What you can build with it
Integrating into an Existing App
Use this skill to guide your team in adding React Native features to an existing native app without a complete rewrite.
Choosing the Right Approach
Leverage the decision matrix to determine whether to adopt the isolated or integrated approach based on your team's structure.
Troubleshooting Common Issues
Access troubleshooting resources to resolve common integration problems quickly and efficiently.
How to install Expo Brownfield
View source1. Install with the skills CLI
npx skills add expo/skills/expo-brownfield --agent claude-code2. Or install it manually
Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.
Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs
Inside SKILL.md
Written by expoExpo 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.
Frequently asked questions about Expo Brownfield
Similar skills
Android App Development
Comprehensive guide for Android and cross-platform app development.
Add App Clip to Expo App
Integrate lightweight iOS App Clips into your Expo project.
APK Reverse
Streamline your Android APK reverse engineering process.
Swift Expert
Master iOS/macOS development with Swift and SwiftUI.
React Native Expert
Build and optimize mobile apps with React Native and Expo.
Kotlin Specialist
Master idiomatic Kotlin with expert patterns and practices.
