Expo Brownfield skill: add React Native screens to an existing native app

Expo's skill that guides your AI agent through adding React Native screens to an existing native iOS or Android app.

Installs: 29.3K; on skills.sh
Stars: 4K; on GitHub
Files: 7; besides SKILL.md
Updated: Nov 2026; last repo commit

expo-brownfield is a skill from the Expo team for apps that are already native. It tells your agent to inspect the host app first, pick the isolated approach (a prebuilt Android AAR or iOS XCFramework) or the integrated one (React Native sources added to your Gradle and CocoaPods builds), then follow a step-by-step guide for that route.

It loads when you ask about brownfield work, embedding a React Native screen in SwiftUI, UIKit or Kotlin, or packaging an AAR or XCFramework. It bundles no scripts. The guides it points to run commands such as npx expo install and npx expo-brownfield build:ios, so you need Node.js, and Xcode with CocoaPods for iOS.

Good for

Native iOS or Android developers adding a few React Native screens to a shipping app
Mobile teams choosing between a prebuilt AAR/XCFramework and building React Native into the host
React Native developers who need to hand a native team a library to consume

Install expo-brownfield

Claude Code

Copy this prompt.

Install the expo-brownfield skill in Claude Code. Run this command:

npx skills add https://github.com/expo/skills --skill expo-brownfield

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

From its listing on skills.sh. Source.

What's in the skill

When it loads

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.

Sections in SKILL.md

Inspect the host first
Pick an approach
References
Shared prerequisites
Select compatible versions
Verify the feature in the host
Submitting Feedback

Key facts

Author: Expo (expo/skills repo)
Installs on skills.sh: 29,308 as of 2026-11-02
GitHub stars: 4,005 for the whole expo/skills repo, 2026-11-02
License: MIT (stated in the repo README)
Last repo commit: 2026-11-01
Files: 8 files including SKILL.md: 6 reference guides and 1 agents/openai.yaml; no scripts
Needs: Node.js LTS; Xcode and CocoaPods for iOS
Part of: The expo plugin in the expo/skills repo

What it includes

Reads entry point, navigation, build system and package versions
Your agent finds the existing app entry point, who owns navigation, the native build system, deployment targets and any React Native already linked. It records the Expo, React Native and brownfield package versions from the lockfile.
Read · Inspect the host first
Isolated (AAR/XCFramework) or integrated (sources in your build)
Isolated suits native teams that do not want Node or React Native tooling, or repos that release separately. Integrated suits one team that owns both sides.
Try: “We have a SwiftUI app. Should we embed a React Native screen as an XCFramework or add it to our Podfile?”
Read · Pick an approach
Build an AAR/XCFramework and consume it in the native app
Covers creating the Expo project, installing expo-brownfield, building the Android and iOS libraries, publishing the AAR, shipping a Swift Package and showing the React Native view.
Runs code · references/brownfield-isolated.md
Add React Native and Expo to your Gradle and CocoaPods builds
Walks through the Android settings.gradle, build.gradle and MainApplication changes, the iOS Podfile and Xcode run-script phase, and Info.plist.
Runs code · references/brownfield-integrated.md
Pass input in, return results, dismiss, clean up listeners
Defines the boundary between native and React Native, registers the component that receives input, and includes a SwiftUI host example and an acceptance scenario.
Read · references/feature-integration.md
Decision criteria and scenarios for isolated vs integrated
Read · references/comparison.md
SDK 55 vs 57 toolchain, iOS and Node minimums
Tells your agent to keep an existing project on its SDK and to check the SDK compatibility table before touching the host.
Read · references/version-compatibility.md
Metro, build, signing and module-resolution fixes
Fixes for stale builds, missing autolinked modules, Metro connection, XCFramework signing, mavenLocal and monorepo paths. It says not to run prebuild in a hand-maintained native host.
Runs code · references/troubleshooting.md
Release build with Metro stopped, not just Expo Go
Opens the React Native screen with input, returns a result, dismisses, reopens, then builds the host in Release with a Release artifact and Metro stopped.
Runs code · Verify in the host

From the official docs

Permissions

Medium risk

Your agent will edit native build files and run npx and CocoaPods commands from the guides. Work on a clean git branch and approve each command.

What it can do

Read your data
Create and change things
Delete things
Read-only mode

Watch out for

It edits your native build files
The integrated route changes settings.gradle, build.gradle, the Podfile and Xcode build phases. Use a clean git branch and review the diff. github.com
Do not run prebuild in a hand-maintained host
SKILL.md forbids it, and the troubleshooting guide says a clean prebuild deletes native directories. Stop your agent if it proposes it. github.com
Commands run through npx
Guides call npx with @latest tags, such as create-expo-app and the Expo feedback command, which download and run packages. Approve each command first. github.com

Technical details

Talks to	npm package downloads when the guides run npx commands. Optional feedback to Expo through npx @expo/agent-cli
Scopes	Your agent edits Gradle, Podfile, Xcode and source files in the native host The guides run npx expo install, npx expo-brownfield build:android and build:ios, and pod install Builds can publish an Android AAR to a Maven repository you configure

Questions

What does the expo-brownfield skill do?

It guides your agent through adding Expo and React Native screens to an existing native iOS or Android app. It covers two routes, isolated (a prebuilt AAR or XCFramework) and integrated (React Native sources inside your Gradle and CocoaPods builds).

How do I install it in Claude Code, the Claude app or Codex?

Use the install box at the top of this page. The Expo README also documents a plugin route for Claude Code and Codex that installs all Expo skills at once; this page covers the single-skill folder.

Does it need an API key?

No key is mentioned in SKILL.md or in the reference guides. You need Node.js, plus Xcode and CocoaPods for iOS builds.

Is it safe to use?

It bundles no scripts, but your agent will run build and install commands from its guides on your machine, so read each one before you approve it. SKILL.md also tells the agent not to run prebuild in a hand-maintained native host, because a clean prebuild deletes native directories. It names a feedback command that sends a report to Expo, and says to submit it only when the agent has something specific to report.

Isolated or integrated: which should I pick?

Pick isolated if the native team should consume React Native as a library without Node tooling, or if the code lives in separate repos. Pick integrated if one team owns both sides and wants a single build. Both support Metro and Fast Refresh in Debug.

What if I only want to ship a native app with EAS?

SKILL.md routes that task to a different skill, eas-app-stores, which is not part of this page.

Information

updated Nov 2, 2026

Repository: expo/skills
Folder: plugins/expo/skills/expo-brownfield

expo/skills skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 9

expo-brownfield SKILL.md · github.com
Isolated guide · github.com
Integrated guide · github.com
expo/skills README · github.com
skills.sh listing · skills.sh
Feature integration guide · github.com
Troubleshooting guide · github.com
Version compatibility guide · github.com
Comparison guide · github.com