skills.rest
aadilmallick
aadilmallickCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

expo-brownfield

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

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

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 complex: teams must choose between shipping a prebuilt AAR/XCFramework or wiring React Native directly into Gradle and CocoaPods, then handle messaging, lifecycle forwarding, and Metro versus Release builds. This Skill guides that entire brownfield integration with SDK-version-aware instructions. ## Core Features & Use Cases - Approach selection: Decision rules and a comparison matrix for choosing between the isolated approach (prebuilt AAR/XCFramework via expo-brownfield) and the integrated approach (React Native added to the existing Gradle/CocoaPods build). - Step-by-step native setup: Concrete Gradle, Podfile, Kotlin, and Swift code for embedding React Native screens in SwiftUI, UIKit, or Android Activities while preserving the host's app structure. - Feature integration & troubleshooting: Patterns for passing initial props, sending messages between native and JS, forwarding lifecycle events, and fixing common Metro, signing, and autolinking failures. - 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 walks through building an XCFramework with npx expo-brownfield build:ios --package and presenting it via ReactNativeView. ## Quick Start Ask the assistant to help you embed a React Native screen into your existing native iOS or Android app and it will inspect your host project, recommend isolated or integrated, and generate the required native configuration.

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 iOS or Android app?▼

Choose between two approaches: build React Native as a prebuilt AAR/XCFramework with the expo-brownfield package (isolated), or add React Native and Expo directly to your existing Gradle and CocoaPods build (integrated). The choice depends on team ownership and tooling constraints.

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. Integrated adds React Native sources directly into the host's Gradle and CocoaPods build, suiting a single team that owns both layers and wants one unified build pipeline.

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

Yes. With the isolated approach, initialize ReactNativeHostManager in your app delegate and present the generated ReactNativeView in a sheet or cover. With the integrated approach, wrap a UIViewController hosting the React Native root view in a UIViewControllerRepresentable.

Does the native team need Node.js installed for brownfield integration?▼

Only for the integrated approach, where Node runs the Expo CLI and autolinking during the native build. The isolated approach requires Node only in the environment that builds the AAR/XCFramework artifact; the consuming native app needs no Node, Yarn, or CocoaPods changes.

Why does my React Native screen show a blank view in the native app?▼

A blank screen usually means a module name mismatch: the moduleName passed natively must equal the name in AppRegistry.registerComponent, which defaults to "main" in Expo templates. Also verify Metro is reachable in debug builds and that the JS bundle is embedded for release builds.

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

No. Never run prebuild on a manually maintained native host, since clean prebuild deletes native directories. Prebuild belongs only in a separate isolated Expo producer whose ios/ and android/ directories are CNG-owned; apply native changes to the host manually.

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
RitenoobRitenoob

eas-mobile-deployment

Manage EAS builds, submissions, and OTA updates for the RidenDine mobile app.

Community
Advanced
ni1o1ni1o1
4

transbigdata-metroline

Construct metro network graphs and analyze routes from transit geodata.

Community
Intermediate
mweinbachmweinbach
154

expo-brownfield

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

Community
Advanced