Layout Animations

As animações de layout do Reanimated lidam declarativamente com mudanças de entrada, saída e layout. Itens aparecem gradualmente ou deslizam ao serem adicionados, colapsam ao serem removidos e deslizam suavemente quando listas são reordenadas - sem setState a cada frame.

Receita

Cartão de receita de referência rápida - pronto para copiar e colar.

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 da borda final - comum para linhas de caixa de entrada
import { SlideInRight, SlideOutLeft } from "react-native-reanimated";
 
<Animated.View entering={SlideInRight.springify()} exiting={SlideOutLeft.duration(200)} />

Quando usar isso:

• Listas de tarefas, balões de chat e feeds de notificação com inserção/exclusão
• Chips de filtro aparecendo/desaparecendo ao alternar categorias
• Reordenação de grade após arrastar e soltar (com Layout em irmãos)
• Seções de acordeão expandindo/recolhendo com reflow de irmãos

Exemplo de Trabalho

Lista de tarefas filtrável - os itens animam ao serem adicionados, saem ao serem excluídos e reposicionam ao serem filtrados.

// 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 ? "Hide completed" : "Show all"}</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 de grade escalonada - atraso 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>
  );
}

// Painel de acordeão - o layout anima os irmãos quando a altura muda
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>
  );
}

Mergulho Profundo

Animações de Entrada

Importe presets de react-native-reanimated:

Encadeie modificadores:

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

• Entering é executado quando a view é montada com a prop de animação presente.
• Existem construtores personalizados (Entering / Exiting factories) para tokens de design system.

Animações de Saída

• Exiting requer que a view seja desmontada da árvore React - renderização condicional ou remoção de filtro de lista.
• FlatList recicla linhas - animações de saída disparam apenas quando o item sai de data, não ao rolar para fora da tela.
• Mantenha a duração de saída mais curta que a de entrada - 150–220ms parece ágil.

Animações de Layout

layout={Layout} anima posição e limites quando:

• Irmãos reordenam em layout flex
• Altura do item muda (acordeão, quebra de texto multilinha)
• Filtro remove itens e as linhas restantes se reorganizam

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

• Aplique layout no contêiner em movimento, não apenas no texto interno.
• Para FlatList, coloque layout no wrapper da linha retornado por renderItem.

Reordenação de Lista

Quando arrastar e soltar altera a ordem de data:

1. Atualize a ordem do array no estado (ou ordem confirmada pelo servidor).
2. Garanta keyExtractor estável - chaves de índice quebram a animação de layout.
3. Adicione layout={Layout.springify()} na Animated.View da linha.

Para gestos de arrastar combinados com reordenação, combine o pan do RNGH + callback de reordenação runOnJS - veja react-native-gesture-handler.

Notas de Desempenho

• Animações de layout rodam na thread da UI, mas ainda consomem GPU/CPU em listas grandes.
• Limite o delay de escalonamento em listas longas - index * 40 além de ~20 itens adiciona atraso perceptível.
• Considere desabilitar a entrada na adição de paginação (página 2+) se ocorrer jank de montagem.

Armadilhas

• Usando Animated.View do react-native - As props entering/exiting são ignoradas. Correção: Importe Animated de react-native-reanimated.

• Sem saída em mapa ScrollView sem mudança de chave - O reconciliador React reutiliza nós. Correção: Remova o item do array de estado para que o React desmonte a linha.

• Chaves de índice em listas - Linha errada anima na exclusão. Correção: IDs de string estáveis em keyExtractor.

• layout em cada Text aninhado - Anima excessivamente a tipografia interna. Correção: Um wrapper Animated.View por linha.

• Enorme escalonamento de entrada - Lista de 200 itens com atraso de 50ms cada - a UI parece congelada. Correção: Escalone apenas a primeira tela (index < 12).

• Combinando Layout com grades flex wrap - Saltos inesperados quando as quebras de linha mudam. Correção: Larguras de célula fixas ou meça com onLayout antes de animar.

• Modal desmonta corta a saída prematuramente - O pai desaparece antes que a saída termine. Correção: Atrasar o pop de navegação até que a duração de exiting expire (runOnJS + timeout).

Alternativas

FAQs

npx expo install react-native-reanimated

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

Relacionados

• react-native-reanimated 4 - valores compartilhados e withSpring
• Noções Básicas de Animações - por que as props de layout precisam de Reanimated
• react-native-gesture-handler - pans de arrastar para reordenar
• Receitas de FlatList - chaves estáveis e estrutura de linha
• Resolução de Conflitos de Gestos - deslizar para excluir dentro da rolagem
• Melhores Práticas de Animações - quando desabilitar movimento em listas enormes

Versões da Stack: Esta página foi escrita para React 19.2.3, React Native 0.86.0 e Expo SDK 57 (expo ~57.0.4).