All skills
expo avatar

/expo-brownfield

@ea892a7 official
by expoexpo/skills2.6k stars
156

Framework (OSS). Integrate Expo and React Native into an existing native iOS or Android app. Use for brownfield, embedding a React Native screen in SwiftUI/UIKit or Kotlin, or AAR/XCFramework packaging. Covers isolated and integrated approaches. For building or distributing a purely native app with EAS, use eas-app-stores.

Use this Skill: https://skilld.dev/gh/expo/skills/expo-brownfield

This session only. Nothing lands on disk.

referencesversion-compatibility.md

≈1.1k tokens on demand. Your agent reads this file only when SKILL.md points to it.

Select versions before integrating

Keep the workflow version-aware rather than pinning every host to one SDK. Existing projects retain their SDK unless an upgrade is part of the task. New producers should use the current stable Expo release when the host and toolchain can support it.

Inspect and select

  1. Read the producer's package.json and lockfile; record resolved expo, react-native, and expo-brownfield versions. Check the host's deployment targets, Xcode/Node versions, and native dependency graph, including any existing RN runtime.
  2. For new work, check the Expo releases and SDK compatibility table. npm view expo dist-tags --json can confirm the current stable latest version. Do not infer stability from the highest SDK number or select canary/next by default.
  3. Select an SDK compatible with the host's supported OS versions, modules, and build tools. Do not silently raise the host's minimum OS or swap its toolchain to satisfy a tutorial. If a constraint conflicts, explain the concrete choices before changing that product requirement.
  4. Use that SDK's versioned Brownfield API docs and sdk-<major> native template. Install modules with npx expo install; run npx expo install --check before native builds. For an SDK upgrade, use expo-upgrade, preserve the host, and apply native diffs selectively.
  5. Inspect the installed CLI's build:ios --help / build:android --help, plugin schema, generated Swift/Kotlin wrappers, and Package.swift. Flags, prebuilt defaults, import names, and binary products can change within a major release.

To scaffold a small new feature after those checks:

npx create-expo-app@latest my-project --template blank@latest
cd my-project
npx expo install expo-brownfield typescript @types/react

This avoids adding a Router shell just to export one component. For an existing Router app, preserve it and add the root-props adapter described in feature integration. If selecting an older SDK, use a verified template tag such as blank@sdk-55; the scaffolder's own @latest version does not determine the template's SDK. Commit the producer's lockfile for repeatable builds.

SDK requirements and build defaults

Surface SDK 55 SDK 57
React Native family 0.83 0.86
iOS minimum in the Expo template 15.1 16.4
Documented minimum Node / Xcode 20.19.x / 26.2 22.13.x / 26.4
Brownfield React Native build default Source Prebuilt
Precompiled Expo modules Version/configuration dependent Enabled by default in the native template
Swift Package products 55.0.28: separate feature and Hermes products 57.0.18: one aggregate product when precompiled modules are detected; otherwise separate products

React Native prebuilt binaries and precompiled Expo modules are separate settings. Set React Native source mode on expo-brownfield's ios.buildReactNativeFromSource. Expo module precompilation is controlled by expo-build-properties' ios.usePrecompiledModules. Do not disable defaults as a generic build fix; first inspect the failing dependency and toolchain requirement.

In 57.0.18, precompiled builds suffix the generated package/product with its configuration (MyAppPackage-release or MyAppPackage-debug). They do not rename the generated Swift module: continue to import the configured target, such as MyBrownfield. Inspect the emitted manifest instead of constructing an assumed package path.

SDK 56 introduced additional brownfield capabilities carried into SDK 57, including experimental multiple isolated frameworks and registering host Turbo Module classes. Load the selected SDK's API and installed interfaces only when the task needs them. Do not enable experimental multi-framework support for a single feature or assume two independently packaged RN runtimes can be linked together without collision handling.

Sources: SDK requirements, SDK 57 Brownfield API, SDK 57 native template, SDK 56 brownfield additions, published Brownfield package.

Source: SKILL.md on GitHub

No alerts16d3 checks · Risk SAFE
  • Gen Agent Trust Hub16d

    The skill provides comprehensive documentation and guidelines for integrating Expo and React Native features into existing native iOS and Android apps using either isolated or integrated architectures. It includes a specific utility command to submit feedback to Expo via npx. No security issues or malicious behaviors were detected.

  • Socket16d

    No alerts

  • Snyk16d

    Risk: LOW · No issues

Signed by skilld at ea892a7. This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.

Last checked against GitHub 3 days ago.

Activeupdated 3 weeks ago
  • expo
  • react-native
  • brownfield
  • ios
  • android
  • native-integration
  • aar
  • xcframework
  • kotlin
  • swift

README badge

README badge for expo/skills/expo-brownfield

Integrates React Native and Expo into an existing native iOS or Android app using either isolated (AAR/XCFramework) or integrated (Gradle/CocoaPods) approaches. Choose isolated if the native team needs no Node tooling or RN lives in a separate repo; choose integrated if one team owns both codebases and wants hot reload in the native build.

Generated from the current SKILL.md.

What is the difference between isolated and integrated approaches?
Isolated builds React Native as a prebuilt AAR or XCFramework that the native team consumes without needing Node or RN tooling installed. Integrated adds React Native sources directly to the existing Gradle and CocoaPods build, requiring a single team to manage both native and RN code together.
Which approach should I use if my native and React Native teams are separate?
Choose isolated. It lets the iOS/Android team consume React Native as a regular library dependency without installing Node, Yarn, or the React Native build toolchain, and allows the codebases to live in separate repositories and release independently.
What is the minimum Expo SDK version for brownfield?
Expo SDK 55 or later. Earlier SDKs lack the required ExpoReactHostFactory and ExpoReactNativeFactory entry points and the current autolinking surface. Always pin the SDK explicitly when creating the Expo project.
Do both approaches require Node.js and Yarn?
Yes, Node.js (LTS) and Yarn are required in the environment that builds the React Native side. The integrated approach additionally requires CocoaPods on iOS; the isolated approach does not.

Generated from the current SKILL.md. These answers refresh after source changes.