Generated banner for React Native Brownfield Migration
Generated logo for React Native Brownfield Migration

React Native Brownfield Migration

CallstackOfficialPublished by Callstack

  • Skill
  • Tool integration
  • Software development
  • MIT
  • No issues found

From the author

Implements an accepted incremental brownfield migration from native iOS or Android to React Native or Expo using @callstack/react-native-brownfield. Use after the brownfield path has been selected, when setting up the integration, packaging XCFramework or AAR artifacts, or adding React Native surfaces to native hosts.
— the description by Callstack

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

The react-native-brownfield-migration skill provides a structured, step-by-step approach for adopting React Native within an existing native codebase. It supports both Expo and bare React Native workflows, guiding developers through initial setup, artifact packaging (XCFrameworks or AARs), and host integration. The skill emphasizes a phased rollout, ensuring that React Native surfaces are integrated into native hosts reliably while maintaining isolation through a facade-based approach.

What it does

  • Guides the selection between Expo and bare React Native migration paths.
  • Automates the setup of the brownfield integration environment.
  • Facilitates the packaging of React Native source code into native-compatible artifacts like XCFrameworks or AARs.
  • Provides instructions for integrating React Native surfaces into existing iOS and Android host applications.
  • Includes validation steps for runtime initialization and UI rendering.
  • Offers troubleshooting guidance for common integration and build issues.

When to use it

  • When you have an existing native mobile app and want to introduce React Native incrementally.
  • When you need to package a React Native app as a library for a native host.
  • When you are setting up the initial brownfield configuration for an Expo or bare project.
  • When you need to integrate specific React Native screens or features into a native iOS or Android host.

Advantages

  • Enables incremental adoption of React Native without requiring a full rewrite.
  • Supports both Expo and bare React Native workflows.
  • Provides a clear, standardized path for artifact generation and host integration.
  • Promotes a clean architecture by encouraging a facade-based approach between host and RN code.
  • Includes built-in validation and troubleshooting steps to ensure stable deployments.

Usage examples

“How do I start migrating my existing native Android app to React Native using brownfield?”
The agent will guide you through the path selection process, help you verify your Android library module, and provide the commands to package your React Native code into an AAR.
“I need to generate an XCFramework from my React Native app for my iOS host.”
The agent will walk you through the bare iOS XCFramework generation steps, ensuring your project is correctly configured for the brownfield CLI.

Install

  1. Download the skill as a ZIP:

    https://autogineer.com/agent-skills/callstackincubator/react-native-brownfield-migration/download
  2. Unzip it into the cross-client skills folder of your project:

    mkdir -p .agents/skills && unzip react-native-brownfield-migration.zip -d .agents/skills

Documentation by Callstack

Migrating to React Native

Use this skill only after the decision to adopt brownfield migration has been made. When the user is still choosing between brownfield, greenfield, a checkpoint-based path, defer, or no migration, use assess-react-native-migration first.

Overview

Prescriptive workflow for incremental adoption of React Native in existing native apps using @callstack/react-native-brownfield, from initial setup through phased host integration.

  • Expo track

  • Bare React Native track

Use one track per task unless the user explicitly asks for migration or comparison.

Migration Strategy

Use this strategy for brownfield migration planning and execution:

  1. Assess app state and select Expo or bare path.

  2. Perform initial setup with @callstack/react-native-brownfield.

  3. Package RN artifacts (XCFramework/AAR) from the RN source app.

  4. Integrate one RN surface into the host app and validate startup/runtime.

  5. Repeat integration by feature/screen for incremental rollout.

Agent Guardrails (Global)

Apply these rules across all reference files:

  1. Select one path first (Expo or bare) and do not mix steps.

  2. Use placeholders from the docs (<framework_target_name>, <android_module_name>, <registered_module_name>) and resolve from project files.

  3. Validate each packaging command before moving to host integration.

  4. Run npx brownfield <command> --help before relying on any flag table in these references; help output wins.

  5. Write stable project settings once into brownfield.config.* instead of repeating flags — see cli-and-config.md.

  6. Prefer official docs for long platform snippets and CLI option details.

  7. Keep host apps isolated from direct React Native APIs when possible (facade approach).

  8. For startup/runtime verification, use agent-device to open the host app, navigate to the RN surface, capture snapshots/screenshots, and collect device evidence. If it is missing and verification needs it, install it through the environment's approved/trusted path or ask the user to install or enable it.

Canonical Docs

Path Selection Gate (Must Run First)

Before selecting any reference file, classify the project:

  1. If no React Native app exists yet, use Expo creation path:

  2. If React Native app exists, inspect package.json and app.json:

    • Expo if expo is present or Expo plugin workflow is requested.

    • Bare RN if native folders and direct RN CLI workflow are used without Expo path requirements.

  3. If still unclear, ask one disambiguation question.

  4. Continue with exactly one path.

When to Apply

Reference this package when:

  • Implementing an accepted incremental migration from native-only apps to React Native or Expo

  • Creating brownfield integration flows for Expo or bare React Native projects

  • Performing initial setup with @callstack/react-native-brownfield

  • Generating iOS XCFramework artifacts from a React Native app

  • Generating and publishing Android AAR artifacts from a React Native app

  • Integrating generated artifacts into host iOS/Android apps

Quick Reference

FileDescription
quick-start.mdShared preflight and mandatory path-selection gate
cli-and-config.mdCLI commands, full flag sets, config file, artifact layout, codegen side effects
runtime-api.mdHost <-> RN API surface (JS, Swift, Kotlin) and reference apps
expo-create-app.mdScaffold a new Expo app before Expo brownfield setup
expo-quick-start.mdExpo plugin setup and packaging readiness
expo-ios-integration.mdExpo iOS packaging and host startup integration
expo-android-integration.mdExpo Android packaging, publish, and host integration
bare-quick-start.mdBare React Native baseline setup
bare-ios-xcframework-generation.mdBare iOS XCFramework generation
bare-android-aar-generation.mdBare Android AAR generation and publish
bare-ios-native-integration.mdBare iOS host integration
bare-android-native-integration.mdBare Android host integration

Problem -> Skill Mapping

ProblemStart With
Need migration path decision firstassess-react-native-migration
Need Expo vs bare path decisionquick-start.md
Need a CLI flag, the config file shape, or the artifact pathscli-and-config.md
Need a host <-> RN API name, signature, or a working example appruntime-api.md
Need shared state between host and RN, or typed RN -> native navigationbrownie / brownfield-navigation skills
Need to create a new Expo app for brownfieldexpo-create-app.md
Need Expo brownfield setup and plugin wiringexpo-quick-start.md
Need Expo iOS brownfield integrationexpo-ios-integration.md
Need Expo Android brownfield integrationexpo-android-integration.md
Need bare RN baseline setupbare-quick-start.md
Need bare RN iOS XCFramework generationbare-ios-xcframework-generation.md
Need bare RN Android AAR generation/publishbare-android-aar-generation.md
Need bare RN iOS host integrationbare-ios-native-integration.md
Need bare RN Android host integrationbare-android-native-integration.md
  • Assess React Native migration before selecting the migration path.

  • brownie (shared host <-> RN state) and brownfield-navigation (typed RN -> native navigation) ship from another repo: invoke them by name, and fall back to the canonical docs if they are not installed.

Files

references/cli-and-config.md


title: Brownfield CLI and Configuration impact: CRITICAL tags: react-native, brownfield, cli, configuration, packaging

Skill: Brownfield CLI and Configuration

The command and configuration contract for the brownfield CLI. Read this before composing any packaging or publish command, and before adding flags to a package.json script.

Discover options before trusting this file

Flags move between versions. Run npx brownfield <command> --help for the command you are about to use and reconcile it with the tables below. Where they disagree, the help output wins — update this file rather than working around it.

Commands

CommandPurpose
package:iosBuild the iOS XCFramework artifacts
package:androidBuild the Android AAR
publish:androidPublish the AAR to Maven local
codegenGenerate native Brownie store bindings
navigation:codegenGenerate Brownfield Navigation native bindings

--verbose is a global option available on every command.

The binary ships inside @callstack/brownfield-cli, which is a dependency of @callstack/react-native-brownfield — installing the brownfield package is enough to get npx brownfield.

package:ios
FlagNotes
--scheme <name>Framework target to build. Required whenever the packaged framework cannot be resolved unambiguously
--configuration <name>Case sensitive. Defaults to Debug when neither the flag nor the config sets it
--target <name>Xcode target
--destination <strings...>Slices to build: simulator, device, or any xcodebuild -destination value. Omitted, both are built
--use-prebuilt-rn-core [bool]Use React Native Apple prebuilt binaries for the packaging build. Omitted, the default is version-aware; the flag without a value means true
--use-prebuilt-expo [bool]Use prebuilt Expo support XCFrameworks instead of compiling Expo modules. Omitted, the default is version-aware; the flag without a value means true
--add-spm-packageGenerate a local Swift package manifest next to the packaged XCFrameworks
--build-folder <path>Intermediate build directory. Defaults to .brownfield/build
--extra-params <string>Extra xcodebuild parameters
--export-extra-params <string>Extra export parameters
--export-options-plist <path>Defaults to ExportOptions.plist
--no-install-podsSkip the CocoaPods install step
--no-new-archBuild without the New Architecture
--verboseVerbose logging

Both boolean-valued flags accept true/1/false/0; anything else fails with Invalid value for <flag>: expected true or false.

--archive and --local are inherited from the underlying build tooling, so they are accepted but unsupported. Do not plan a migration step around them — archive the host app in Xcode against the packaged frameworks instead.

package:android / publish:android
FlagCommandsNotes
--module-name <name>bothThe AAR module. Spelling follows the project: a Gradle path such as :BrownfieldLib for a bare app whose module is declared in settings.gradle, or a plain name such as brownfieldlib for the Expo plugin default
--variant <name>package:androidBuild variant from build type plus product flavor, e.g. release or devRelease
--use-local-mavenbothResolve the Brownfield Gradle plugin from the local Maven repository. Not documented upstream — confirmed in the CLI source
--verbosebothVerbose logging
codegen and navigation:codegen
CommandFlags
codegen-p, --platform <swift|kotlin>. Omitted, both are generated
navigation:codegen[specPath] positional (defaults to brownfield.navigation.ts), --dry-run

You rarely run these by hand — see Side effects.

Configuration file

Put stable per-project settings in a config file and keep only per-run flags on the command line. A project driven this way runs a bare npx brownfield package:ios.

Exactly one source is allowed. Two or more raises Project has multiple Brownfield configuration files:

  1. brownfield.config.js (project root)

  2. brownfield.config.json (project root)

  3. the brownfield key in package.json

Shape
{
  "$schema": "https://oss.callstack.com/react-native-brownfield/schema.json",
  "verbose": true,
  "ios": {
    "scheme": "BrownfieldLib",
    "configuration": "Release",
    "expo": {}
  },
  "android": {
    "moduleName": "brownfieldlib",
    "variant": "release",
    "expo": { "useLocalMaven": true }
  },
  "brownie": {
    "kotlin": "./android/brownfieldlib/src/main/java/<package_path>/Generated/",
    "kotlinPackageName": "<kotlin_package_name>"
  }
}
  • ios accepts the package:ios options; android accepts the package:android and publish:android options. Use the camelCase form of each flag (--use-prebuilt-expo -> usePrebuiltExpo, --add-spm-package -> addSpmPackage, --module-name -> moduleName).

  • ios.expo and android.expo are Expo config plugin options for the prebuild scaffolding (framework name, bundle identifier, deployment target, Android package name, SDK versions, Maven coordinates, Proguard rules, missing dimension strategies). They are a different layer from the packaging flags above — consult the Expo integration docs for the current key list.

  • brownie configures Brownie codegen output. A top-level brownie key in package.json is the legacy location and warns; prefer the nested key shown here.

  • The config is validated against the published JSON schema. Validation problems are warnings, not errors — a typo'd key is silently ignored, so read the warnings.

Precedence

CLI options override config values for the same key, and the CLI logs a warning naming each overridden key and both values. Treat those warnings as a signal that a command line and a config file disagree about the project, and fix one of them.

Working shapes to copy

Each of the three sources has a working example in the react-native-brownfield repo's apps — see Reference apps.

Outputs

iOS artifacts land in <ios_source_dir>/.brownfield/package/build, and the intermediate build directory is <ios_source_dir>/.brownfield/build. For a bare app that is ios/.brownfield/...; for an Expo app the same paths apply under the prebuilt ios/ directory.

What appears there:

  • <framework_target_name>.xcframework

  • ReactBrownfield.xcframework (binary stripped — it is interface-only, to avoid duplicate symbols)

  • hermesvm.xcframework (named hermes.xcframework on older React Native; hosts that expect one name may need the other renamed)

  • Brownie.xcframework, when the project uses Brownie

  • BrownfieldNavigation.xcframework, when the project uses Brownfield Navigation

  • React Native and Expo support XCFrameworks emitted alongside, when prebuilts are in use

With --add-spm-package, the XCFrameworks are moved into a spm-artifacts/ subdirectory and Package.swift is written next to them. See expo-ios-integration.md for wiring the package into the host project — the CLI does not do that part.

Android artifacts are published to Maven local by publish:android under the group, artifact and version configured in the library module's publishing block.

Side effects: codegen runs automatically

package:ios, package:android and publish:android each run Brownie codegen and Brownfield Navigation codegen first, when the project uses those packages. Consequences:

  • A change to a Brownie store definition or a navigation spec is picked up by the next package run. You do not need a separate codegen step before packaging.

  • Generated native sources are refreshed under node_modules and, for Kotlin, at the configured brownie.kotlin output path. Do not hand-edit generated files; change the spec and re-package.

  • A codegen failure fails the package command before any build work happens — read the first error, not the last.

For the store and navigation contracts themselves, use the dedicated brownie and brownfield-navigation skills if they are installed. They are distributed separately from this skill, so invoke them by name rather than by path.

Canonical Docs

Common Pitfalls

  • Repeating the same flags on every command instead of writing them once to brownfield.config.*

  • Two config sources present at once (the CLI refuses to run)

  • Assuming a flag exists because it appears in an older reference, instead of running --help

  • Planning around --archive / --local on package:ios

  • Treating the config schema warning as harmless when a key was simply misspelled

  • Looking for artifacts under .brownfield/package instead of .brownfield/package/build

Requirements and compatibility

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Needs: Needs Node.js

Security

No issues found by our static scan· No issues found

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Attribution and licence

Published by
Callstack
Publisher
Callstack (Official)
Source
callstackincubator/agent-skills · skills/react-native-brownfield-migration · commit 59e9d17
Licence
MIT License (redistribution allowed)
  • LICENSE (added by AutoGineer from LICENSE)
  • ATTRIBUTION.md (written by AutoGineer)
Synced

AutoGineer is not affiliated with or endorsed by Callstack or Callstack.

Download ZIP

The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download react-native-brownfield-migration.zip