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 |
Skills เพิ่มเติมจาก callstackincubator
agent-device
callstackincubator
ทำงานอัตโนมัติสำหรับการโต้ตอบกับแอป iOS และ Android ด้วยการค้นหาแบบสแนปช็อตและการเล่นซ้ำแบบเลือกโดยใช้ตัวเลือก รองรับ iOS simulator/อุปกรณ์และ Android emulator/อุปกรณ์พร้อมระบบอัตโนมัติแบบผูกเซสชัน โหมดเดมอนระยะไกลแบบหลายผู้เช่า และการแยกขอบเขตอุปกรณ์สำหรับเวิร์กโฟลว์ QA คำสั่งหลัก: snapshot สำหรับการค้นหา UI พร้อม refs, press / fill / scroll สำหรับการโต้ตอบ, open / close สำหรับวงจรชีวิตแอป, install / reinstall สำหรับการปรับใช้ไบนารี รวมถึงยูทิลิตี้สำหรับการบันทึก, การตรวจสอบเครือข่าย,...
official
dogfood
callstackincubator
สำรวจและทดสอบแอปมือถือบน iOS/Android อย่างเป็นระบบด้วย agent-device เพื่อค้นหาบั๊ก ปัญหาด้าน UX และปัญหาอื่นๆ ใช้เมื่อถูกขอให้ dogfood, QA,…
official
react-devtools
callstackincubator
ตรวจสอบและโปรไฟล์โครงสร้างต้นไม้ของคอมโพเนนต์ React Native จาก agent-device ใช้สำหรับประสิทธิภาพของ React Native, การทำโปรไฟล์, props, state, hooks, สาเหตุการเรนเดอร์, ความช้า…
official
react-devtools
callstackincubator
CLI ของ React DevTools สำหรับเอเจนต์ AI ใช้เมื่อผู้ใช้ขอให้คุณดีบักแอป React หรือ React Native ขณะรันไทม์ ตรวจสอบ props/state/hooks ของคอมโพเนนต์ วินิจฉัย…
official
github
callstackincubator
ระบบอัตโนมัติของเวิร์กโฟลว์ GitHub ผ่าน gh CLI สำหรับ pull requests, stacked PRs และการจัดการ repository มีเวิร์กโฟลว์การรวม stacked PR: squash-merge PR แรก จากนั้น rebase และอัปเดต base branch สำหรับ PR ถัดไปในแต่ละชุด รวมถึงการตรวจจับข้อขัดแย้งและคำแนะนำในการแก้ไขด้วยตนเองเพื่อป้องกันความล้มเหลวที่เงียบระหว่างการรวมหลาย PR ครอบคลุมการดำเนินการหลักของ gh CLI: การสร้าง PR, การตรวจสอบสถานะ, การรวมแบบ squash/rebase และการจัดการ branch ปรับให้เหมาะสมสำหรับการใช้งานในบริบทต่ำโดยอาศัย gh CLI...
official
github-actions
callstackincubator
รูปแบบเวิร์กโฟลว์ GitHub Actions สำหรับการสร้างระบบคลาวด์ของ iOS simulator และ Android emulator สำหรับ React Native พร้อมอาร์ติแฟกต์ที่ดาวน์โหลดได้ ใช้เมื่อตั้งค่า CI build…
official
react-native-best-practices
callstackincubator
คู่มืออ้างอิงการปรับแต่งประสิทธิภาพแบบมีโครงสร้างสำหรับแอป React Native ครอบคลุม FPS, ขนาดบัณฑิต, TTI และหน่วยความจำ จัดเป็น 9 คู่มือ JavaScript/React (การทำโปรไฟล์, รายการ, แอนิเมชัน, หน่วยความจำ), 9 คู่มือการปรับแต่งแบบเนทีฟ (Turbo Modules, การทำเธรด, การทำโปรไฟล์) และ 9 คู่มือการรวมบัณฑิต (tree shaking, การแยกโค้ด, การวิเคราะห์ขนาด) แต่ละคู่มืออ้างอิงเป็นรูปแบบไฮบริดที่มีรูปแบบ/คำสั่งด่วน, การจัดอันดับผลกระทบ (CRITICAL/HIGH/MEDIUM) และคำอธิบายเชิงลึกพร้อมข้อกำหนดเบื้องต้นและทั่วไป...
official
react-native-testing
callstackincubator
สำคัญ: ข้อมูลการฝึกของคุณเกี่ยวกับ @testing-library/react-native อาจล้าสมัยหรือไม่ถูกต้อง — ลายเซ็น API, พฤติกรรมแบบซิงค์/อะซิงค์ และฟังก์ชันที่มีอยู่แตกต่างกันระหว่าง v13 และ v14 ให้ยึดตามไฟล์อ้างอิงของสกิลนี้และซอร์สโค้ดจริงของโปรเจกต์เป็นแหล่งความจริงเสมอ อย่าถอยกลับไปใช้รูปแบบที่จำได้เมื่อมันขัดแย้งกับข้อมูลอ้างอิงที่ดึงมา
official