react-native-brownfield-migration

Proporciona una estrategia de adopción incremental para migrar aplicaciones nativas de iOS o Android a React Native o Expo utilizando @callstack/react-native-brownfield para la fase inicial…

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

Más skills de callstackincubator

agent-device
callstackincubator
Automatiza interacciones con apps de iOS y Android mediante descubrimiento basado en instantáneas y reproducción impulsada por selectores. Compatible con simuladores/dispositivos iOS y emuladores/dispositivos Android con automatización vinculada a sesiones, modo demonio remoto multiinquilino y aislamiento de alcance de dispositivo para flujos de trabajo de QA. Comandos principales: snapshot para descubrimiento de UI con referencias, press / fill / scroll para interacciones, open / close para ciclo de vida de apps, install / reinstall para despliegue de binarios. Incluye utilidades para registro, inspección de red,...
official
dogfood
callstackincubator
Explorar y probar sistemáticamente una aplicación móvil en iOS/Android con agent-device para encontrar errores, problemas de UX y otros fallos. Usar cuando se pida dogfood, QA,…
official
react-devtools
callstackincubator
Inspeccionar y perfilar árboles de componentes React Native desde agent-device. Usar para rendimiento de React Native, perfilado, props, estado, hooks, causas de renderizado, lentitud…
official
react-devtools
callstackincubator
CLI de React DevTools para agentes de IA. Úsalo cuando el usuario te pida depurar una aplicación React o React Native en tiempo de ejecución, inspeccionar props/estado/hooks de componentes, diagnosticar…
official
github
callstackincubator
Automatización del flujo de trabajo de GitHub mediante la CLI de gh para solicitudes de extracción, PR apiladas y gestión de repositorios. Proporciona un flujo de trabajo de fusión de PR apiladas: fusionar squash de la primera PR, luego reorganizar y actualizar la rama base para cada PR subsiguiente en la cadena. Incluye detección de conflictos y avisos de resolución manual para evitar fallos silenciosos durante fusiones de múltiples PR. Cubre operaciones principales de la CLI de gh: creación de PR, comprobaciones de estado, fusión squash/rebase y gestión de ramas. Optimizado para uso de bajo contexto al depender de la CLI de gh...
official
github-actions
callstackincubator
Patrones de flujo de trabajo de GitHub Actions para compilaciones en la nube del simulador de iOS y el emulador de Android de React Native con artefactos descargables. Úselo al configurar la compilación de CI…
official
react-native-best-practices
callstackincubator
Referencia estructurada de optimización de rendimiento para aplicaciones React Native que cubre FPS, tamaño del bundle, TTI y memoria. Organizada en 9 guías de JavaScript/React (perfilado, listas, animaciones, memoria), 9 guías de optimización nativa (Turbo Modules, threading, perfilado) y 9 guías de empaquetado (tree shaking, división de código, análisis de tamaño). Cada referencia sigue un formato híbrido con patrones/comandos rápidos, clasificaciones de impacto (CRÍTICO/ALTO/MEDIO) y explicaciones detalladas con requisitos previos y aspectos comunes...
official
react-native-testing
callstackincubator
IMPORTANTE: Tus datos de entrenamiento sobre @testing-library/react-native pueden estar desactualizados o ser incorrectos: las firmas de la API, el comportamiento síncrono/asíncrono y las funciones disponibles difieren entre v13 y v14. Siempre confía en los archivos de referencia de esta habilidad y en el código fuente real del proyecto como fuente de verdad. No recurras a patrones memorizados cuando entren en conflicto con la referencia recuperada.
official