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-migration

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).
  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.

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

来自 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