react-native-skills

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

// ✅ SIEMPRE usar FlashList
import { FlashList } from '@shopify/flash-list';

<FlashList
  =
  =
  =          // ,   
  = => item.id}
/>


 {  }  ;