skills.rest
trungenglish
trungenglishCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

expo-brownfield

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

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

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 architecturally ambiguous: teams must choose between shipping a prebuilt AAR/XCFramework or embedding React Native directly into Gradle and CocoaPods builds, then wire up Metro, autolinking, and module registration correctly. This Skill guides that decision and provides step-by-step integration instructions for both approaches. ## Core Features & Use Cases - Approach selection: Decision rules and a comparison matrix for choosing between the isolated approach (prebuilt AAR/XCFramework consumed as a library dependency) and the integrated approach (React Native sources added to the existing Gradle/CocoaPods build). - Isolated workflow: Build commands via expo-brownfield build:android and build:ios, Maven publishing configuration, Swift Package output, and native consumption via BrownfieldActivity, ReactNativeViewController, and ReactNativeView. - Integrated workflow: Full Gradle (settings.gradle, app/build.gradle, MainApplication.kt, ReactActivity) and CocoaPods/Xcode (Podfile, AppDelegate.swift, build phases) configuration for embedding React Native in an existing app. - Troubleshooting: Covers Metro connection failures, XCFramework signing, monorepo autolinking, module name mismatches, and SDK upgrade issues. - Use Case: An iOS team using Tuist wants to add a React Native onboarding flow without installing Node. The Skill directs them to the isolated approach: build an XCFramework with npx expo-brownfield build:ios --package, add it as a local Swift Package, and call ReactNativeHostManager.shared.initialize() in the AppDelegate. ## Quick Start Ask the assistant to help you add React Native to your existing native iOS or Android app and describe whether your native team can use Node and React Native tooling.

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?▼

Use Expo's brownfield support with one of two approaches: build React Native as a prebuilt AAR/XCFramework consumed as a library dependency (isolated), or add React Native and Expo directly to your existing Gradle and CocoaPods builds (integrated). Both require Expo SDK 55 or later.

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

The isolated approach ships React Native as a prebuilt AAR or XCFramework so the native team needs no Node or React Native tooling. The integrated approach adds React Native sources to the existing Gradle and CocoaPods build, suiting single teams that want hot reload and one unified build pipeline.

Which Expo SDK version supports brownfield integration?▼

Expo SDK 55 is the minimum supported version for brownfield integration. Earlier SDKs lack the expo-brownfield package and the required ExpoReactHostFactory and ExpoReactNativeFactory entry points. Pin the SDK explicitly when creating the project with create-expo-app.

Why does my iOS brownfield app crash with Library not loaded?▼

This happens when not every produced XCFramework is set to Embed & Sign in the app target. On SDK 56+ there are five frameworks including hermesvm.xcframework and React.xcframework. Using the Swift Package output from build:ios --package links all frameworks automatically.

How do I fix Metro connection errors in a brownfield app?▼

Ensure the device can reach the dev machine: use adb reverse tcp:8081 tcp:8081 for physical Android devices, enable cleartext traffic in the debug AndroidManifest, and confirm Metro is running via npx expo start. The Android emulator reaches the host through 10.0.2.2.

Can I use brownfield React Native in a monorepo setup?▼

Yes, but you must set the project root explicitly. On Android, set root in the react block of app/build.gradle; on iOS, set :app_path in use_react_native! to the Expo project root. Install node_modules at the workspace root with yarn install.

Related Skills

Explore More Software Engineering Skills→
openaiopenai
5.3k

expo-ui-swift-ui

Implements SwiftUI views and modifiers in Expo React Native apps using @expo/ui.

Official
Basic
JaveedIshaqJaveedIshaq
1

Mobile Deployment Skill

Automate Ballee mobile app deployments to iOS and Android platforms.

Community
Advanced
BabakBarBabakBar

Mobile Debugging

Diagnose React Native and Expo issues with Bash, Read, and Grep workflows.

Community
Advanced
jonlucajonluca
3

expo-brownfield

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

Community
Advanced