En los propios términos del Skill
Este skill enseña patrones de estilo de React Native, React Navigation 6+ y Reanimated 3 para crear aplicaciones móviles multiplataforma. Cubre StyleSheet y styled-components para el estilo, diseños responsivos para distintos tamaños de pantalla, diseños específicos para iOS y Android, interacciones basadas en gestos con Gesture Handler y técnicas de optimización del rendimiento.
El skill se centra en crear experiencias de usuario con calidad nativa, con animaciones a 60fps que se ejecutan en el hilo de UI, definiciones de tipos de navegación adecuadas y prácticas de prueba en dispositivos reales.
Qué produce
- Componentes de React Native con interfaces de TypeScript, definiciones de StyleSheet y animaciones de Reanimated
- Componentes animados usando Reanimated 3 con useSharedValue y useAnimatedStyle para un rendimiento de 60fps
Cómo funciona
- 01Aplicar estilos con StyleSheet
Define los estilos de los componentes usando StyleSheet.create en lugar de estilos inline para un mejor rendimiento.
- 02Construir Navegación con Rutas Tipadas
Implementa la navegación usando React Navigation 6+ con definiciones de tipo ParamList de TypeScript para todos los navegadores, con el fin de garantizar la seguridad de tipos entre pantallas.
- 03Animar en el UI Thread
Cree animaciones de alto rendimiento con worklets de Reanimated 3 que se ejecutan en el UI thread, usando useSharedValue y useAnimatedStyle para lograr 60fps de rendimiento.
- 04Gestionar Gestos con GestureDetector
Implemente interacciones basadas en gestos usando Gesture Handler, envolviendo los gestos con GestureDetector y usando simultaneousHandlers para resolver conflictos.
- 05Optimizar el Renderizado
Use React.memo y useCallback para evitar rerenderizados innecesarios. Para listas, use siempre FlatList en lugar de ScrollView con map.