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 탐색을 위한 스냅샷(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