react-native-brownfield-migration — official react-native-brownfield-migration, agent-skills, official, ide skills

Verified
v1.0.0
GitHub

About this Skill

Perfect for Mobile Agents needing incremental React Native adoption in existing native iOS or Android apps Provides an incremental adoption strategy to migrate native iOS or Android apps to React Native or Expo using @callstack/react-native-brownfield for initial setup. Use when planning migration steps, p

callstackincubator callstackincubator
[1.1k]
[63]
Updated: 3/26/2026

Killer-Skills Review

Decision support comes first. Repository text comes second.

Reviewed Landing Page Review Score: 10/11

Killer-Skills keeps this page indexable because it adds recommendation, limitations, and review signals beyond the upstream repository text.

Original recommendation layer Concrete use-case guidance Explicit limitations and caution Quality floor passed for review Locale and body language aligned
Review Score
10/11
Quality Score
69
Canonical Locale
en
Detected Body Locale
en

Perfect for Mobile Agents needing incremental React Native adoption in existing native iOS or Android apps Provides an incremental adoption strategy to migrate native iOS or Android apps to React Native or Expo using @callstack/react-native-brownfield for initial setup. Use when planning migration steps, p

Core Value

Empowers agents to migrate native apps to React Native or Expo using @callstack/react-native-brownfield, enabling phased host integration and packaging of XCFramework/AAR artifacts

Ideal Agent Persona

Perfect for Mobile Agents needing incremental React Native adoption in existing native iOS or Android apps

↓ Capabilities Granted for react-native-brownfield-migration

Migrating existing native iOS apps to React Native
Integrating React Native components into Android apps using @callstack/react-native-brownfield
Packaging XCFramework/AAR artifacts for host app integration

! Prerequisites & Limits

  • Requires @callstack/react-native-brownfield setup
  • Limited to React Native or Expo migration
  • Needs assessment of app state for Expo or bare path selection

Source Boundary

The section below is imported from the upstream repository and should be treated as secondary evidence. Use the Killer-Skills review above as the primary layer for fit, risk, and installation decisions.

After The Review

Decide The Next Action Before You Keep Reading Repository Material

Killer-Skills should not stop at opening repository instructions. It should help you decide whether to install this skill, when to cross-check against trusted collections, and when to move into workflow rollout.

Install Path

Start With Installation And Validation

If this skill is worth continuing with, the next step is to confirm the install command, CLI write path, and environment validation.
Trusted Recheck

Cross-Check Against Trusted Picks

If you are still comparing multiple skills or vendors, go back to the trusted collection before amplifying repository noise.
Workflow

Move To Workflow Collections For Team Rollout

When the goal shifts from a single skill to team handoff, approvals, and repeatable execution, move into workflow collections.
Labs Demo

Browser Sandbox Environment

⚡️ Ready to unleash?

Experience this Agent in a zero-setup browser environment powered by WebContainers. No installation required.

Boot Container Sandbox

FAQ & Installation Steps

These questions and steps mirror the structured data on this page for better search understanding.

? Frequently Asked Questions

What is react-native-brownfield-migration?

Perfect for Mobile Agents needing incremental React Native adoption in existing native iOS or Android apps Provides an incremental adoption strategy to migrate native iOS or Android apps to React Native or Expo using @callstack/react-native-brownfield for initial setup. Use when planning migration steps, p

How do I install react-native-brownfield-migration?

Run the command: npx killer-skills add callstackincubator/agent-skills/react-native-brownfield-migration. It works with Cursor, Windsurf, VS Code, Claude Code, and 19+ other IDEs.

What are the use cases for react-native-brownfield-migration?

Key use cases include: Migrating existing native iOS apps to React Native, Integrating React Native components into Android apps using @callstack/react-native-brownfield, Packaging XCFramework/AAR artifacts for host app integration.

Which IDEs are compatible with react-native-brownfield-migration?

This skill is compatible with Cursor, Windsurf, VS Code, Trae, Claude Code, OpenClaw, Aider, Codex, OpenCode, Goose, Cline, Roo Code, Kiro, Augment Code, Continue, GitHub Copilot, Sourcegraph Cody, and Amazon Q Developer. Use the Killer-Skills CLI for universal one-command installation.

Are there any limitations for react-native-brownfield-migration?

Requires @callstack/react-native-brownfield setup. Limited to React Native or Expo migration. Needs assessment of app state for Expo or bare path selection.

↓ How To Install

  1. 1. Open your terminal

    Open the terminal or command line in your project directory.

  2. 2. Run the install command

    Run: npx killer-skills add callstackincubator/agent-skills/react-native-brownfield-migration. The CLI will automatically detect your IDE or AI agent and configure the skill.

  3. 3. Start using the skill

    The skill is now active. Your AI agent can use react-native-brownfield-migration immediately in the current project.

Upstream Repository Material

The section below is imported from the upstream repository and should be treated as secondary evidence. Use the Killer-Skills review above as the primary layer for fit, risk, and installation decisions.

Upstream Source

react-native-brownfield-migration

Install react-native-brownfield-migration, an AI agent skill for AI agent workflows and automation. Review the use cases, limitations, and setup path before...

SKILL.md
Readonly
Upstream Repository Material
The section below is imported from the upstream repository and should be treated as secondary evidence. Use the Killer-Skills review above as the primary layer for fit, risk, and installation decisions.
Supporting Evidence

Migrating to React Native

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. Prefer official docs for long platform snippets and CLI option details.
  5. Keep host apps isolated from direct React Native APIs when possible (facade approach).

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:

  • Planning 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
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 path decision firstquick-start.md
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

Related Skills

Looking for an alternative to react-native-brownfield-migration or another official skill for your workflow? Explore these related open-source skills.

View All

flags

Logo of facebook
facebook

Use when you need to check feature flag states, compare channels, or debug why a feature behaves differently across release channels.

★ 244.2k
⑂ 0
Developer

extract-errors

Logo of facebook
facebook

extract-errors is a React error handling skill that automates the process of extracting and assigning error codes, ensuring accurate and up-to-date error messages in React applications.

★ 244.2k
⑂ 0
Developer

fix

Logo of facebook
facebook

fix is a code optimization skill that automates formatting and linting using yarn prettier and linc.

★ 244.2k
⑂ 0
Developer

flow

Logo of facebook
facebook

Use when you need to run Flow type checking, or when seeing Flow type errors in React code.

★ 244.2k
⑂ 0
Developer