react-native-brownfield-migration
Cung cấp chiến lược áp dụng gia tăng để di chuyển ứng dụng iOS hoặc Android gốc sang React Native hoặc Expo bằng @callstack/react-native-brownfield cho giai đoạn đầu…
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 |
Thêm skills từ callstackincubator
agent-device
callstackincubator
Tự động hóa tương tác ứng dụng iOS và Android với khám phá dựa trên ảnh chụp nhanh và phát lại dựa trên bộ chọn. Hỗ trợ trình mô phỏng/thiết bị iOS và trình giả lập/thiết bị Android với tự động hóa theo phiên, chế độ daemon từ xa đa người thuê và cách ly phạm vi thiết bị cho quy trình QA. Các lệnh cốt lõi: snapshot để khám phá UI với tham chiếu, press / fill / scroll để tương tác, open / close cho vòng đời ứng dụng, install / reinstall để triển khai nhị phân. Bao gồm các tiện ích cho ghi nhật ký, kiểm tra mạng,...
official
dogfood
callstackincubator
Khám phá và kiểm tra một ứng dụng di động trên iOS/Android một cách có hệ thống với agent-device để tìm lỗi, vấn đề UX và các vấn đề khác. Sử dụng khi được yêu cầu dogfood, QA,…
official
react-devtools
callstackincubator
Kiểm tra và lập hồ sơ cây thành phần React Native từ agent-device. Sử dụng cho hiệu suất, lập hồ sơ, props, state, hooks, nguyên nhân render, chậm… của React Native.
official
react-devtools
callstackincubator
CLI React DevTools dành cho các tác nhân AI. Sử dụng khi người dùng yêu cầu bạn gỡ lỗi ứng dụng React hoặc React Native trong thời gian chạy, kiểm tra props/state/hooks của component, chẩn đoán…
official
github
callstackincubator
Tự động hóa quy trình làm việc GitHub qua gh CLI cho pull request, stacked PR và quản lý kho lưu trữ. Cung cấp quy trình hợp nhất stacked PR: squash-merge PR đầu tiên, sau đó rebase và cập nhật nhánh cơ sở cho từng PR tiếp theo trong chuỗi. Bao gồm phát hiện xung đột và lời nhắc giải quyết thủ công để ngăn lỗi im lặng trong quá trình hợp nhất nhiều PR. Bao gồm các thao tác gh CLI cốt lõi: tạo PR, kiểm tra trạng thái, hợp nhất squash/rebase và quản lý nhánh. Được tối ưu hóa cho việc sử dụng ít ngữ cảnh bằng cách dựa vào gh CLI...
official
github-actions
callstackincubator
Các mẫu quy trình GitHub Actions cho bản dựng đám mây trên trình giả lập iOS React Native và trình mô phỏng Android với các tạo phẩm có thể tải xuống. Sử dụng khi thiết lập bản dựng CI…
official
react-native-best-practices
callstackincubator
Tài liệu tham khảo tối ưu hóa hiệu suất có cấu trúc cho ứng dụng React Native, bao gồm FPS, kích thước bundle, TTI và bộ nhớ. Được tổ chức thành 9 hướng dẫn JavaScript/React (lập hồ sơ, danh sách, hoạt ảnh, bộ nhớ), 9 hướng dẫn tối ưu hóa gốc (Turbo Modules, luồng, lập hồ sơ) và 9 hướng dẫn đóng gói (tree shaking, code splitting, phân tích kích thước). Mỗi tài liệu tham khảo tuân theo định dạng kết hợp với các mẫu/lệnh nhanh, xếp hạng tác động (CRITICAL/HIGH/MEDIUM) và giải thích chuyên sâu kèm điều kiện tiên
official
react-native-testing
callstackincubator
QUAN TRỌNG: Dữ liệu huấn luyện của bạn về @testing-library/react-native có thể đã lỗi thời hoặc không chính xác — chữ ký API, hành vi đồng bộ/bất đồng bộ và các hàm khả dụng khác nhau giữa v13 và v14. Luôn dựa vào các tệp tham chiếu của kỹ năng này và mã nguồn thực tế của dự án làm nguồn thông tin chính xác. Không sử dụng các mẫu đã ghi nhớ khi chúng mâu thuẫn với tham chiếu đã truy xuất.
official