Fundamentos de Animaciones

10 ejemplos para comenzar con animaciones en React Native - 7 básicos e intermedios. Aprenderás cuándo la API integrada Animated es suficiente, cuándo Reanimated 4 es la herramienta correcta, y cómo mantener el movimiento a 60fps en el hilo de la UI.

Requisitos previos

Instala Reanimated y Gesture Handler con el resolvedor de versiones de Expo - no fijes versiones manualmente.

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

Confirma la fijación de SDK 57 antes de agregar código de animación:

{
  "dependencies": {
    "expo": "~57.0.4",
    "react": "19.2.3",
    "react-native": "0.86.0",
    "react-native-reanimated": "~4.0.0",
    "react-native-gesture-handler": "~2.28.0"
  }
}

Envuelve tu layout raíz con GestureHandlerRootView (requerido para gestos; inofensivo para apps solo de animación):

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

Herramientas: Estos ejemplos apuntan a Expo SDK 57 (expo ~57.0.4), React Native 0.86.0, React 19.2.3 y Reanimated 4.

Ejemplos Básicos

1. El Plugin de Babel Debe Ser el Último

El plugin de Babel de Reanimated reescribe worklets en tiempo de compilación. Debe ser el plugin final en el array.

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

Si el plugin falta o no está último, los worklets lanzan una excepción en tiempo de ejecución y las animaciones retroceden silenciosamente al hilo de JS.
Después de cambiar babel.config.js, reinicia Metro con caché borrado: npx expo start --clear.
La plantilla default@sdk-57 incluye esta configuración - verifica antes de copiar fragmentos de tutoriales más antiguos.

Relacionado: react-native-reanimated 4 - valores compartidos y animaciones de hilo de UI | Worklets & Bundle Mode - qué hace realmente el plugin

2. API de Animated - Fade de Opacidad

La API integrada Animated está bien para fades únicos que no interactúan con gestos.

import { useEffect, useRef } from "react";
import { Animated, StyleSheet, View } from "react-native";
 
export function FadeInBanner() {
  const opacity = useRef(new Animated.Value(0)).current;
 
  useEffect(() => {
    Animated.timing(opacity, {
      toValue: 1,
      duration: 300,
      useNativeDriver: true,
    }).start();
  }, [opacity]);
 
  return (
    <Animated.View style={[styles.banner, { opacity }]}>
      <View />
    </Animated.View>
  );
}
 
const styles = StyleSheet.create({
  banner: { padding: 16, backgroundColor: "#e8f4ff" },
});

useNativeDriver: true descarga opacidad y transformación al driver nativo - los fotogramas no esperan a re-renderizados de React.
Animated.Value vive en una ref - recrearlo en cada renderizado reinicia la animación.
Bien para toasts, revelaciones de esqueletos y fades simples de mount/unmount sin acoplamiento de gestos.

Relacionado: Layout Animations - presets de entrada/salida cuando los elementos se montan y desmontan en listas

3. Animated.timing - Deslizamiento y Escala

Combina traslación y escala para énfasis ligero - aún en el driver nativo.

import { useEffect, useRef } from "react";
import { Animated, Pressable, Text } from "react-native";
 
export function PopInButton({ onPress }: { onPress: () => void }) {
  const scale = useRef(new Animated.Value(0.9)).current;
  const translateY = useRef(new Animated.Value(12)).current;
 
  useEffect(() => {
    Animated.parallel([
      Animated.spring(scale, {
        toValue: 1,
        friction: 6,
        useNativeDriver: true,
      }),
      Animated.timing(translateY, {
        toValue: 0,
        duration: 250,
        useNativeDriver: true,
      }),
    ]).start();
  }, [scale, translateY]);
 
  return (
    <Pressable onPress={onPress}>
      <Animated.View
        style={{
          transform: [{ scale }, { translateY }],
        }}
      >
        <Text>Continuar</Text>
      </Animated.View>
    </Pressable>
  );
}

Animated.parallel ejecuta ambas pistas a la vez - el orden no implica secuenciación.
transform (traslación, escala, rotación) admite useNativeDriver: true; las propiedades de layout no.
Animated.spring proporciona movimiento orgánico sin ajustar manualmente curvas de suavizado para CTA simples.

Relacionado: react-native-reanimated 4 - withSpring en el hilo de UI para springs vinculados a gestos

4. Animated.loop y Sequence

Encadena y repite animaciones para indicadores de carga e insignias pulsantes.

import { useEffect, useRef } from "react";
import { Animated, StyleSheet, View } from "react-native";
 
export function PulsingDot() {
  const opacity = useRef(new Animated.Value(0.4)).current;
 
  useEffect(() => {
    const pulse = Animated.loop(
      Animated.sequence([
        Animated.timing(opacity, {
          toValue: 1,
          duration: 600,
          useNativeDriver: true,
        }),
        Animated.timing(opacity, {
          toValue: 0.4,
          duration: 600,
          useNativeDriver: true,
        }),
      ])
    );
    pulse.start();
    return () => pulse.stop();
  }, [opacity]);
 
  return <Animated.View style={[styles.dot, { opacity }]} />;
}
 
const styles = StyleSheet.create({
  dot: { width: 10, height: 10, borderRadius: 5, backgroundColor: "#3b82f6" },
});

Siempre detén loops en la limpieza del efecto - los loops que se fugan continúan disparándose después del desmontaje y desperdician batería.
Animated.sequence ejecuta pasos uno tras otro; Animated.stagger desplaza hijos paralelos.
Para esqueletos de carga complejos vinculados al layout de lista, prefiere animaciones de layout de Reanimated en su lugar.

Relacionado: Animations Best Practices - cuándo los indicadores pulsantes afectan el rendimiento del scroll de lista

5. Animated.event - Opacidad Vinculada a Scroll

Vincula la posición de desplazamiento directamente a valores animados sin setState por fotograma.

import { useRef } from "react";
import { Animated, ScrollView, StyleSheet, View } from "react-native";
 
const HEADER_HEIGHT = 56;
 
export function CollapsingHeaderScroll() {
  const scrollY = useRef(new Animated.Value(0)).current;
 
  const headerOpacity = scrollY.interpolate({
    inputRange: [0, HEADER_HEIGHT],
    outputRange: [1, 0],
    extrapolate: "clamp",
  });
 
  return (
    <View style={styles.screen}>
      <Animated.View style={[styles.header, { opacity: headerOpacity }]}>
        <View />
      </Animated.View>
      <Animated.ScrollView
        scrollEventThrottle={16}
        onScroll={Animated.event(
          [{ nativeEvent: { contentOffset: { y: scrollY } } }],
          { useNativeDriver: true }
        )}
      >
        {/* contenido largo */}
      </Animated.ScrollView>
    </View>
  );
}
 
const styles = StyleSheet.create({
  screen: { flex: 1 },
  header: { height: HEADER_HEIGHT, backgroundColor: "#111" },
});

scrollEventThrottle={16} apunta a eventos de scroll de ~60fps - el throttle predeterminado de 400ms se siente lento para parallax.
interpolate asigna rango de scroll a opacidad - sin renderizado de React por fotograma.
Para parallax vinculado a gestos más allá de scroll (pull-to-refresh, hojas inferiores), escala a Reanimated + Gesture Handler.

Relacionado: react-native-gesture-handler - gestos pan que comparten valores con Reanimated

6. Qué useNativeDriver No Puede Animar

Las propiedades que afectan el layout permanecen en el hilo de JS con la API clásica Animated.

Familia de propiedades	`useNativeDriver: true`	Mejor enfoque
`opacity`, `transform`	✅ Admitido	`Animated` o Reanimated
`width`, `height`, `top`, `left`	❌ No admitido	Animaciones de layout de Reanimated o `Layout`
`backgroundColor`	❌ No admitido	Reanimated `useAnimatedStyle` + `interpolateColor`
Cambios de flex	❌ No admitido	Reanimated `Layout` o estructura condicional

// ❌ Esto advierte y se ejecuta en el hilo de JS - jank durante scroll
Animated.timing(width, { toValue: 200, useNativeDriver: true });
 
// ✅ Reanimated 4 - animación consciente del layout en el hilo de UI
import Animated, { useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
 
const progress = useSharedValue(0);
const style = useAnimatedStyle(() => ({
  width: withTiming(progress.value * 200),
}));

La frontera del driver nativo es la razón principal por la que los equipos adoptan Reanimated para movimiento en producción.
Animar layout en el hilo de JS durante scroll de lista es una fuente común de fotogramas perdidos.

Relacionado: Layout Animations - Layout, FadeIn y reorden de lista sin tweens de ancho manual

7. Cuándo Mantener Animated vs Cambiar a Reanimated

Escenario	`Animated` API	Reanimated 4
Fade único en mount	✅	Excesivo
Escala de presión de botón	✅	Cualquiera funciona
Arrastre que sigue el dedo	❌	✅ `Gesture.Pan` + valores compartidos
Fila de deslizar para eliminar	❌	✅
Elemento compartido héroe	❌	✅ `sharedTransitionTag`
Movimiento de inserción/eliminación de lista	❌	✅ entering/exiting + `Layout`
60fps durante scroll rápido	Riesgoso en hilo de JS	✅ worklets de hilo de UI

Regla general: Si la animación sigue a un dedo o se ejecuta mientras un FlatList se desplaza, usa Reanimated 4. Si es una transición corta y olvidable en una pantalla estática, Animated es aceptable.

Relacionado: react-native-reanimated 4 - libro de cocina completo para valores compartidos | Gesture Conflict Resolution - scroll vs filas de deslizamiento

Ejemplos Intermedios

8. Valor Compartido de Reanimated - Fade de Hilo de UI

Los valores compartidos se modifican fuera de la ruta de renderizado de React - la base de Reanimated 4.

import { useEffect } from "react";
import { StyleSheet } from "react-native";
import Animated, {
  useAnimatedStyle,
  useSharedValue,
  withTiming,
} from "react-native-reanimated";
 
export function ReanimatedFadeIn({ children }: { children: React.ReactNode }) {
  const opacity = useSharedValue(0);
 
  useEffect(() => {
    opacity.value = withTiming(1, { duration: 300 });
  }, [opacity]);
 
  const style = useAnimatedStyle(() => ({
    opacity: opacity.value,
  }));
 
  return <Animated.View style={[styles.card, style]}>{children}</Animated.View>;
}
 
const styles = StyleSheet.create({
  card: { padding: 16, borderRadius: 12, backgroundColor: "#fff" },
});

useSharedValue mantiene el estado de la animación en el hilo de UI - actualizar .value no re-renderiza React.
useAnimatedStyle devuelve un objeto de estilo recompuesto cada fotograma dentro de un worklet.
Importa Animated de react-native-reanimated, no de react-native, cuando uses estilos impulsados por worklet.

Relacionado: Worklets & Bundle Mode - cómo se compilan y depuran los worklets

9. withSpring - Movimiento Listo para Gestos

Los springs se sienten receptivos cuando están vinculados a la velocidad de liberación - el predeterminado de Reanimated para UI interactiva.

import { Pressable, Text } from "react-native";
import Animated, {
  useAnimatedStyle,
  useSharedValue,
  withSpring,
} from "react-native-reanimated";
 
export function SpringChip({ label }: { label: string }) {
  const scale = useSharedValue(1);
 
  const style = useAnimatedStyle(() => ({
    transform: [{ scale: scale.value }],
  }));
 
  return (
    <Pressable
      onPressIn={() => {
        scale.value = withSpring(0.94, { damping: 15, stiffness: 400 });
      }}
      onPressOut={() => {
        scale.value = withSpring(1);
      }}
    >
      <Animated.View style={[{ padding: 12, borderRadius: 999, backgroundColor: "#dbeafe" }, style]}>
        <Text>{label}</Text>
      </Animated.View>
    </Pressable>
  );
}

withSpring acepta damping, stiffness y mass - ajusta una vez por sistema de diseño, reutiliza mediante constantes.
Los manejadores de presión actualizan valores compartidos directamente - aún bien para chips simples; usa Gesture Handler para pans en su lugar.
Los springs en el hilo de UI se mantienen suave incluso cuando JS está ocupado analizando una respuesta de API grande.

Relacionado: react-native-gesture-handler - Gesture.Pan().onUpdate impulsando el mismo valor compartido

10. Hilo de JS vs Hilo de UI - Modelo Mental

Entender dónde se ejecutan los fotogramas previene "jank misterioso" en producción.

Hilo de JS (React)                   Hilo de UI (nativo)
──────────────────                   ────────────────────
Renderizado de React → commit        Reconocimiento de gestos
setState cada fotograma ❌           Actualizaciones de valores compartidos ✅
Animated sin driver nativo ❌        useAnimatedStyle ✅
Lógica empresarial, networking     withTiming / withSpring

// ❌ Se ejecuta en hilo de JS - compite con reconciliación de React
const [offset, setOffset] = useState(0);
onPanResponderMove: (_, g) => setOffset(g.dx);
 
// ✅ Se ejecuta en hilo de UI - 60fps incluso durante trabajo JS pesado
const translateX = useSharedValue(0);
Gesture.Pan().onUpdate((e) => {
  translateX.value = e.translationX;
});

60fps significa 16.7ms por fotograma - una renderización JS cara durante un pan deja caer un fotograma visiblemente.
Usa React DevTools y el monitor de hilo de JS; usa el registro de depuración de Reanimated para problemas de worklet.
Perfila en un dispositivo Android de gama media - los simuladores de iPhone Pro ocultan contención de hilo de JS.

Relacionado: Animations Best Practices - lista de verificación de perfilado antes de enviar movimiento | ../performance/best-practices/best-practices.md - matriz de dispositivos para revisión de rendimiento

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).

Requisitos previos

Instala Reanimated y Gesture Handler con el resolvedor de versiones de Expo - no fijes versiones manualmente.

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

Confirma la fijación de SDK 57 antes de agregar código de animación:

{
  "dependencies": {
    "expo": "~57.0.4",
    "react": "19.2.3",
    "react-native": "0.86.0",
    "react-native-reanimated": "~4.0.0",
    "react-native-gesture-handler": "~2.28.0"
  }
}

Envuelve tu layout raíz con GestureHandlerRootView (requerido para gestos; inofensivo para apps solo de animación):

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

Herramientas: Estos ejemplos apuntan a Expo SDK 57 (expo ~57.0.4), React Native 0.86.0, React 19.2.3 y Reanimated 4.

Ejemplos Básicos

1. El Plugin de Babel Debe Ser el Último

El plugin de Babel de Reanimated reescribe worklets en tiempo de compilación. Debe ser el plugin final en el array.

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

Si el plugin falta o no está último, los worklets lanzan una excepción en tiempo de ejecución y las animaciones retroceden silenciosamente al hilo de JS.
Después de cambiar babel.config.js, reinicia Metro con caché borrado: npx expo start --clear.
La plantilla default@sdk-57 incluye esta configuración - verifica antes de copiar fragmentos de tutoriales más antiguos.

Relacionado: react-native-reanimated 4 - valores compartidos y animaciones de hilo de UI | Worklets & Bundle Mode - qué hace realmente el plugin

2. API de Animated - Fade de Opacidad

La API integrada Animated está bien para fades únicos que no interactúan con gestos.

import { useEffect, useRef } from "react";
import { Animated, StyleSheet, View } from "react-native";
 
export function FadeInBanner() {
  const opacity = useRef(new Animated.Value(0)).current;
 
  useEffect(() => {
    Animated.timing(opacity, {
      toValue: 1,
      duration: 300,
      useNativeDriver: true,
    }).start();
  }, [opacity]);
 
  return (
    <Animated.View style={[styles.banner, { opacity }]}>
      <View />
    </Animated.View>
  );
}
 
const styles = StyleSheet.create({
  banner: { padding: 16, backgroundColor: "#e8f4ff" },
});

useNativeDriver: true descarga opacidad y transformación al driver nativo - los fotogramas no esperan a re-renderizados de React.
Animated.Value vive en una ref - recrearlo en cada renderizado reinicia la animación.
Bien para toasts, revelaciones de esqueletos y fades simples de mount/unmount sin acoplamiento de gestos.

Relacionado: Layout Animations - presets de entrada/salida cuando los elementos se montan y desmontan en listas

3. Animated.timing - Deslizamiento y Escala

Combina traslación y escala para énfasis ligero - aún en el driver nativo.

import { useEffect, useRef } from "react";
import { Animated, Pressable, Text } from "react-native";
 
export function PopInButton({ onPress }: { onPress: () => void }) {
  const scale = useRef(new Animated.Value(0.9)).current;
  const translateY = useRef(new Animated.Value(12)).current;
 
  useEffect(() => {
    Animated.parallel([
      Animated.spring(scale, {
        toValue: 1,
        friction: 6,
        useNativeDriver: true,
      }),
      Animated.timing(translateY, {
        toValue: 0,
        duration: 250,
        useNativeDriver: true,
      }),
    ]).start();
  }, [scale, translateY]);
 
  return (
    <Pressable onPress={onPress}>
      <Animated.View
        style={{
          transform: [{ scale }, { translateY }],
        }}
      >
        <Text>Continuar</Text>
      </Animated.View>
    </Pressable>
  );
}

Animated.parallel ejecuta ambas pistas a la vez - el orden no implica secuenciación.
transform (traslación, escala, rotación) admite useNativeDriver: true; las propiedades de layout no.
Animated.spring proporciona movimiento orgánico sin ajustar manualmente curvas de suavizado para CTA simples.

Relacionado: react-native-reanimated 4 - withSpring en el hilo de UI para springs vinculados a gestos

4. Animated.loop y Sequence

Encadena y repite animaciones para indicadores de carga e insignias pulsantes.

import { useEffect, useRef } from "react";
import { Animated, StyleSheet, View } from "react-native";
 
export function PulsingDot() {
  const opacity = useRef(new Animated.Value(0.4)).current;
 
  useEffect(() => {
    const pulse = Animated.loop(
      Animated.sequence([
        Animated.timing(opacity, {
          toValue: 1,
          duration: 600,
          useNativeDriver: true,
        }),
        Animated.timing(opacity, {
          toValue: 0.4,
          duration: 600,
          useNativeDriver: true,
        }),
      ])
    );
    pulse.start();
    return () => pulse.stop();
  }, [opacity]);
 
  return <Animated.View style={[styles.dot, { opacity }]} />;
}
 
const styles = StyleSheet.create({
  dot: { width: 10, height: 10, borderRadius: 5, backgroundColor: "#3b82f6" },
});

Siempre detén loops en la limpieza del efecto - los loops que se fugan continúan disparándose después del desmontaje y desperdician batería.
Animated.sequence ejecuta pasos uno tras otro; Animated.stagger desplaza hijos paralelos.
Para esqueletos de carga complejos vinculados al layout de lista, prefiere animaciones de layout de Reanimated en su lugar.

Relacionado: Animations Best Practices - cuándo los indicadores pulsantes afectan el rendimiento del scroll de lista

5. Animated.event - Opacidad Vinculada a Scroll

Vincula la posición de desplazamiento directamente a valores animados sin setState por fotograma.

import { useRef } from "react";
import { Animated, ScrollView, StyleSheet, View } from "react-native";
 
const HEADER_HEIGHT = 56;
 
export function CollapsingHeaderScroll() {
  const scrollY = useRef(new Animated.Value(0)).current;
 
  const headerOpacity = scrollY.interpolate({
    inputRange: [0, HEADER_HEIGHT],
    outputRange: [1, 0],
    extrapolate: "clamp",
  });
 
  return (
    <View style={styles.screen}>
      <Animated.View style={[styles.header, { opacity: headerOpacity }]}>
        <View />
      </Animated.View>
      <Animated.ScrollView
        scrollEventThrottle={16}
        onScroll={Animated.event(
          [{ nativeEvent: { contentOffset: { y: scrollY } } }],
          { useNativeDriver: true }
        )}
      >
        {/* contenido largo */}
      </Animated.ScrollView>
    </View>
  );
}
 
const styles = StyleSheet.create({
  screen: { flex: 1 },
  header: { height: HEADER_HEIGHT, backgroundColor: "#111" },
});

scrollEventThrottle={16} apunta a eventos de scroll de ~60fps - el throttle predeterminado de 400ms se siente lento para parallax.
interpolate asigna rango de scroll a opacidad - sin renderizado de React por fotograma.
Para parallax vinculado a gestos más allá de scroll (pull-to-refresh, hojas inferiores), escala a Reanimated + Gesture Handler.

Relacionado: react-native-gesture-handler - gestos pan que comparten valores con Reanimated

6. Qué useNativeDriver No Puede Animar

Las propiedades que afectan el layout permanecen en el hilo de JS con la API clásica Animated.

Familia de propiedades	`useNativeDriver: true`	Mejor enfoque
`opacity`, `transform`	✅ Admitido	`Animated` o Reanimated
`width`, `height`, `top`, `left`	❌ No admitido	Animaciones de layout de Reanimated o `Layout`
`backgroundColor`	❌ No admitido	Reanimated `useAnimatedStyle` + `interpolateColor`
Cambios de flex	❌ No admitido	Reanimated `Layout` o estructura condicional

// ❌ Esto advierte y se ejecuta en el hilo de JS - jank durante scroll
Animated.timing(width, { toValue: 200, useNativeDriver: true });
 
// ✅ Reanimated 4 - animación consciente del layout en el hilo de UI
import Animated, { useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
 
const progress = useSharedValue(0);
const style = useAnimatedStyle(() => ({
  width: withTiming(progress.value * 200),
}));

La frontera del driver nativo es la razón principal por la que los equipos adoptan Reanimated para movimiento en producción.
Animar layout en el hilo de JS durante scroll de lista es una fuente común de fotogramas perdidos.

Relacionado: Layout Animations - Layout, FadeIn y reorden de lista sin tweens de ancho manual

7. Cuándo Mantener Animated vs Cambiar a Reanimated

Escenario	`Animated` API	Reanimated 4
Fade único en mount	✅	Excesivo
Escala de presión de botón	✅	Cualquiera funciona
Arrastre que sigue el dedo	❌	✅ `Gesture.Pan` + valores compartidos
Fila de deslizar para eliminar	❌	✅
Elemento compartido héroe	❌	✅ `sharedTransitionTag`
Movimiento de inserción/eliminación de lista	❌	✅ entering/exiting + `Layout`
60fps durante scroll rápido	Riesgoso en hilo de JS	✅ worklets de hilo de UI

Relacionado: react-native-reanimated 4 - libro de cocina completo para valores compartidos | Gesture Conflict Resolution - scroll vs filas de deslizamiento

Ejemplos Intermedios

8. Valor Compartido de Reanimated - Fade de Hilo de UI

Los valores compartidos se modifican fuera de la ruta de renderizado de React - la base de Reanimated 4.

import { useEffect } from "react";
import { StyleSheet } from "react-native";
import Animated, {
  useAnimatedStyle,
  useSharedValue,
  withTiming,
} from "react-native-reanimated";
 
export function ReanimatedFadeIn({ children }: { children: React.ReactNode }) {
  const opacity = useSharedValue(0);
 
  useEffect(() => {
    opacity.value = withTiming(1, { duration: 300 });
  }, [opacity]);
 
  const style = useAnimatedStyle(() => ({
    opacity: opacity.value,
  }));
 
  return <Animated.View style={[styles.card, style]}>{children}</Animated.View>;
}
 
const styles = StyleSheet.create({
  card: { padding: 16, borderRadius: 12, backgroundColor: "#fff" },
});

useSharedValue mantiene el estado de la animación en el hilo de UI - actualizar .value no re-renderiza React.
useAnimatedStyle devuelve un objeto de estilo recompuesto cada fotograma dentro de un worklet.
Importa Animated de react-native-reanimated, no de react-native, cuando uses estilos impulsados por worklet.

Relacionado: Worklets & Bundle Mode - cómo se compilan y depuran los worklets

9. withSpring - Movimiento Listo para Gestos

Los springs se sienten receptivos cuando están vinculados a la velocidad de liberación - el predeterminado de Reanimated para UI interactiva.

import { Pressable, Text } from "react-native";
import Animated, {
  useAnimatedStyle,
  useSharedValue,
  withSpring,
} from "react-native-reanimated";
 
export function SpringChip({ label }: { label: string }) {
  const scale = useSharedValue(1);
 
  const style = useAnimatedStyle(() => ({
    transform: [{ scale: scale.value }],
  }));
 
  return (
    <Pressable
      onPressIn={() => {
        scale.value = withSpring(0.94, { damping: 15, stiffness: 400 });
      }}
      onPressOut={() => {
        scale.value = withSpring(1);
      }}
    >
      <Animated.View style={[{ padding: 12, borderRadius: 999, backgroundColor: "#dbeafe" }, style]}>
        <Text>{label}</Text>
      </Animated.View>
    </Pressable>
  );
}

withSpring acepta damping, stiffness y mass - ajusta una vez por sistema de diseño, reutiliza mediante constantes.
Los manejadores de presión actualizan valores compartidos directamente - aún bien para chips simples; usa Gesture Handler para pans en su lugar.
Los springs en el hilo de UI se mantienen suave incluso cuando JS está ocupado analizando una respuesta de API grande.

Relacionado: react-native-gesture-handler - Gesture.Pan().onUpdate impulsando el mismo valor compartido

10. Hilo de JS vs Hilo de UI - Modelo Mental

Entender dónde se ejecutan los fotogramas previene "jank misterioso" en producción.

Hilo de JS (React)                   Hilo de UI (nativo)
──────────────────                   ────────────────────
Renderizado de React → commit        Reconocimiento de gestos
setState cada fotograma ❌           Actualizaciones de valores compartidos ✅
Animated sin driver nativo ❌        useAnimatedStyle ✅
Lógica empresarial, networking     withTiming / withSpring

// ❌ Se ejecuta en hilo de JS - compite con reconciliación de React
const [offset, setOffset] = useState(0);
onPanResponderMove: (_, g) => setOffset(g.dx);
 
// ✅ Se ejecuta en hilo de UI - 60fps incluso durante trabajo JS pesado
const translateX = useSharedValue(0);
Gesture.Pan().onUpdate((e) => {
  translateX.value = e.translationX;
});

60fps significa 16.7ms por fotograma - una renderización JS cara durante un pan deja caer un fotograma visiblemente.
Usa React DevTools y el monitor de hilo de JS; usa el registro de depuración de Reanimated para problemas de worklet.
Perfila en un dispositivo Android de gama media - los simuladores de iPhone Pro ocultan contención de hilo de JS.

Relacionado: Animations Best Practices - lista de verificación de perfilado antes de enviar movimiento | ../performance/best-practices/best-practices.md - matriz de dispositivos para revisión de rendimiento

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).

Fundamentos de Animaciones

Buscar en la documentación

Fundamentos de Animaciones