Skip to content
expo-brownfield logo

Expo Brownfield

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.

expo/skills24Kinstalls2.7KstarsMobile Development

SKILL.md

Full skill instructions

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:

ApproachWhat ships to the native appWhen to choose
IsolatedPrebuilt AAR / XCFrameworkNative team doesn't need Node or RN tooling; RN code can live in a separate repo
IntegratedReact Native sources added to the existing Gradle / CocoaPods buildOne 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.

More Mobile Development skills

vercel-react-native-skills logo
Mobile Development

vercel-react-native-skills

React Native and Expo best practices for performant mobile apps across list rendering, animations, navigation, and native modules.

31.9K 231.8K
View
firebase-data-connect logo
Mobile Development

firebase-data-connect

PostgreSQL-backed GraphQL backend with auto-generated type-safe SDKs for web, mobile, and Flutter.

462 158.3K
View
xcode-project-setup logo
Mobile Development

xcode-project-setup

Safely modifies Xcode projects (.pbxproj) to add Swift Packages and link files. Use this skill whenever an iOS project needs dependencies installed (e.g. Firebase, Alamofire).

462 120.2K
View
expo-dev-client logo
Mobile Development

expo-dev-client

Build custom Expo development clients for testing native code on physical devices via EAS Build or locally.

2.7K 64.8K
View
expo-module logo
Mobile Development

expo-module

Complete reference for building native modules and views with the Expo Modules API across Swift, Kotlin, and TypeScript.

2.7K 40.3K
View
swiftui-expert-skill logo
Mobile Development

swiftui-expert-skill

Expert SwiftUI code review, refactoring, and implementation guidance with iOS 26+ and macOS support.

3.7K 33.8K
View
swiftui-pro logo
Mobile Development

swiftui-pro

Comprehensive SwiftUI code review against modern APIs, accessibility, and performance standards.

5K 31.2K
View
react-native-best-practices logo
Mobile Development

react-native-best-practices

Provides React Native performance optimization guidelines for FPS, TTI, bundle size, memory leaks, re-renders, and animations. Applies to tasks involving Hermes optimization, JS thread blocking, bridge overhead, FlashList, native modules, or debugging jank and frame drops.

1.7K 27.9K
View
Expo App Design logo
Mobile Development

Expo App Design

Build native-feeling Expo screens — Apple HIG styling, semantic colors, and native UI patterns.

2.7K 25.2K
View
mobile-android-design logo
Mobile Development

mobile-android-design

Material Design 3 and Jetpack Compose patterns for building modern, adaptive Android applications.

40.2K 23.7K
View
mobile-ios-design logo
Mobile Development

mobile-ios-design

Native iOS app design with SwiftUI, Apple HIG compliance, and adaptive layouts for iPhone and iPad.

40.2K 22.9K
View

Coding & apps AI tools

Opus Clip logo
Coding & apps

Opus Clip

Opus.ai: Revolutionize Your Web Experience

Free
View
Imagica logo
Coding & apps

Imagica

Build a no-code AI app in minutes.

Freemium
View
E
Coding & apps

Emergent.sh

An IDE for code migration from legacy to modern frameworks through coding agents.

Freemium
View
Wonder Dynamics logo
Coding & apps

Wonder Dynamics

Automate CGI animation in live-action scenes

Paid
View
M
Coding & apps

Mixo

Launch a website in seconds with AI.

Paid
View
AI Code Convert logo
Coding & apps

AI Code Convert

Streamline Your Coding Experience with AI Code Helper

Free
View