expo-brownfield

von expo

Framework (OSS). Integrieren Sie Expo und React Native in eine bestehende native iOS- oder Android-App. Verwenden Sie, wenn der Benutzer Brownfield erwähnt, das Einbetten von React Native in eine…

npx skills add https://github.com/expo/skills --skill expo-brownfield

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.

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.

Mehr Skills von expo

expo-upgrade
expo
Framework (OSS). Richtlinien für das Upgrade von Expo SDK-Versionen und die Behebung von Abhängigkeitsproblemen
apidevelopmentofficial
expo-data-fetching
expo
Framework (OSS). Use when implementing or debugging ANY network request, API call, or data fetching. Covers fetch API, React Query, SWR, error handling, caching, offline support, and Expo Router data loaders (`useLoaderData`).
official
android-e2e-testing
expo
Testen Sie Expo Router-Funktionen auf Android-Emulatoren mit ADB. Verwenden Sie dies nach der Implementierung nativer Android-Funktionen oder bei der Überprüfung des UI-Verhaltens auf Android.
official
expo-dev-client
expo
Erstelle benutzerdefinierte Expo-Entwicklungsclients zum Testen von nativem Code auf physischen Geräten über EAS Build oder lokal. Nur erforderlich bei Verwendung benutzerdefinierter nativer Module, Apple-Ziele (Widgets, App Clips) oder nativer Drittanbieter-Code, der nicht in Expo Go verfügbar ist; versuche zuerst Expo Go mit npx expo start. Unterstützt Cloud-Builds mit automatischer TestFlight-Einreichung oder lokale Builds auf Ihrem Rechner, die .ipa (iOS) oder .apk/.aab (Android) Dateien ausgeben. Erfordert eas.json-Konfiguration mit einem Entwicklungsprofil, das... festlegt.
official
android-jetpack-compose
expo
Use when building Android UIs with Jetpack Compose, managing state with remember/mutableStateOf, or implementing declarative UI patterns.
official
swiftui-expert-skill
expo
Schreiben, überprüfen oder verbessern Sie SwiftUI-Code gemäß Best Practices für State Management, View-Komposition, Leistung, macOS-spezifische APIs und iOS 26+ Liquid…
official
android-e2e-testing
expo
Test Expo Router features on Android emulators using ADB. Use after implementing native Android features or when verifying UI behavior on Android.
official
expo-api-docs
expo
Schreibe TSDoc-Kommentare für Expo-SDK-APIs gemäß den offiziellen Konventionen. MUSS verwendet werden, wenn neue benutzerorientierte TypeScript-APIs in expo-*-Paketen eingeführt werden – dokumentiere…
official