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 應用程式互動,支援基於快照的 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