Catalog
expo/expo-brownfield

expo

expo-brownfield

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.

global
New~893
v1.0Saved Jul 11, 2026

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.

Files6
6 files · 48.1 KB

Select a file to preview

Overall Score

84/100

Grade

B

Good

Safety

82

Quality

87

Clarity

85

Completeness

79

Summary

Expo Brownfield is a comprehensive technical guide for integrating React Native and Expo into existing native iOS or Android apps. It documents two architectural approaches (isolated and integrated), with detailed configuration, code examples, and troubleshooting across Gradle/CocoaPods build systems, native project structures, and developer workflows.

Static Analysis Findings

3 findings

Patterns detected by deterministic static analysis before AI scoring. Hover over any finding code for detailed information and remediation guidance.

Credential Exposure
SEC-020Direct .env File Access8x in 1 file

Direct .env file access

references/brownfield-integrated.md.env8x
Destructive Operation
SEC-002Privilege Escalation2x in 2 files

Privilege escalation (sudo)

SKILL.mdsudo g
references/brownfield-integrated.mdsudo g
SEC-001Recursive DeletionMax: B

Recursive deletion pattern (rm -rf)

references/troubleshooting.mdrm -rf

Detected Capabilities

file readcode examples (Kotlin, Swift, Groovy, Ruby, JSON)shell command documentationenvironment variable referencenative build system configurationdependency management via Gradle and CocoaPods

Trigger Keywords

Phrases that MCP clients use to match this skill to user intent.

brownfield react nativeembed native libraryandroid gradle reactios cocoapods expoxcframework aarisolated integrated approachexpo modules autolinking

Risk Signals

WARNING

sudo gem install cocoapods

SKILL.md, references/brownfield-integrated.md
WARNING

rm -rf ~/.m2/repository/<group>/<libraryName>, ./gradlew clean, rm -rf .gradle/ and build/ directories

references/troubleshooting.md
INFO

.env file references (multiple occurrences in brownfield-integrated.md)

references/brownfield-integrated.md
INFO

curl/wget patterns in external domain references (docs.expo.dev, github.com, maven.example.com, www.jitpack.io)

Multiple files

Referenced Domains

External domains referenced in skill content, detected by static analysis.

docs.expo.devgithub.commaven.example.comwww.jitpack.io

Use Cases

  • Add React Native to an existing native Android or iOS app
  • Choose between isolated (prebuilt artifact) and integrated (direct build) brownfield architecture
  • Set up Gradle and CocoaPods to embed React Native with Expo modules autolinking
  • Embed AAR or XCFramework artifacts from React Native into native builds
  • Troubleshoot Metro dev server, build, and module-linking issues in brownfield projects
  • Configure AppDelegate/MainApplication and ReactActivity/ReactNativeViewController for RN screens
  • Publish versioned React Native artifacts for consumption across teams or repos

Quality Notes

  • Excellent documentation structure with clear hierarchy (quick rules, prerequisites, step-by-step setup, troubleshooting)
  • Comprehensive code examples in Kotlin, Swift, Groovy, and Ruby covering realistic native integration scenarios
  • Strong scope boundaries: clearly articulates when to choose isolated vs. integrated approaches with decision matrix
  • Good edge case coverage: addresses monorepo setups, architecture mismatches (arm64 vs. x86), cleartext traffic requirements, and version pinning
  • References external documentation (Expo docs) and official templates from the Expo repo, reducing redundancy
  • Troubleshooting section covers common failure modes with actionable recovery steps
  • Security guardrails documented (e.g., cleartext only in debug variants, proper autolinking for credentials isolation)
  • All supporting reference files present and well-integrated via cross-links
Model: claude-haiku-4-5-20251001Analyzed: Jul 11, 2026

Reviews

Add this skill to your library to leave a review.

No reviews yet

Be the first to share your experience.

Add expo/expo-brownfield to your library

Command Palette

Search for a command to run...