AutoGineer summary
Written by AutoGineer from the skill’s own files, not by the author
The expo-brownfield skill provides a structured methodology for adopting React Native incrementally within established native mobile applications. It outlines two primary integration strategies: the isolated approach, which packages React Native code as a prebuilt library (AAR or XCFramework) for teams that want to avoid Node.js dependencies in the host app, and the integrated approach, which incorporates React Native directly into the native build system (Gradle or CocoaPods) for unified development. The skill emphasizes careful host inspection, version compatibility, and feature validation to ensure seamless interoperability between native and React Native components.
What it does
- Guides the integration of React Native features into existing native iOS and Android codebases.
- Defines the isolated approach for consuming React Native as a prebuilt library dependency.
- Defines the integrated approach for embedding React Native directly into native build pipelines.
- Provides criteria for selecting the appropriate integration strategy based on team structure and build requirements.
- Outlines prerequisites for environment setup, including Node.js and native build toolchains.
- Details verification steps to ensure feature functionality and lifecycle management within the host app.
When to use it
- When adding new features to an existing native app using React Native.
- When native and React Native teams operate on different release cadences.
- When you need to minimize the footprint of React Native on the native build pipeline.
- When a single team owns both native and React Native code and prefers a unified build.
Advantages
- Supports incremental adoption of React Native in legacy native applications.
- Offers flexibility to choose between isolated and integrated build workflows.
- Enables native teams to consume React Native features without requiring Node.js tooling.
- Maintains compatibility with existing native navigation and UI patterns.
- Supports standard development workflows like Metro and Fast Refresh.
Usage examples
- “How do I add a React Native screen to an existing native Android app without requiring the Android team to install Node.js?”
- The agent will guide you through the isolated approach, creating an Expo project and building it as an AAR artifact that the native Android team can consume as a standard dependency.
- “We want to integrate Expo into our iOS app and manage everything in one repository. Which approach should I use?”
- The agent will recommend the integrated approach, providing steps to add React Native and Expo directly to your CocoaPods setup while preserving your existing native project structure.
Install
Download the skill as a ZIP:
https://mp-staging.autogineer.com/agent-skills/expo/expo-brownfield/downloadUnzip it into the cross-client skills folder of your project:
mkdir -p .agents/skills && unzip expo-brownfield.zip -d .agents/skills
Documentation by Expo
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.
Inspect the host first
Identify the existing app entry point, navigation owner, native build system, deployment targets, and any React Native runtime already linked. Record the installed Expo, React Native, and brownfield package versions from the lockfile. Adding EAS Build or Submit to a Swift app alone does not require React Native; route that task to eas-app-stores.
Preserve the host's SwiftUI App / UIKit window and native screens when embedding a feature. Do not run prebuild in a manually maintained native host, including during troubleshooting. An isolated Expo producer may use CNG; keep its generated ios/ and android/ separate from the consuming app.
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.
Both approaches support Metro and Fast Refresh in Debug. Choose integrated for shared build ownership, not because isolated lacks live JS iteration.
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, preserving the native app shell
./references/feature-integration.md -- Pass input, return results, dismiss, clean up listeners, and forward lifecycle events; includes a SwiftUI host example
./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.
The project's package manager and lockfile — npm, Yarn, pnpm, or Bun. Do not switch package managers just to follow an example.
The iOS build environment needs Xcode and CocoaPods (use the project's Gemfile/Bundler setup when present). The isolated consuming app needs Xcode but no CocoaPods or RN tooling just to consume the artifacts.
Select compatible versions
For an existing Expo/RN project, keep its selected SDK and use npx expo install to align dependencies. Do not upgrade it just to follow this skill. For a new producer, use the current stable SDK compatible with the host's OS support, dependencies, and build toolchain; confirm the release is stable before selecting it.
Before native setup, read ./references/version-compatibility.md for matching native templates, toolchain/OS requirements, and build defaults across SDK versions. A purely native consumer has no Expo SDK version to pin, but must satisfy the artifact's requirements.
Verify the feature in the host
Open the RN screen with input, return a result to native, dismiss, and reopen with fresh input. Check listener cleanup and the host's original navigation. Then build the host in Release with a Release artifact and Metro stopped. Rendering only in Expo Go or the producer's example app does not validate the integration. See ./references/feature-integration.md for the complete acceptance scenario.
Submitting Feedback
If you encounter errors, misleading or outdated information in this skill, report it so Expo can improve:
npx --yes @expo/agent-cli@latest feedback --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 agent repeatedly fails at an Expo task or the user has to step in, submit a brief report of the task, expected result, and what went wrong using --category evals and the relevant Expo package or command as --subject.
Files
- ATTRIBUTION.mdAdded by AutoGineer869 B
- LICENSELicence file added by AutoGineer1.1 KiB
- SKILL.md5.7 KiB
- agents/openai.yaml420 B
- references/brownfield-integrated.md22.2 KiB
- references/brownfield-isolated.md21.8 KiB
- references/comparison.md6.6 KiB
- references/feature-integration.md9.9 KiB
- references/troubleshooting.md8.2 KiB
- references/version-compatibility.md4.4 KiB
references/troubleshooting.md
Brownfield Troubleshooting
Cross-cutting issues that apply to both the isolated and integrated approaches. For approach-specific setup, see ./brownfield-isolated.md or ./brownfield-integrated.md.
Build failures
Symptom: Gradle or Xcode build fails after a config change, dependency upgrade, or Expo SDK bump.
First inspect the failing build step and the dependency/configuration diff.
Integrated approach: keep the hand-maintained host intact. Run
npx expo install --checkin the JS project, apply SDK-matched native template changes selectively, then runbundle exec pod install(orpod installwithout Bundler) in the host's Podfile directory. Open the.xcworkspace. Neitherprebuildnorprebuild --cleanis a recovery step for this host: clean prebuild deletes native directories.Isolated approach: rebuild the affected platform in the separate Expo producer, then replace the consumer's artifact and its accompanying dependencies. CNG regeneration belongs only in that producer, after checking that its native files are generated and reproducible.
For stale iOS build products, clean the affected target's build folder/DerivedData. Preserve
Podfile.lock; deleting it changes dependency resolution and can hide the cause. Reinstall pods only when the error points to the pod installation.For Android, clean the affected project's build outputs with its Gradle wrapper. Inspect publication coordinates and dependency resolution before removing a specific stale local Maven artifact; do not clear unrelated caches.
Missing autolinked Expo modules
Symptom: Compilation succeeds but a module throws "Native module cannot be null" / "Cannot find native module 'X'" at runtime.
Install with
npx expo install <package>rather than plainyarn add—expo installpicks the version compatible with the current SDK.After installing a new module, rebuild the native app. Autolinking runs at native build time, not at JS bundle time.
For the isolated approach, you must re-run
npx expo-brownfield build:android|iosafter adding a module, and republish/re-embed the new artifact.
Metro connection
Symptom: "Could not connect to development server" / red screen on launch in debug.
Ensure the device or emulator can reach the dev machine. The Android emulator can talk to the host via
10.0.2.2; physical devices need a reachable LAN IP.For physical Android devices on USB:
adb reverse tcp:8081 tcp:8081.Confirm Metro is actually running:
npx expo startfrom the Expo project (oryarn startfrom the workspace root).Verify the debug
AndroidManifest.xmlenables cleartext traffic — Android 9+ blocks HTTP by default. The debug variant should includeandroid:usesCleartextTraffic="true"on<application>, or anetwork_security_configallowing the dev server.iOS simulator: Metro should be reachable at
localhost:8081. If it is not, check that ATS exceptions are still in place inInfo.plistforlocalhost(the Expo template ships this by default).
iOS XCFramework signing (isolated approach)
Symptom: App launches but immediately crashes with "Library not loaded" or codesign errors during archive.
Inspect the actual output and generated
Package.swift; the framework set depends on package version and source/prebuilt settings, not only the SDK major. Link all required binaries and embed/sign dynamic frameworks. Do not apply Embed & Sign to static binaries. See the artifact instructions.The frameworks must be added to the app target, not a framework or extension target.
With Swift Package output (
build:ios --package), inspect the manifest and link all required products. Precompiled builds on SDK 57 expose an aggregate product; other configurations and older packages can expose separate products. See version compatibility.
iOS architecture / simulator mismatch
Symptom: "Building for iOS Simulator, but the linked library was built for iOS" or "Undefined symbols for architecture arm64".
The XCFramework includes both device and simulator slices. If a slice is missing, rebuild on the missing platform. The
expo-brownfield build:ioscommand produces both by default.On Apple Silicon simulators, do not set
EXCLUDED_ARCHS = arm64for the simulator configuration — Apple Silicon simulators requirearm64. The classic Rosetta-only exclusion is no longer correct.
Android mavenLocal() not found (isolated approach)
Symptom: Gradle reports "Could not find com.example:mybrownfield:1.0.0" even after a successful expo-brownfield build:android.
mavenLocal()must be declared underdependencyResolutionManagement { repositories { ... } }insettings.gradle.kts, not the deprecated top-levelallprojects { repositories { ... } }block. The deprecated form is silently ignored whendependencyResolutionManagementis present.Confirm the artifact actually landed in
~/.m2:find ~/.m2/repository -name "mybrownfield*"Verify the
groupandlibraryNamein the consumer's dependency line match what the plugin config emitted.
Module name mismatch
Symptom: The native view loads but renders a blank screen, with "Application 'X' has not been registered" in the JS logs.
The
moduleNamepassed toReactNativeViewController(moduleName: "main")(iOS) or returned fromgetMainComponentName()(Android) must equal the name passed toAppRegistry.registerComponent("main", () => App)in the JS entry point.The default Expo template registers
"main". If you changed the registration, update every native call site.
Monorepo: autolinking can't find the Expo project
Symptom: Gradle or CocoaPods fails resolving Expo modules even though they are installed.
Android (integrated): set
root = file("../../my-project")(or the correct relative path) inside thereact { ... }block inapp/build.gradle, and explicitly set the project root insettings.gradlebeforeexpoAutolinking.useExpoModules().iOS (integrated): set
:app_pathinuse_react_native!to the absolute path of the Expo project root. Optionally passEXPO_PROJECT_ROOT=/abs/pathtopod install.Confirm
node_modules/is installed at the workspace root (yarn installfrom the monorepo root, not from the Expo project subdirectory).
After upgrading Expo SDK
First check the selected SDK's Node, Xcode, and minimum OS requirements in version compatibility. An unsupported compiler or older deployment target is not repaired by clearing caches. If the brownfield setup stops building after an SDK upgrade:
Re-run
npx expo install --fixin the Expo project to align native module versions.Isolated: regenerate only the CNG-owned producer if needed, rebuild its artifact, and update the host dependency. Integrated: apply native upgrade diffs to the existing host and reinstall pods; preserve its source files and project configuration.
Compare the new
templates/expo-template-bare-minimumfor the target SDK against your customized native files — Expo occasionally changes Gradle plugin names, Podfile helpers, or AppDelegate entry points across SDKs.
Result missing, duplicate callbacks, or a sheet that will not close
Check the module registration and per-presentation request ID. Root props need an explicit JS entry point; do not assume a Router route receives native
initialPropsdirectly.Attach the host listener before mounting RN and supply required startup data through initial props. For live updates, verify subscription readiness and use acknowledgements where delivery matters; messages are not a durable queue.
Remove only this feature's listeners on completion, cancellation, and host dismissal. Dispatch UI changes to the main thread.
popToNative()depends on the native wrapper: the SDK 55 UIKit controller pops navigation, and its SwiftUI wrapper separately callsdismiss(). Custom integrated containers need their own handler. Check which wrapper is actually mounted, or let the host close it on a result/close message. See feature integration.
Requirements and compatibility
Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta
“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.
Needs: Needs Node.js
Security
What our scanner noticed· Low risk
- Instructions that use the network
A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.
Attribution and licence
- Published by
- Expo
- Publisher
- Expo (Official)
- Source
- expo/skills · plugins/expo/skills/expo-brownfield · commit a9e5bd3
- Licence
- MIT License (redistribution allowed)
- LICENSE (added by AutoGineer from plugins/expo/LICENSE)
- ATTRIBUTION.md (written by AutoGineer)
- Synced
AutoGineer is not affiliated with or endorsed by Expo.
Download ZIP
The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download expo-brownfield.zip