Animaciones en React Native: guía completa con Reanimated

Animaciones en React Native

Las animaciones son la diferencia entre una app "funcional" y una app "deliciosa". React Native tiene dos sistemas de animación: el Animated API nativo y React Native Reanimated 3. En Deepyze usamos exclusivamente Reanimated 3 para cualquier animación que importa.

¿Por qué Reanimated?

Las animaciones con el Animated API nativo corren en el JS thread. Si el JS thread está ocupado (cargando datos, procesando lógica), las animaciones se traban. Reanimated 3 corre las animaciones en el UI thread nativo, garantizando 60fps (o 120fps en dispositivos que lo soportan) independientemente de lo que haga el JS thread.

Animación básica con Reanimated 3

import Animated, { useSharedValue, useAnimatedStyle, withTiming } from 'react-native-reanimated';

function BotonAnimado() {
  const escala = useSharedValue(1);

  const estiloAnimado = useAnimatedStyle(() => ({
    transform: [{ scale: escala.value }],
  }));

  return (
    <Animated.View style={estiloAnimado}>
      <Pressable
        onPressIn={() => { escala.value = withTiming(0.95, { duration: 100 }); }}
        onPressOut={() => { escala.value = withTiming(1, { duration: 200 }); }}
      >
        <Text>Presioname</Text>
      </Pressable>
    </Animated.View>
  );
}

Gestos con react-native-gesture-handler

Reanimated se integra perfectamente con Gesture Handler para crear interacciones drag, swipe y pinch. La combinación de ambos es el estándar de la industria.

Layout Animations

Reanimated 3 incluye animaciones de layout que animan automáticamente cuando los componentes aparecen, desaparecen o cambian de tamaño:

import { FadeIn, FadeOut, Layout } from 'react-native-reanimated';

<Animated.View entering={FadeIn} exiting={FadeOut} layout={Layout}>
  {/* contenido */}
</Animated.View>

¿Necesitás animaciones de calidad en tu app? Contactá a Deepyze.