Mejores prácticas de animaciones
Un resumen condensado de las 25 mejores prácticas más importantes extraídas de cada página de esta sección.
//
Busca en todas las páginas de la documentación
Un resumen condensado de las 25 mejores prácticas más importantes extraídas de cada página de esta sección.
Instala con npx expo install: Las versiones de react-native-reanimated y react-native-gesture-handler deben coincidir con la matriz de SDK 57 - las fijaciones manuales de npm causan fallos en la compilación nativa.
Plugin de Babel al final: react-native-reanimated/plugin siempre es la última entrada en babel.config.js - los otros plugins después rompen las transformaciones de worklet.
Limpia Metro después de cambios de plugin: Ejecuta npx expo start --clear siempre que cambien las versiones de Babel o Reanimated - los cachés obsoletos producen errores "failed to create a worklet".
Envuelve la raíz con GestureHandlerRootView: Requerido en app/_layout.tsx para pans, drawers, y gestos adyacentes al stack - sin advertencia en tiempo de compilación cuando falta.
Importa Animated de Reanimated para worklets: El Animated de react-native-reanimated soporta useAnimatedStyle, entering/exiting, y shared transitions - no el Animated de react-native.
Usa valores compartidos para movimiento interactivo: Las actualizaciones de useSharedValue no provocan un re-renderizado de React - la base de drags de 60fps, springs, y estilos vinculados al scroll.
Nunca hagas setState cada fotograma de animación: onPanResponderMove o gesture onUpdate llamando a setState compite con la reconciliación de React - fotogramas perdidos en cualquier dispositivo de gama media.
Prefiere Reanimated para UI vinculado a gestos: Si el movimiento sigue un dedo o se ejecuta durante el scroll de lista, actualiza desde la API Animated heredada a Reanimated 4.
Mantén Animated para fades simples de un solo disparo: El timing de opacidad corto en montaje estático con useNativeDriver: true es aceptable - no sobre-ingenierices fades de toast.
Conoce el límite del driver nativo: opacity y transform soportan useNativeDriver: true; width, height, y flex necesitan animaciones de layout de Reanimated o useAnimatedStyle.
Empareja RNGH con Reanimated: Reconocimiento de gestos en el hilo nativo más actualizaciones de valores compartidos en el hilo de UI - Pressable solo no puede igualar la frecuencia de pan.
Ajusta pans antes de reescribir árboles de scroll: activeOffsetX y failOffsetY arreglan la mayoría de conflictos de swipe-row vs ScrollView - ver Gesture Conflict Resolution.
Usa simultaneousWithExternalGesture para filas deslizables: Conecta la referencia padre ScrollView / FlatList para que los pans de fila horizontal coexistan con scroll vertical después de la calificación de offset.
Importa scrollables internas de RNGH cuando el anidamiento falla: Cambia primero el inner horizontal FlatList - no ambos ejes a ciegas (Nested Scrollables).
Claves estables para listas animadas: keyExtractor debe devolver ids del servidor - las claves de índice hacen que las animaciones de layout y etiquetas de shared transition salten entre filas incorrectas.
Un wrapper entering/exiting por fila: Aplica FadeIn / SlideInRight y layout={Layout} en un único Animated.View por renderItem - no en cada Text anidado.
Acorta la duración del exiting: Exiting en 150-220ms se siente más ágil que enter/exit simétrico de 400ms - los usuarios perciben la retroalimentación de eliminación más rápido.
Limita los retrasos de stagger en listas largas: FadeInDown.delay(index * 40) más allá de ~12-20 elementos agrega latencia de montaje notable - stagger solo el primer viewport.
Etiqueta única de sharedTransitionTag por entidad: Incluye ids estables en cadenas de etiqueta - las etiquetas duplicadas en filas de lista rompen las transiciones de héroe (Shared Element Transitions).
Coinciden exactamente las etiquetas en las pantallas del stack: La celda de lista y la ruta de detalle de Expo Router deben usar el mismo constructor de etiqueta - empareja con stacks anidados (Stack Navigation).
runOnJS raramente: Llama a navegación, setState, y análisis al final del gesto - no dentro de onUpdate cada fotograma.
Extrae helpers de worklet compartidos: Las funciones Clamp, rubber-band, e interpolate pertenecen a módulos 'worklet' - reduce la duplicación de Hermes y facilita las pruebas (Worklets & Bundle Mode).
Perfila release en Android de gama media: Los simuladores de iPhone Pro y Expo Go en Mac ocultan la contención de hilo JS - Flashlight o RN DevTools en un dispositivo de baja RAM antes del envío.
Respeta el movimiento reducido: Comprueba AccessibilityInfo.isReduceMotionEnabled() y salta o acorta las animaciones de entering/layout - proporciona transiciones de estado instantáneas como fallback.
Ejecuta la lista de verificación de gestos antes del lanzamiento: Recorre swipe-in-scroll, nested rails, sheet-over-feed, hero pop compartido, y fast-list delete en Android - los simuladores pierden carreras de scroll-vs-swipe.
Animated sigue siendo adecuado para raros fades estáticos con useNativeDriver: true.FadeIn, Layout) no requiere RNGH.Versiones de stack: Esta página fue escrita para React 19.2.3, React Native 0.86.0, y Expo SDK 57 (
expo~57.0.4).
Revisado por Chris St. John·Última actualización: 16 jul 2026