| name | React Native Skills |
| description | CONSTRUIR aplicaciones móviles React Native y Expo de alto rendimiento. Patrones obligatorios: FlashList para listas (nunca FlatList), expo-image para imágenes (nunca RN Image), Pressable para toque (nunca TouchableOpacity), StyleSheet.create (nunca estilos en línea), navegador de pila nativo (nunca JS). Expo SDK 56, React Native 0.85, Nueva Arquitectura obligatoria (Bridge eliminado en RN 0.82). Activadores: construir componentes RN, optimizar rendimiento de listas, implementar animaciones, trabajar con módulos nativos.
|
| license | MIT |
| metadata | {"author":"vercel","version":"2.0.0","last_updated":"2026-06-28T00:00:00.000Z"} |
| stacks | ["Expo SDK 56","React Native 0.85","React 19.2","React Navigation v7","React Native Reanimated v4","TypeScript 6.0"] |
| related_skills | ["empty-loading-error-states","component-architecture-patterns","performance-budgets-and-cwv","accessibility-audit-protocol","react-best-practices"] |
| category | react |
| version | 2.0.0 |
| lang | es |
| direction | ltr |
| source_version | 2.0.0 |
| translated_at | 2026-06-29T00:00:00.000Z |
React Native Skills: Mejores Prácticas
IDENTIFICAR: Cuándo activarse
Activar cuando:
- Se construyen aplicaciones React Native o Expo
- Se optimiza el rendimiento de listas y desplazamiento
- Se implementan animaciones con Reanimated
- Se trabaja con imágenes y medios
- Se configuran módulos nativos o fuentes
- Se estructuran proyectos monorepo con dependencias nativas
CONTEXTO 2026: Nueva Arquitectura Obligatoria
React Native 0.82+ eliminó la arquitectura Bridge heredada. Todo el desarrollo DEBE usar la Nueva Arquitectura (Fabric + TurboModules + JSI):
IMPACTO:
- Llamadas nativas ~60x más rápidas (JSI reemplaza la serialización JSON del bridge)
- React Compiler auto-memorización (sin useMemo/useCallback manual)
- Expo SDK 56 apunta a RN 0.85
- Android 16 exige renderizado de borde a borde (SafeAreaView obsoleto)
MAPA DE PRIORIDAD: Categorías de Reglas por Impacto
| Prioridad | Categoría | Impacto | Cuándo verificar |
|---|
| 1 | Rendimiento de Listas | CRÍTICO | Cualquier lista desplazable |
| 2 | Animación | ALTO | Cualquier elemento animado |
| 3 | Navegación | ALTO | Transiciones de pantalla |
| 4 | Patrones de UI | ALTO | Cada componente |
| 5 | Gestión de Estado | MEDIO | Obtención de datos, formularios |
| 6 | Renderizado | MEDIO | Visualización condicional |
| 7 | Monorepo | MEDIO | Configuración multi-paquete |
| 8 | Configuración | BAJO | Fuentes, importaciones |
EJECUTAR: Reglas Obligatorias por Prioridad
Prioridad 1: Rendimiento de Listas: SIEMPRE FlashList
import { FlashList } from '@shopify/flash-list';
<FlashList
=
=
= // ,
= => item.id}
/>
{ } ;
