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 應用程式互動,支援基於快照的 UI 探索與選擇器驅動的回放。適用於 iOS 模擬器/裝置及 Android 模擬器/裝置,提供會話綁定自動化、多租戶遠端守護程式模式,以及裝置層級隔離以支援 QA 工作流程。核心指令包括:用於 UI 探索的 snapshot(附參考標記)、用於互動的 press / fill / scroll、用於應用程式生命週期的 open / close、用於二進位部署的 install / reinstall。包含日誌記錄、網路檢測等工具。
official
dogfood
callstackincubator
系統性地探索並測試 iOS/Android 上的行動應用程式,透過 agent-device 找出錯誤、使用者體驗問題及其他問題。在需要進行 dogfood、QA 等測試時使用。
official
react-devtools
callstackincubator
從 agent-device 檢查並分析 React Native 元件樹。用於 React Native 效能、分析、props、state、hooks、渲染原因、緩慢…
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
GitHub Actions 工作流程模式,用於 React Native iOS 模擬器和 Android 模擬器雲端建置,並提供可下載的建置產物。適用於設定 CI 建置…
official
react-native-best-practices
callstackincubator
針對 React Native 應用程式的結構化效能最佳化參考,涵蓋 FPS、套件大小、TTI 與記憶體。分為 9 份 JavaScript/React 指南(效能分析、列表、動畫、記憶體)、9 份原生最佳化指南(Turbo Modules、執行緒、效能分析)以及 9 份打包指南(樹狀搖晃、程式碼分割、大小分析)。每份參考採用混合格式,包含快速模式/指令、影響評級(CRITICAL/HIGH/MEDIUM),以及附有先備知識與常見問題的深入說明。
official
react-native-testing
callstackincubator
重要提示:您關於 @testing-library/react-native 的訓練資料可能已過時或不正確——v13 與 v14 之間的 API 簽名、同步/非同步行為及可用函式有所不同。請務必以本技能的參考檔案及專案實際原始碼為準。當檢索到的參考資料與記憶中的模式衝突時,請勿依賴記憶中的模式。
official