New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Official agent skill

Expo Brownfield

by expo in expo/skills

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

OfficialMITAuto-check passedMobile

Install Expo Brownfield

skills CLI
$ npx skills add expo/skills --skill expo-brownfield -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install expo/skills expo-brownfield --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/expo/skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/plugins/expo/skills/expo-brownfield .claude/skills/expo-brownfield && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
expo-brownfield
GitHub stars
2.7k
Token cost
~1.4k tokens
SKILL.md length
693 words
Files
8 (incl. references)
Skills in repo
26
Repo updated
First seen
Licence
MIT

At a glance

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

  • Embedding a React Native screen in SwiftUI/UIKit
  • SKILL.md covers Inspect the host first, Pick an approach, References and Shared prerequisites, plus 3 more sections
  • Calls npx
  • AAR/XCFramework packaging

What it does

Expo Brownfield is an agent skill from expo/skills, published by the product's own GitHub organization. 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.

Its SKILL.md is about 1.4k tokens, which your agent loads only when the skill is triggered. The skill folder holds 9 other files, including reference files (for example `agents/openai.yaml`, `references/brownfield-integrated.md` and `references/brownfield-isolated.md`).

It sits in Mobile, covering Cross-platform mobile apps, iOS development and Android development. It works with Expo, React Native, Android and iOS. The repository describes itself as: A collection of AI agent skills for working with Expo projects and Expo Application Services. The licence is MIT.

When your agent uses it

  • Embedding a React Native screen in SwiftUI/UIKit
  • AAR/XCFramework packaging

Example prompts

  • “/expo-brownfield”

Requirements

  • Node.js

What it can do on your machine

Read from SKILL.md and the folder at commit d4f4840. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • npx

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Links to these hosts (documentation or services it may open):

    • docs.expo.dev

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Expo Brownfield loads about 1.4k tokens when it runs, and up to ~20k if it reads all its reference files. Until then it costs about 81 tokens; SKILL.md has 693 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~81
When it runs · the whole SKILL.md, loaded when a task matches
~1.4k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~20k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from expo/skills at commit d4f4840, republished under its MIT licence (© expo). 693 words, ~1,450 tokens.

Download SKILL.mdSave it as .claude/skills/expo-brownfield/SKILL.md (or your agent's skills folder). This skill also uses 7 other files; get the full folder from GitHub.
name
expo-brownfield
description
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.

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.

Inspect the host first

Identify the existing app entry point, navigation owner, native build system, deployment targets, and any React Native runtime already linked. Record the installed Expo, React Native, and brownfield package versions from the lockfile. Adding EAS Build or Submit to a Swift app alone does not require React Native; route that task to eas-app-stores.

Preserve the host's SwiftUI App / UIKit window and native screens when embedding a feature. Do not run prebuild in a manually maintained native host, including during troubleshooting. An isolated Expo producer may use CNG; keep its generated ios/ and android/ separate from the consuming app.

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.
  • Both approaches support Metro and Fast Refresh in Debug. Choose integrated for shared build ownership, not because isolated lacks live JS iteration.

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, preserving the native app shell
  • ./references/feature-integration.md -- Pass input, return results, dismiss, clean up listeners, and forward lifecycle events; includes a SwiftUI host example
  • ./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/

Show full SKILL.md (300 more words)Show less

Shared prerequisites

Both approaches require, in the environment that builds the React Native side:

  • Node.js (LTS) — runs the Expo CLI and JavaScript code.
  • The project's package manager and lockfile — npm, Yarn, pnpm, or Bun. Do not switch package managers just to follow an example.

The iOS build environment needs Xcode and CocoaPods (use the project's Gemfile/Bundler setup when present). The isolated consuming app needs Xcode but no CocoaPods or RN tooling just to consume the artifacts.

Select compatible versions

For an existing Expo/RN project, keep its selected SDK and use npx expo install to align dependencies. Do not upgrade it just to follow this skill. For a new producer, use the current stable SDK compatible with the host's OS support, dependencies, and build toolchain; confirm the release is stable before selecting it.

Before native setup, read ./references/version-compatibility.md for matching native templates, toolchain/OS requirements, and build defaults across SDK versions. A purely native consumer has no Expo SDK version to pin, but must satisfy the artifact's requirements.

Verify the feature in the host

Open the RN screen with input, return a result to native, dismiss, and reopen with fresh input. Check listener cleanup and the host's original navigation. Then build the host in Release with a Release artifact and Metro stopped. Rendering only in Expo Go or the producer's example app does not validate the integration. See ./references/feature-integration.md for the complete acceptance scenario.

Submitting Feedback

If you encounter errors, misleading or outdated information in this skill, report it so Expo can improve:

bash
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. If an AI agent repeatedly failed or the user had to take over an Expo task, load the expo-skill-feedback skill and follow its eval-candidate flow instead of reusing the command above.

© expo, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 7 other files (references) in plugins/expo/skills/expo-brownfield of expo/skills.

  • SKILL.md
  • agents/openai.yaml
  • references/brownfield-integrated.md
  • references/brownfield-isolated.md
  • references/comparison.md
  • references/feature-integration.md
  • references/troubleshooting.md
  • references/version-compatibility.md

Open the folder on GitHubat commit d4f4840

Compare with similar skills

Expo Brownfield next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Expo Brownfield compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Expo Brownfield this skillexpo/skills2.7k—~1.4kAutomated safety check: PassMIT
Expo Brownfield Integrationmweinbach/agent-coworker1562 repos~900Automated safety check: NotesCustom licence
Expo UIarcboxlabs/linkcode155—~1.2kAutomated safety check: PassMIT
Simulator Audio E2Ehyochan/react-native-nitro-sound961—~1.1kAutomated safety check: PassMIT
Moq Kitsoftware-mansion-labs/skills291—~5kAutomated safety check: PassApache-2.0
Web To Mobilesuntay44/web-to-mobile-magic-plugin107—~781Automated safety check: PassMIT

Similar skills

  • Expo Brownfield Integration

    mweinbach/agent-coworker

    Helps add Expo and React Native to an existing native iOS or Android app, and choose between a prebuilt AAR or XCFramework and a fully integrated build.

    156 GitHub starsUsed in 2 repos~900 tokens
    MobileAuto-check: notes

  • Expo UI

    arcboxlabs/linkcode

    Framework (OSS). An agent skill from arcboxlabs/linkcode.

    155 GitHub stars~1.2k tokensUpdated 13 days ago
    MobileAuto-check passed

  • Simulator Audio E2E

    hyochan/react-native-nitro-sound

    Build and run repeatable react-native-nitro-sound recorder/player regression tests on an iOS Simulator or Android emulator, with explicit virtual-device selection, microphone permission, Maestro…

    961 GitHub stars~1.1k tokensUpdated 11 days ago
    MobileAuto-check passed

  • Moq Kit

    software-mansion-labs/skills

    Software Mansion's moq-kit — native Swift (iOS) and Kotlin (Android) SDKs for Media over QUIC (moq-lite) live streaming: sub-second-latency playback, camera/microphone/screen publishing, and…

    291 GitHub stars~5k tokensUpdated 13 days ago
    MobileAuto-check passed

  • Web To Mobile

    suntay44/web-to-mobile-magic-plugin

    Orchestrate website or web app conversion into a mobile app.

    107 GitHub stars~781 tokensUpdated 27 days ago
    MobileAuto-check passed

  • Mobile Dev

    callstackincubator/codex-mobile-dev-plugin

    Official

    A skill your agent uses when building, running, changing, or debugging local iOS, Android, Expo, React Native, or SwiftUI apps.

    152 GitHub stars~5.5k tokensUpdated 2 days ago
    MobileAuto-check passed

More from expo/skills

All 26 skills in this repo

  • Eas Update Insights

    expo/skills

    Official

    Check the health of published EAS Update: crash rates, install/launch counts, unique users, payload size, and the split between embedded and OTA users per channel.

    2.7k GitHub starsUsed in 4 repos~3.1k tokens
    Auto-check passed

  • Eas Workflows

    expo/skills

    Official

    Helps understand and write EAS workflow YAML files for Expo projects.

    2.7k GitHub stars~1.2k tokensUpdated 3 days ago
    Auto-check passed

  • Expo App Clip

    expo/skills

    Official

    Add an iOS App Clip target to an Expo app. An agent skill from expo/skills.

    2.7k GitHub starsUsed in 2 repos~2.4k tokens
    Auto-check passed

  • Expo Skill Eval

    expo/skills

    Official

    Evaluate Expo skills in this repo end-to-end - trigger accuracy, generated code quality, and runtime screenshots on iOS simulator and Android emulator via Expo Go (web optional).

    2.7k GitHub stars~12k tokensUpdated 3 days ago
    Auto-check passed

  • Expo Skill Feedback

    expo/skills

    Official

    Submit feedback on an Expo skill—or Expo itself—and control bundled anonymous usage telemetry (off by default / opt-in).

    2.7k GitHub stars~1.3k tokensUpdated 3 days ago
    Auto-check passed

  • Expo Module

    expo/skills

    Official

    Guide for creating and writing Expo native modules and views using the Expo Modules API (Swift, Kotlin, TypeScript).

    2.7k GitHub starsUsed in 1 repo~1.6k tokens
    Auto-check passed

Works with

Categories

Questions about Expo Brownfield

What does Expo Brownfield do?

Integrate Expo and React Native into an existing native iOS or Android app. Expo Brownfield is an agent skill from expo/skills, published by the product's own GitHub organization. Integrate Expo and React Native into an existing native iOS or Android app.

When should I use Expo Brownfield?

Expo Brownfield fits situations like: embedding a React Native screen in SwiftUI/UIKit; AAR/XCFramework packaging.

How do I install Expo Brownfield in Claude Code?

Run `npx skills add expo/skills --skill expo-brownfield -a claude-code`. Or copy the skill folder (plugins/expo/skills/expo-brownfield in expo/skills) into .claude/skills/expo-brownfield in your project. Claude Code loads it when a task matches its description.

How do I install Expo Brownfield in Codex?

Run `npx skills add expo/skills --skill expo-brownfield -a codex`. Or copy the skill folder (plugins/expo/skills/expo-brownfield in expo/skills) into .agents/skills/expo-brownfield in your project. Codex loads it when a task matches its description.

Can I use Expo Brownfield in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add expo/skills --skill expo-brownfield -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/expo-brownfield, .gemini/skills/expo-brownfield, .github/skills/expo-brownfield and .opencode/skills/expo-brownfield in your project.

What does Expo Brownfield need to run?

Going by SKILL.md and its folder, Expo Brownfield needs the command-line tools its instructions call (npx). Our summary lists: Node.js.

Does Expo Brownfield access the network?

SKILL.md names 1 domain. As links in the text: docs.expo.dev. This is read from the text; nothing was executed.

Is Expo Brownfield safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Expo Brownfield use?

Expo Brownfield is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Expo Brownfield use?

About 1.4k tokens (SKILL.md is roughly 5.8k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 19k tokens, read only when the agent opens those files.

What are the alternatives to Expo Brownfield?

Skills that share tags, products or a category with Expo Brownfield: Expo Brownfield Integration (mweinbach/agent-coworker, 156 stars), Expo UI (arcboxlabs/linkcode, 155 stars), Simulator Audio E2E (hyochan/react-native-nitro-sound, 961 stars) and Moq Kit (software-mansion-labs/skills, 291 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Expo Brownfield?

expo (a GitHub organization, an official publisher) maintains it in expo/skills, which has 2,685 GitHub stars. The repository holds 26 skills in this directory. The repository was last updated on October 7, 2026.

Source: expo/skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.