vercel-react-native-skills

Habilidades de React Native

Prácticas recomendadas exhaustivas para aplicaciones React Native y Expo. Contiene reglas en múltiples categorías que cubren rendimiento, animaciones, patrones de UI y optimizaciones específicas de plataforma.

Cuándo aplicar

Consulte estas directrices cuando:

• Cree aplicaciones React Native o Expo
• Optimice el rendimiento de listas y scroll
• Implemente animaciones con Reanimated
• Trabaje con imágenes y medios
• Configure módulos nativos o fuentes
• Estructure proyectos monorepo con dependencias nativas

Categorías de reglas por prioridad

Prioridad	Categoría	Impacto	Prefijo
1	Rendimiento de listas	CRÍTICO	list-performance-
2	Animación	ALTO	animation-
3	Navegación	ALTO	navigation-
4	Patrones de UI	ALTO	ui-
5	Gestión de estado	MEDIO	react-state-
6	Renderizado	MEDIO	rendering-
7	Monorepo	MEDIO	monorepo-
8	Configuración	BAJO	fonts-, imports-

Referencia rápida

1. Rendimiento de listas (CRÍTICO)

• list-performance-virtualize - Use FlashList para listas grandes
• list-performance-item-memo - Memorice los componentes de elementos de lista
• list-performance-callbacks - Estabilice las referencias de callbacks
• list-performance-inline-objects - Evite objetos de estilo en línea
• list-performance-function-references - Extraiga funciones fuera del render
• list-performance-images - Optimice imágenes en listas
• list-performance-item-expensive - Mueva trabajo costoso fuera de los elementos
• list-performance-item-types - Use tipos de elementos para listas heterogéneas

2. Animación (ALTO)

• animation-gpu-properties - Anime solo transform y opacity
• animation-derived-value - Use useDerivedValue para animaciones computadas
• animation-gesture-detector-press - Use Gesture.Tap en lugar de Pressable

3. Navegación (ALTO)

• navigation-native-navigators - Use stack nativo y tabs nativos sobre navegadores JS

4. Patrones de UI (ALTO)

• ui-expo-image - Use expo-image para todas las imágenes
• ui-image-gallery - Use Galeria para lightboxes de imágenes
• ui-pressable - Use Pressable en lugar de TouchableOpacity
• ui-safe-area-scroll - Maneje áreas seguras en ScrollViews
• ui-scrollview-content-inset - Use contentInset para encabezados
• ui-menus - Use menús contextuales nativos
• ui-native-modals - Use modales nativos cuando sea posible
• ui-measure-views - Use onLayout, no measure()
• ui-styling - Use StyleSheet.create o Nativewind

5. Gestión de estado (MEDIO)

• react-state-minimize - Minimice las suscripciones de estado
• react-state-dispatcher - Use el patrón de despachador para callbacks
• react-state-fallback - Muestre fallback en el primer render
• react-compiler-destructure-functions - Desestructure para React Compiler
• react-compiler-reanimated-shared-values - Maneje valores compartidos con el compilador

6. Renderizado (MEDIO)

• rendering-text-in-text-component - Envuelva texto en componentes Text
• rendering-no-falsy-and - Evite falsy && para renderizado condicional

7. Monorepo (MEDIO)

• monorepo-native-deps-in-app - Mantenga dependencias nativas en el paquete de la app
• monorepo-single-dependency-versions - Use versiones únicas en todos los paquetes

8. Configuración (BAJO)

• fonts-config-plugin - Use plugins de configuración para fuentes personalizadas
• imports-design-system-folder - Organice las importaciones del sistema de diseño
• js-hoist-intl - Eleve la creación de objetos Intl

Cómo usar

Lea los archivos de reglas individuales para obtener explicaciones detalladas y ejemplos de código:

reglas/list-performance-virtualize.md
reglas/animation-gpu-properties.md

Cada archivo de regla contiene:

• Breve explicación de por qué es importante
• Ejemplo de código incorrecto con explicación
• Ejemplo de código correcto con explicación
• Contexto adicional y referencias

Documento compilado completo

Para la guía completa con todas las reglas desarrolladas: AGENTS.md