React Native Reanimated 3: animaciones de alta performance

Reanimated 3: el estándar de animaciones

React Native Reanimated 3 es la librería de animaciones más poderosa para React Native. Corre en el UI thread nativo, garantizando 60fps independientemente de la carga del JS thread. En Deepyze usamos Reanimated 3 para todas las animaciones que importan.

Conceptos core

Shared Values: valores que pueden ser leídos y escritos tanto en el JS thread como en el UI thread. Se crean con useSharedValue().
Animated Styles: estilos calculados a partir de shared values, que corren en el UI thread. Se crean con useAnimatedStyle().
Worklets: funciones que corren en el UI thread. Se marcan con la directiva 'worklet'.

Animación de scroll parallax

function HeaderParallax() {
  const scrollY = useSharedValue(0);

  const scrollHandler = useAnimatedScrollHandler({
    onScroll: (event) => {
      scrollY.value = event.contentOffset.y;
    },
  });

  const headerStyle = useAnimatedStyle(() => ({
    transform: [{ translateY: scrollY.value * 0.5 }],
    opacity: interpolate(scrollY.value, [0, 200], [1, 0]),
  }));

  return (
    <>
      <Animated.View style={[styles.header, headerStyle]}>
        <Image source={heroImage} />
      </Animated.View>
      <Animated.ScrollView onScroll={scrollHandler}>
        {/* contenido */}
      </Animated.ScrollView>
    </>
  );
}

Layout Animations (entrada/salida)

import { FadeInDown, ZoomOut, LinearTransition } from 'react-native-reanimated';

// Aparece con fade desde abajo
<Animated.View entering={FadeInDown.delay(300)}>
  <TarjetaProducto />
</Animated.View>

// Desaparece con zoom out
<Animated.View exiting={ZoomOut}>
  <Notificacion />
</Animated.View>

¿Querés animaciones de primer nivel en tu app? El equipo de Deepyze sabe cómo implementarlas.