react-native-brownfield-migration
作成者: callstackincubator
ネイティブ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探索用のスナップショット(参照付き)、操作(press/fill/scroll)、アプリライフサイクル(open/close)、バイナリデプロイ(install/reinstall)。ログ、ネットワークインスペクションなどのユーティリティを含む。
official
dogfood
callstackincubator
iOS/Androidのモバイルアプリをエージェントデバイスで体系的に探索・テストし、バグやUXの問題、その他の課題を発見します。dogfoodやQAを依頼された際に使用します。
official
react-devtools
callstackincubator
エージェントデバイスからReact Nativeコンポーネントツリーを検査・プロファイリングします。React Nativeのパフォーマンス、プロファイリング、props、state、フック、レンダリング原因、低速処理などに使用します。
official
react-devtools
callstackincubator
React DevTools CLI for AIエージェント。ユーザーがReactまたはReact Nativeアプリのランタイムデバッグ、コンポーネントのprops/state/hooksの検査、診断を依頼した場合に使用します…
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