react-native-reanimated 4

Reanimated 4 es el motor de animación predeterminado en Expo SDK 57. Los valores compartidos, useAnimatedStyle, y los helpers de timing/spring se ejecutan en el hilo de UI para que los gestos y el scroll no se bloqueen cuando JavaScript está ocupado.

Receta

Card de referencia rápida - lista para copiar y pegar.

npx expo install react-native-reanimated react-native-gesture-handler

// babel.config.js - plugin DEBE ser el último
module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: ["react-native-reanimated/plugin"],
  };
};

import { StyleSheet, Text } from "react-native";
import Animated, {
  useAnimatedStyle,
  useSharedValue,
  withSpring,
  withTiming,
} from "react-native-reanimated";
 
export function ReanimatedCard() {
  const scale = useSharedValue(1);
  const opacity = useSharedValue(0);
 
  const animatedStyle = useAnimatedStyle(() => ({
    opacity: opacity.value,
    transform: [{ scale: scale.value }],
  }));
 
  const reveal = () => {
    opacity.value = withTiming(1, { duration: 250 });
    scale.value = withSpring(1, { damping: 14 });
  };
 
  return (
    <Animated.View style={[styles.card, animatedStyle]}>
      <Text onPress={reveal}>Toca para revelar</Text>
    </Animated.View>
  );
}
 
const styles = StyleSheet.create({
  card: { padding: 20, borderRadius: 12, backgroundColor: "#f0fdf4" },
});

Cuándo usarlo:

• Pans, pinches y hojas arrastrables controladas por dedo
• Animaciones que deben mantenerse suave durante scroll de lista o trabajo JS pesado
• Movimiento que afecta el layout (width, borderRadius, backgroundColor)
• Emparejado con Gesture Handler para UI interactiva a 60fps

Ejemplo Funcional

Una tarjeta arrastrabledque se ajusta de nuevo al soltar - valor compartido en el hilo de UI, spring al final.

npx expo install react-native-reanimated react-native-gesture-handler

// components/draggable-card.tsx
import { StyleSheet, Text } from "react-native";
import { Gesture, GestureDetector } from "react-native-gesture-handler";
import Animated, {
  useAnimatedStyle,
  useSharedValue,
  withSpring,
} from "react-native-reanimated";
 
const SNAP_BACK = { damping: 18, stiffness: 220 };
 
export function DraggableCard({ title }: { title: string }) {
  const translateX = useSharedValue(0);
  const translateY = useSharedValue(0);
 
  const pan = Gesture.Pan()
    .onUpdate((e) => {
      translateX.value = e.translationX;
      translateY.value = e.translationY;
    })
    .onEnd(() => {
      translateX.value = withSpring(0, SNAP_BACK);
      translateY.value = withSpring(0, SNAP_BACK);
    });
 
  const style = useAnimatedStyle(() => ({
    transform: [
      { translateX: translateX.value },
      { translateY: translateY.value },
    ],
  }));
 
  return (
    <GestureDetector gesture={pan}>
      <Animated.View style={[styles.card, style]}>
        <Text>{title}</Text>
      </Animated.View>
    </GestureDetector>
  );
}
 
const styles = StyleSheet.create({
  card: {
    padding: 20,
    borderRadius: 16,
    backgroundColor: "#fff",
    shadowColor: "#000",
    shadowOpacity: 0.08,
    shadowRadius: 8,
    elevation: 3,
  },
});

// app/_layout.tsx (fragmento)
import { GestureHandlerRootView } from "react-native-gesture-handler";
 
export default function RootLayout() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      {/* Stack / providers */}
    </GestureHandlerRootView>
  );
}

// Helper de timing - barra de progreso controlada por valor compartido
import Animated, {
  Easing,
  useAnimatedStyle,
  useSharedValue,
  withTiming,
} from "react-native-reanimated";
 
export function useProgressBar(progress: number) {
  const width = useSharedValue(0);
 
  width.value = withTiming(progress, {
    duration: 400,
    easing: Easing.out(Easing.cubic),
  });
 
  return useAnimatedStyle(() => ({
    width: `${width.value * 100}%`,
  }));
}

Profundización

Valores compartidos

useSharedValue(initial) asigna un slot mutable legible y escribible desde worklets. Asigna con .value:

const offset = useSharedValue(0);
offset.value = 42;           // inmediato
offset.value = withTiming(1); // transición animada

• Los valores compartidos no son estado de React - los componentes no se re-renderizan cuando cambian.
• Léelos dentro de useAnimatedStyle, useDerivedValue, o callbacks de gestos marcados como worklets.
• Prefiere un pequeño número de valores compartidos por componente - deriva todo lo demás con useDerivedValue.

useAnimatedStyle

Devuelve un objeto de estilo cuyos getters se re-ejecutan en el hilo de UI cada frame:

const style = useAnimatedStyle(() => ({
  opacity: interpolate(progress.value, [0, 1], [0.4, 1]),
  transform: [{ translateX: offset.value }],
}));

• No llames funciones que no sean worklet dentro del callback a menos que sean importadas de Reanimated o marcadas como 'worklet'.
• Devuelve solo claves compatibles con estilos - las animaciones de layout usan props entering / exiting separados (ver Layout Animations).

withTiming y withSpring

opacity.value = withTiming(1, { duration: 200 });
translateY.value = withSpring(0, { damping: 15, stiffness: 120 });

• Encadena con withDelay, withRepeat, y withSequence para movimiento por fases.
• Cancela animación en vuelo asignando un nuevo helper de animación al mismo valor compartido.

runOnJS - cruzando de vuelta a React

Los worklets no pueden llamar JS arbitrario (navegación, setState, analítica). Usa runOnJS:

import { runOnJS } from "react-native-reanimated";
 
const pan = Gesture.Pan().onEnd((e) => {
  if (e.translationX < -120) {
    runOnJS(onDismiss)();
  }
});

• Envuelve solo el callback mínimo - mantén la matemática del gesto en el hilo de UI.
• runOnJS programa en el hilo JS en el siguiente tick - no lo uses por frame en onUpdate.

Reanimated 4 en SDK 57

• Se envía con el camino de New Architecture en mente - los worklets se compilan a través del plugin de Babel y se ejecutan a través de JSI.
• La versión ~4.x es la entrada de matriz de SDK 57 - instala con npx expo install, no con conjeturas npm.
• Modo de bundle (opcional) reduce la presión de memoria de Hermes para apps con muchos worklets - ver Worklets & Bundle Mode.

Errores comunes

• Plugin de Babel no es el último - Los worklets fallan en la transformación; las animaciones se atascan en el hilo JS. Solución: Mueve react-native-reanimated/plugin al final de plugins y ejecuta npx expo start --clear.

• Importar Animated desde react-native - Mezclar Animated clásico con estilos worklet causa errores de tipo y tiempo de ejecución. Solución: import Animated from 'react-native-reanimated' para componentes worklet.

• Leer valores compartidos en renderizado de React - translateX.value en el cuerpo JSX no se suscribe a actualizaciones. Solución: Solo lee dentro de useAnimatedStyle o useDerivedValue; usa useAnimatedProps para props nativos.

• Llamar a setState dentro de useAnimatedStyle - Provoca errores "Tried to synchronously call a function on a non-worklet thread". Solución: runOnJS(setState) solo desde manejadores de final de gesto.

• Olvidar GestureHandlerRootView - Los gestos nunca se disparan; los pans parecen congelados. Solución: Envuelve el layout raíz (ver react-native-gesture-handler).

• Animar ancho como cadenas de porcentaje incorrectamente - Algunas versiones de RN coaccionan de manera extraña. Solución: Anima ancho numérico desde onLayout o usa flex + scaleX para barras simples.

• Trabajo pesado en onUpdate - El análisis JSON o el registro cada frame de pan deja caer frames. Solución: Mantén onUpdate para matemática de valor compartido; difiere el trabajo a onEnd a través de runOnJS.

Alternativas

FAQs

npx expo install react-native-reanimated react-native-gesture-handler

backgroundColor: interpolateColor(progress.value, [0, 1], ["#ef4444", "#22c55e"])

Relacionado

• Animations Basics - tour de decisión Animated vs Reanimated
• react-native-gesture-handler - Gesture.Pan y gestos compuestos
• Layout Animations - FadeIn, Layout, reorden de lista
• Worklets & Bundle Mode - modo de bundle y memoria de Hermes
• Shared Element Transitions - movimiento de héroe con Expo Router
• Animations Best Practices - profiling y lista de verificación de envío

Versiones de Stack: Esta página se escribió para React 19.2.3, React Native 0.86.0, y Expo SDK 57 (expo ~57.0.4).