Animaciones de Layout

Las animaciones de layout de Reanimated manejan declarativamente cambios de entrada, salida y layout. Los elementos se desvanecen o se deslizan cuando se añaden, colapsan cuando se eliminan y se deslizan cuando las listas se reordenan - sin setState en cada fotograma.

Receta

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

npx expo install react-native-reanimated

import Animated, { FadeIn, FadeOut, Layout } from "react-native-reanimated";
 
export function AnimatedListItem({ children }: { children: React.ReactNode }) {
  return (
    <Animated.View
      entering={FadeIn.duration(220)}
      exiting={FadeOut.duration(180)}
      layout={Layout.springify()}
    >
      {children}
    </Animated.View>
  );
}

// Desliza desde el borde de arrastre - común para filas de bandeja de entrada
import { SlideInRight, SlideOutLeft } from "react-native-reanimated";
 
<Animated.View entering={SlideInRight.springify()} exiting={SlideOutLeft.duration(200)} />

Cuándo usarlo:

• Listas de tareas, burbujas de chat y feeds de notificaciones con inserción/eliminación
• Chips de filtro que aparecen/desaparecen al alternar categorías
• Reorden de grid después de arrastrar y soltar (con Layout en hermanos)
• Secciones de acordeón expandiéndose/colapsando con reflow de hermanos

Ejemplo de Trabajo

Lista de tareas filtrable - los elementos se animan al añadir, se desvanecen al eliminar y se reposicionan al filtrar.

// components/task-list.tsx
import { useState } from "react";
import { FlatList, Pressable, StyleSheet, Text, View } from "react-native";
import Animated, {
  FadeInDown,
  FadeOutUp,
  Layout,
  SlideInRight,
  SlideOutLeft,
} from "react-native-reanimated";
 
type Task = { id: string; title: string; done: boolean };
 
const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 
export function TaskList() {
  const [tasks, setTasks] = useState<Task[]>([
    { id: "1", title: "Ship animations", done: false },
    { id: "2", title: "Profile on Android", done: false },
  ]);
  const [showDone, setShowDone] = useState(true);
 
  const visible = tasks.filter((t) => showDone || !t.done);
 
  const toggleDone = (id: string) => {
    setTasks((prev) =>
      prev.map((t) => (t.id === id ? { ...t, done: !t.done } : t))
    );
  };
 
  const remove = (id: string) => {
    setTasks((prev) => prev.filter((t) => t.id !== id));
  };
 
  return (
    <View style={styles.screen}>
      <Pressable onPress={() => setShowDone((v) => !v)} style={styles.filter}>
        <Text>{showDone ? "Ocultar completados" : "Mostrar todos"}</Text>
      </Pressable>
 
      <FlatList
        data={visible}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <AnimatedPressable
            entering={SlideInRight.duration(250)}
            exiting={SlideOutLeft.duration(200)}
            layout={Layout.springify().damping(18)}
            onPress={() => toggleDone(item.id)}
            onLongPress={() => remove(item.id)}
            style={[styles.row, item.done && styles.rowDone]}
          >
            <Text>{item.title}</Text>
          </AnimatedPressable>
        )}
        ItemSeparatorComponent={() => <View style={styles.separator} />}
      />
    </View>
  );
}
 
const styles = StyleSheet.create({
  screen: { flex: 1, padding: 16 },
  filter: { marginBottom: 12 },
  row: { padding: 16, backgroundColor: "#f8fafc", borderRadius: 10 },
  rowDone: { opacity: 0.6 },
  separator: { height: 8 },
});

// Entrada en grid escalonada - retraso por índice
import { FadeInDown } from "react-native-reanimated";
 
function GridCell({ index, children }: { index: number; children: React.ReactNode }) {
  return (
    <Animated.View entering={FadeInDown.delay(index * 40).springify()}>
      {children}
    </Animated.View>
  );
}

// Sección acordeón - layout anima hermanos cuando la altura cambia
import { FadeIn, FadeOut, Layout } from "react-native-reanimated";
 
function AccordionPanel({ open, children }: { open: boolean; children: React.ReactNode }) {
  return (
    <Animated.View layout={Layout.springify()}>
      {open ? (
        <Animated.View entering={FadeIn} exiting={FadeOut}>
          {children}
        </Animated.View>
      ) : null}
    </Animated.View>
  );
}

Análisis Profundo

Animaciones de entrada

Importa ajustes predefinidos desde react-native-reanimated:

Encadena modificadores:

FadeIn.duration(300).delay(50).springify().damping(14)

• Entering se ejecuta cuando la vista se monta con la prop de animación presente.
• Existen constructores personalizados (Entering / Exiting) para tokens del sistema de diseño.

Animaciones de salida

• Exiting requiere que la vista se desmonte del árbol de React - renderizado condicional o eliminación de filtro de lista.
• FlatList recicla filas - las animaciones de salida solo se activan cuando el elemento sale de data, no al desplazarse fuera de pantalla.
• Mantén la duración de salida más corta que la entrada - 150-220ms se siente rápido.

Animaciones de layout

layout={Layout} anima la posición y límites cuando:

• Los hermanos se reordenan en el diseño flex
• La altura del elemento cambia (acordeón, ajuste de texto multilínea)
• El filtro elimina elementos y las filas restantes refluyen

layout={Layout.springify().damping(15).stiffness(120)}
// o
layout={Layout.duration(250)}

• Aplica layout en el contenedor en movimiento, no solo en el texto interior.
• Para FlatList, coloca layout en el contenedor de fila devuelto desde renderItem.

Reorden de lista

Cuando arrastrar y soltar cambia el orden de data:

1. Actualiza el orden del array en el estado (o en el orden confirmado por el servidor).
2. Asegura keyExtractor estable - las claves de índice rompen la animación de layout.
3. Añade layout={Layout.springify()} en la Animated.View de fila.

Para gestos de arrastración emparejados con reorden, combina RNGH pan + callback de reorden runOnJS - ver react-native-gesture-handler.

Notas de rendimiento

• Las animaciones de layout se ejecutan en el hilo de interfaz de usuario pero aún cuestan GPU/CPU en listas grandes.
• Limita el delay de escalonamiento en listas largas - index * 40 más allá de ~20 elementos añade retraso notable.
• Considera desactivar la entrada en anexión de paginación (página 2+) si aparece jank de montar.

Errores Comunes

• Usando react-native Animated.View - Las props de entrada/salida se ignoran. Solución: Importa Animated desde react-native-reanimated.

• Sin salida en ScrollView map sin cambio de clave - El reconciliador de React reutiliza nodos. Solución: Elimina el elemento del array de estado para que React desmonte la fila.

• Claves de índice en listas - Se anima la fila incorrecta al eliminar. Solución: IDs de cadena estables en keyExtractor.

• layout en cada Text anidado - Anima la tipografía interior excesivamente. Solución: Un contenedor Animated.View por fila.

• Escalonamiento de entrada enorme - Lista de 200 elementos cada uno retrasa 50ms - la interfaz de usuario se siente congelada. Solución: Escalonamiento solo de la primera pantalla (index < 12).

• Combinando Layout con grids flex wrap - Saltos inesperados cuando los saltos de línea cambian. Solución: Anchos de celda fijos o medir con onLayout antes de animar.

• Desmonte modal corta la salida - El padre desaparece antes de que se complete la salida. Solución: Retrasa el navegador pop hasta que dure exiting (runOnJS + timeout).

Alternativas

Preguntas Frecuentes

npx expo install react-native-reanimated

export const enterRow = FadeInDown.duration(220).springify().damping(16);
export const exitRow = FadeOutUp.duration(180);

Relacionado

• react-native-reanimated 4 - valores compartidos y withSpring
• Conceptos Básicos de Animaciones - por qué las props de layout necesitan Reanimated
• react-native-gesture-handler - gestos pan de arrastrar para reordenar
• Recetas de FlatList - claves estables y estructura de fila
• Resolución de Conflictos de Gestos - deslizar para eliminar dentro del desplazamiento
• Mejores Prácticas de Animaciones - cuándo desactivar el movimiento en listas enormes

Versiones del stack: Esta página fue escrita para React 19.2.3, React Native 0.86.0 y Expo SDK 57 (expo ~57.0.4).