react-native-brownfield-migration
提供一种增量采用策略,用于将原生 iOS 或 Android 应用迁移到 React Native 或 Expo,并使用 @callstack/react-native-brownfield 进行初始…
npx skills add https://github.com/callstackincubator/agent-skills --skill react-native-brownfield-migrationMigrating 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:
- Assess app state and select Expo or bare path.
- Perform initial setup with
@callstack/react-native-brownfield. - Package RN artifacts (
XCFramework/AAR) from the RN source app. - Integrate one RN surface into the host app and validate startup/runtime.
- Repeat integration by feature/screen for incremental rollout.
Agent Guardrails (Global)
Apply these rules across all reference files:
- Select one path first (Expo or bare) and do not mix steps.
- Use placeholders from the docs (
<framework_target_name>,<android_module_name>,<registered_module_name>) and resolve from project files. - Validate each packaging command before moving to host integration.
- Prefer official docs for long platform snippets and CLI option details.
- Keep host apps isolated from direct React Native APIs when possible (facade approach).
- For startup/runtime verification, use
agent-deviceto 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
- Quick Start
- Expo Integration
- iOS Integration
- Android Integration
- Brownfield CLI
- Guidelines
- Troubleshooting
Path Selection Gate (Must Run First)
Before selecting any reference file, classify the project:
- If no React Native app exists yet, use Expo creation path:
- If React Native app exists, inspect
package.jsonandapp.json:- Expo if
expois present or Expo plugin workflow is requested. - Bare RN if native folders and direct RN CLI workflow are used without Expo path requirements.
- Expo if
- If still unclear, ask one disambiguation question.
- 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
| File | Description |
|---|---|
| quick-start.md | Shared preflight and mandatory path-selection gate |
| expo-create-app.md | Scaffold a new Expo app before Expo brownfield setup |
| expo-quick-start.md | Expo plugin setup and packaging readiness |
| expo-ios-integration.md | Expo iOS packaging and host startup integration |
| expo-android-integration.md | Expo Android packaging, publish, and host integration |
| bare-quick-start.md | Bare React Native baseline setup |
| bare-ios-xcframework-generation.md | Bare iOS XCFramework generation |
| bare-android-aar-generation.md | Bare Android AAR generation and publish |
| bare-ios-native-integration.md | Bare iOS host integration |
| bare-android-native-integration.md | Bare Android host integration |
Problem -> Skill Mapping
| Problem | Start With |
|---|---|
| Need path decision first | quick-start.md |
| Need to create a new Expo app for brownfield | expo-create-app.md |
| Need Expo brownfield setup and plugin wiring | expo-quick-start.md |
| Need Expo iOS brownfield integration | expo-ios-integration.md |
| Need Expo Android brownfield integration | expo-android-integration.md |
| Need bare RN baseline setup | bare-quick-start.md |
| Need bare RN iOS XCFramework generation | bare-ios-xcframework-generation.md |
| Need bare RN Android AAR generation/publish | bare-android-aar-generation.md |
| Need bare RN iOS host integration | bare-ios-native-integration.md |
| Need bare RN Android host integration | bare-android-native-integration.md |
来自 callstackincubator 的更多技能
agent-device
callstackincubator
通过基于快照的界面发现和选择器驱动的回放,自动化iOS和Android应用交互。支持iOS模拟器/设备和Android模拟器/设备,具备会话绑定自动化、多租户远程守护进程模式以及面向QA工作流的设备级隔离。核心命令包括:用于UI发现及元素引用的snapshot、用于交互操作的press/fill/scroll、用于应用生命周期管理的open/close、以及用于二进制部署的install/reinstall。附带日志记录、网络检查等实用工具……
official
dogfood
callstackincubator
系统性地在iOS/Android上使用agent-device探索和测试移动应用,以发现漏洞、用户体验问题及其他问题。在需要内部测试、质量保证等场景下使用。
official
react-devtools
callstackincubator
从agent-device检查和剖析React Native组件树。用于React Native性能、分析、属性、状态、钩子、渲染原因、缓慢…
official
react-devtools
callstackincubator
React DevTools CLI,供AI代理使用。当用户要求你在运行时调试React或React Native应用、检查组件属性/状态/钩子、诊断……时使用。
official
github
callstackincubator
通过gh CLI实现GitHub工作流自动化,涵盖拉取请求、堆叠式PR及仓库管理。提供堆叠式PR合并工作流:对首个PR进行压缩合并,随后对链中每个后续PR执行变基并更新基础分支。包含冲突检测与手动解决提示,防止多PR合并期间出现静默失败。覆盖gh CLI核心操作:PR创建、状态检查、压缩/变基合并及分支管理。通过依赖gh CLI优化低上下文使用场景...
official
github-actions
callstackincubator
适用于React Native iOS模拟器和Android模拟器云端构建的GitHub Actions工作流模式,支持可下载的构建产物。用于配置CI构建…
official
react-native-best-practices
callstackincubator
面向React Native应用的结构化性能优化参考,涵盖FPS、包体积、TTI和内存。包含9份JavaScript/React指南(性能分析、列表、动画、内存)、9份原生优化指南(Turbo Modules、线程、性能分析)和9份打包指南(摇树优化、代码拆分、体积分析)。每份参考采用混合格式,包含快速模式/命令、影响评级(关键/高/中)以及深度解析说明(含前置条件和常见...)
official
react-native-testing
callstackincubator
重要提示:您关于 @testing-library/react-native 的训练数据可能已过时或不正确——v13 和 v14 之间的 API 签名、同步/异步行为以及可用函数存在差异。请始终以本技能的参考文件和项目的实际源代码为准。当检索到的参考与记忆中的模式冲突时,不要依赖记忆中的模式。
official