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 앱 상호작용을 스냅샷 기반 탐색과 선택자 기반 재생으로 자동화합니다. iOS 시뮬레이터/기기 및 Android 에뮬레이터/기기를 지원하며, 세션 기반 자동화, 멀티테넌트 원격 데몬 모드, QA 워크플로를 위한 기기 범위 격리를 제공합니다. 핵심 명령어: UI 탐색을 위한 스냅샷(refs 포함), 상호작용을 위한 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, hooks, 렌더링 원인, 느린…에 사용합니다.
official
react-devtools
callstackincubator
React DevTools CLI for AI agents. 사용자가 런타임에 React 또는 React Native 앱을 디버깅하고, 컴포넌트 props/state/hooks를 검사하며, 진단하도록 요청할 때 사용하세요.
official
github
callstackincubator
GitHub 워크플로우 자동화를 gh CLI를 통해 풀 리퀘스트, 스택형 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개의 네이티브 최적화 가이드(터보 모듈, 스레딩, 프로파일링), 9개의 번들링 가이드(트리 쉐이킹, 코드 분할, 크기 분석)로 구성되어 있습니다. 각 참고 자료는 빠른 패턴/명령어, 영향 등급(CRITICAL/HIGH/MEDIUM), 사전 조건과 일반적인 내용을 포함한 심층 설명이 포함된 하이브리드 형식을 따릅니다.
official
react-native-testing
callstackincubator
중요: @testing-library/react-native에 대한 귀하의 학습 데이터는 최신이 아니거나 부정확할 수 있습니다. v13과 v14 간에 API 시그니처, 동기/비동기 동작 및 사용 가능한 함수가 다릅니다. 항상 이 스킬의 참조 파일과 프로젝트의 실제 소스 코드를 진실의 원천으로 삼으십시오. 검색된 참조와 충돌할 경우 암기된 패턴에 의존하지 마십시오.
official