skills.rest
bmiit145
bmiit145COMMUNITY
Explore all skills by this author →
WebsiteGitHub

expo-brownfield

Integrate Expo and React Native screens into existing native iOS and Android apps.

Updated Sep 8, 2026
Search Tags:#ios#android#brownfield#react native#gradle#expo#xcframework
One-click install
npx skills add https://github.com/bmiit145/leadBee --skill expo-brownfield-bmiit145
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: expo-brownfield
Source: https://github.com/bmiit145/leadBee/tree/main/mobile/.agents/skills/expo-brownfield
Command: npx skills add https://github.com/bmiit145/leadBee --skill expo-brownfield-bmiit145

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Adding React Native to an existing native iOS or Android app is error-prone: teams must choose between shipping a prebuilt AAR/XCFramework or wiring React Native directly into Gradle and CocoaPods, match SDK and toolchain versions, and handle messaging, lifecycle, and build failures across two runtimes. ## Core Features & Use Cases - Approach selection: Decision rules and a comparison matrix for choosing between the isolated approach (prebuilt AAR/XCFramework consumed like any library) and the integrated approach (React Native added to the existing Gradle/CocoaPods build). - Step-by-step native setup: Concrete Gradle, Podfile, Kotlin, and Swift configuration for embedding React Native screens while preserving the host's SwiftUI App, UIKit window, and navigation. - Feature integration and troubleshooting: Patterns for passing initial props, returning results, forwarding lifecycle events, plus fixes for Metro connection, signing, autolinking, and module-name mismatch issues. - Use Case: An iOS team with a SwiftUI app needs to embed one React Native onboarding flow without installing Node in their build pipeline; the skill guides building an XCFramework with expo-brownfield and presenting it via ReactNativeView. ## Quick Start Ask the assistant to add a React Native screen to your existing native iOS or Android app and let it inspect your project to choose the isolated or integrated brownfield approach.

Frequently Asked Questions about expo-brownfield

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add React Native to an existing native iOS or Android app?▼

Use Expo's brownfield approach in one of two ways: build the RN code as a prebuilt AAR/XCFramework consumed like a library (isolated), or add React Native and Expo directly to the existing Gradle and CocoaPods build (integrated). Choose isolated when the native team should not need Node or RN tooling.

What is the difference between isolated and integrated brownfield approaches?▼

Isolated ships React Native as a prebuilt AAR or XCFramework so the native team needs no Node or RN tooling, suiting separate repos and teams. Integrated adds RN sources to the existing Gradle/CocoaPods build, suiting a single team owning one unified build pipeline.

Can I embed a React Native screen in a SwiftUI app?▼

Yes. With the isolated approach, initialize ReactNativeHostManager in the app delegate and present the generated ReactNativeView in a sheet or cover. With the integrated approach, wrap a UIViewController hosting the RN view in a UIViewControllerRepresentable while keeping the existing @main App.

Why does my brownfield app show a blank screen with 'Application has not been registered'?▼

The moduleName passed natively must match the name in AppRegistry.registerComponent in the JS entry point. The default Expo template registers "main"; if you changed the registration, update every native call site such as ReactNativeViewController(moduleName:) or getMainComponentName().

Should I run expo prebuild on my existing native project?▼

No. Never run prebuild in a manually maintained native host, including during troubleshooting, because clean prebuild deletes native directories. Prebuild is only safe in a separate isolated Expo producer whose native directories are CNG-owned.

What are the limitations of the isolated AAR/XCFramework approach?▼

The native app must meet React Native's minSdk 24 floor on Android and the artifact's iOS deployment target. Adding a new Expo module requires rebuilding and republishing the artifact, and shared libraries like Compose or OkHttp may force version upgrades in the host.

Related Skills

Explore More Software Engineering Skills→
callstackincubatorcallstackincubator
1.6k

react-native-brownfield-migration

Guide incremental migration from native iOS/Android apps to React Native or Expo.

Official
Advanced
hjemmesidekongenhjemmesidekongen
1

expo-deployment

Manage Expo app deployment with EAS Build and EAS Update.

Community
Advanced
SnakeOSnakeO
9

debug:react-native

Diagnose React Native issues across iOS and Android with a four-phase workflow.

Community
Intermediate
jonlucajonluca
3

expo-brownfield

Integrate Expo and React Native into existing native iOS or Android apps.

Community
Advanced