react-native-brownfield-migration
starsforks
How to install react-native-brownfield-migration?
callstackincubator/agent-skills/react-native-brownfield-migration
$npx -y skills add callstackincubator/agent-skills --skill react-native-brownfield-migrationImplements 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
SKILL.md
| 1 | # Migrating to React Native |
| 2 | |
| 3 | 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](../assess-react-native-migration/SKILL.md) first. |
| 4 | |
| 5 | ## Overview |
| 6 | |
| 7 | Prescriptive workflow for incremental adoption of React Native in existing native apps using `@callstack/react-native-brownfield`, from initial setup through phased host integration. |
| 8 | |
| 9 | - Expo track |
| 10 | - Bare React Native track |
| 11 | |
| 12 | Use one track per task unless the user explicitly asks for migration or comparison. |
| 13 | |
| 14 | ## Migration Strategy |
| 15 | |
| 16 | Use this strategy for brownfield migration planning and execution: |
| 17 | |
| 18 | 1. Assess app state and select Expo or bare path. |
| 19 | 2. Perform initial setup with `@callstack/react-native-brownfield`. |
| 20 | 3. Package RN artifacts (`XCFramework`/`AAR`) from the RN source app. |
| 21 | 4. Integrate one RN surface into the host app and validate startup/runtime. |
| 22 | 5. Repeat integration by feature/screen for incremental rollout. |
| 23 | |
| 24 | ## Agent Guardrails (Global) |
| 25 | |
| 26 | Apply these rules across all reference files: |
| 27 | |
| 28 | 1. Select one path first (Expo or bare) and do not mix steps. |
| 29 | 2. Use placeholders from the docs (`<framework_target_name>`, `<android_module_name>`, `<registered_module_name>`) and resolve from project files. |
| 30 | 3. Validate each packaging command before moving to host integration. |
| 31 | 4. Prefer official docs for long platform snippets and CLI option details. |
| 32 | 5. Keep host apps isolated from direct React Native APIs when possible (facade approach). |
| 33 | 6. 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. |
| 34 | |
| 35 | ## Canonical Docs |
| 36 | |
| 37 | - [Quick Start](https://oss.callstack.com/react-native-brownfield/docs/getting-started/quick-start.md) |
| 38 | - [Expo Integration](https://oss.callstack.com/react-native-brownfield/docs/getting-started/expo.md) |
| 39 | - [iOS Integration](https://oss.callstack.com/react-native-brownfield/docs/getting-started/ios.md) |
| 40 | - [Android Integration](https://oss.callstack.com/react-native-brownfield/docs/getting-started/android.md) |
| 41 | - [Brownfield CLI](https://oss.callstack.com/react-native-brownfield/docs/cli/brownfield.md) |
| 42 | - [Guidelines](https://oss.callstack.com/react-native-brownfield/docs/guides/guidelines.md) |
| 43 | - [Troubleshooting](https://oss.callstack.com/react-native-brownfield/docs/guides/troubleshooting.md) |
| 44 | |
| 45 | ## Path Selection Gate (Must Run First) |
| 46 | |
| 47 | Before selecting any reference file, classify the project: |
| 48 | |
| 49 | 1. If no React Native app exists yet, use Expo creation path: |
| 50 | - [expo-create-app.md][expo-create-app] -> [expo-quick-start.md][expo-quick-start] |
| 51 | 2. If React Native app exists, inspect `package.json` and `app.json`: |
| 52 | - Expo if `expo` is present or Expo plugin workflow is requested. |
| 53 | - Bare RN if native folders and direct RN CLI workflow are used without Expo path requirements. |
| 54 | 3. If still unclear, ask one disambiguation question. |
| 55 | 4. Continue with exactly one path. |
| 56 | |
| 57 | ## When to Apply |
| 58 | |
| 59 | Reference this package when: |
| 60 | |
| 61 | - Implementing an accepted incremental migration from native-only apps to React Native or Expo |
| 62 | - Creating brownfield integration flows for Expo or bare React Native projects |
| 63 | - Performing initial setup with `@callstack/react-native-brownfield` |
| 64 | - Generating iOS XCFramework artifacts from a React Native app |
| 65 | - Generating and publishing Android AAR artifacts from a React Native app |
| 66 | - Integrating generated artifacts into host iOS/Android apps |
| 67 | |
| 68 | ## Quick Reference |
| 69 | |
| 70 | | File | Description | |
| 71 | |------|-------------| |
| 72 | | [quick-start.md][quick-start] | Shared preflight and mandatory path-selection gate | |
| 73 | | [expo-create-app.md][expo-create-app] | Scaffold a new Expo app before Expo brownfield setup | |
| 74 | | [expo-quick-start.md][expo-quick-start] | Expo plugin setup and packaging readiness | |
| 75 | | [expo-ios-integration.md][expo-ios-integration] | Expo iOS packaging and host startup integration | |
| 76 | | [expo-android-integration.md][expo-android-integration] | Expo Android packaging, publish, and host integration | |
| 77 | | [bare-quick-start.md][bare-quick-start] | Bare React Native baseline setup | |
| 78 | | [bare-ios-xcframework-generation.md][bare-ios-xcframework-generation] | Bare iOS XCFramework generation | |
| 79 | | [bare-android-aar-generation.md][bare-android-aar-generation] |
People who liked this also viewed
6 picksType
- find-skillsHelps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express interest in extending capabilities. This skSkillsJul 2026
- grill-meA relentless interview to sharpen a plan or design.SkillsJul 2026
- vercel-react-best-practicesVercel's official collection of agent skillsSkillsJul 2026
- improve-codebase-architectureScan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.SkillsJul 2026
- setup-matt-pocock-skillsConfigure this repo for the engineering skills — set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.SkillsJul 2026
- triageMove issues and external PRs through a state machine of triage roles — categorise, verify, grill if needed, and write agent-ready briefs.SkillsJul 2026
