expo-brownfield

작성자: expo

프레임워크(OSS). 기존 네이티브 iOS 또는 Android 앱에 Expo와 React Native를 통합합니다. 사용자가 brownfield, React Native 임베딩을 언급할 때 사용하세요.

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.

expo의 다른 스킬

expo-upgrade
expo
프레임워크(OSS). Expo SDK 버전 업그레이드 및 의존성 문제 해결을 위한 가이드라인
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
Android 에뮬레이터에서 ADB를 사용하여 Expo Router 기능을 테스트합니다. 네이티브 Android 기능을 구현한 후 또는 Android에서 UI 동작을 확인할 때 사용하세요.
official
expo-dev-client
expo
EAS Build 또는 로컬에서 실제 기기에서 네이티브 코드를 테스트하기 위한 맞춤형 Expo 개발 클라이언트를 빌드합니다. 커스텀 네이티브 모듈, Apple 타겟(위젯, 앱 클립) 또는 Expo Go에 없는 타사 네이티브 코드를 사용할 때만 필요하며, 먼저 npx expo start로 Expo Go를 시도해 보세요. 자동 TestFlight 제출이 포함된 클라우드 빌드 또는 로컬 머신에서의 로컬 빌드를 지원하며, .ipa(iOS) 또는 .apk/.aab(Android) 파일을 출력합니다. eas.json에 development 프로필을 설정하여 구성해야 합니다.
official
expo-tailwind-setup
expo
Expo 앱(iOS, Android, Web)을 위한 범용 Tailwind CSS v4 스타일링. Metro 변환기를 통해 Tailwind CSS v4를 react-native-css 및 NativeWind v5와 통합하여 Babel 설정이 필요 없음. className 스타일을 네이티브 요소에 적용하는 재사용 가능한 CSS 래핑 컴포넌트 라이브러리(View, Text, ScrollView, Pressable, TextInput, Image, Link)를 제공. CSS 미디어 쿼리를 통한 플랫폼별 스타일링, @theme 블록을 통한 사용자 정의 테마 변수, Apple 시맨틱...
official
android-jetpack-compose
expo
Jetpack Compose로 Android UI를 구축하거나, remember/mutableStateOf로 상태를 관리하거나, 선언형 UI 패턴을 구현할 때 사용합니다.
official
swiftui-expert-skill
expo
SwiftUI 코드를 작성, 검토 또는 개선하며 상태 관리, 뷰 구성, 성능, macOS 전용 API, iOS 26+ Liquid…에 대한 모범 사례를 따릅니다.
official
eas-update-insights
expo
게시된 EAS 업데이트의 상태 확인: 충돌률, 설치/실행 횟수, 고유 사용자, 페이로드 크기, 임베디드와 OTA 사용자 간 분포 등
official