Layout Animations: automatische Übergänge ohne manuelles Timing

1. Das Problem mit manuell orchestrierten Übergängen

Ohne Layout Animations muss jeder Übergang, etwa das Entfernen eines Listenelements, manuell choreografiert werden: Erst die Opazität auf null animieren, dann nach Ablauf der Animation das Element tatsächlich aus dem State entfernen, und gleichzeitig dafür sorgen, dass die verbleibenden Elemente sanft nach oben rücken statt abrupt zu springen. Diese Koordination über mehrere useState- und useEffect-Aufrufe ist fehleranfällig und wird mit jeder zusätzlichen Animation komplexer.

Reanimated Layout Animations lösen genau dieses Problem, indem sie Größen- und Positionsänderungen einer Komponente automatisch erkennen und interpolieren, ohne dass der Entwickler Zwischenschritte manuell berechnen muss. Sobald eine Komponente aus dem Baum entfernt, neu eingefügt oder an eine neue Position verschoben wird, übernimmt Reanimated die Animation dieses Übergangs eigenständig.

2. Entering-Animationen: wie neue Elemente erscheinen

Über das entering-Prop einer Animated.View lässt sich festlegen, wie eine Komponente beim ersten Rendern in den sichtbaren Baum eintritt. Vordefinierte Presets wie FadeIn, SlideInRight oder ZoomIn decken die meisten Anwendungsfälle ab und lassen sich über Modifier-Methoden wie .duration() oder .delay() feinjustieren.

Wichtig dabei: Die Entering-Animation greift automatisch bei jedem Mount der Komponente, nicht nur beim ersten Rendern der App. Wird ein Element per bedingtem Rendering neu eingeblendet, etwa nach einem Filterwechsel in einer Liste, spielt Reanimated die Entering-Animation erneut ab, ganz ohne zusätzlichen Code.

import Animated, { FadeIn, SlideInRight } from 'react-native-reanimated';

function NewMessageBubble({ text }: { text: string }) {
  return (
    <Animated.View
      entering={SlideInRight.duration(300).easing(Easing.out(Easing.cubic))}
    >
      <Text>{text}</Text>
    </Animated.View>
  );
}

3. Exiting-Animationen: wie Elemente verschwinden

Das Gegenstück ist das exiting-Prop, das eine Animation definiert, sobald eine Komponente aus dem Baum entfernt wird, etwa FadeOut oder SlideOutLeft. Reanimated hält die Komponente dabei intern noch so lange im nativen View-Baum, bis die Animation abgeschlossen ist, entfernt sie danach aber automatisch, ohne dass der Entwickler ein Timeout oder einen zusätzlichen State pflegen muss.

Das ist der entscheidende Unterschied zu einer manuellen Lösung: Aus React-Sicht ist die Komponente sofort entfernt, sobald sie aus dem Elternbaum verschwindet, während Reanimated auf UI-Thread-Ebene die tatsächliche Entfernung bis zum Ende der Exiting-Animation verzögert.

import Animated, { FadeOut, Layout } from 'react-native-reanimated';

function TodoItem({ item, onRemove }: { item: Todo; onRemove: () => void }) {
  return (
    <Animated.View exiting={FadeOut.duration(250)} layout={Layout.springify()}>
      <TodoRow item={item} onPress={onRemove} />
    </Animated.View>
  );
}

4. Layout-Transitions: automatische Übergänge bei Positionsänderungen

Das layout-Prop, meist mit LinearTransition oder Layout.springify() konfiguriert, sorgt dafür, dass eine Komponente automatisch von ihrer alten zu ihrer neuen Position und Größe animiert, sobald sich das Layout ändert, etwa weil ein Geschwisterelement entfernt wurde oder sich die Größe der Komponente selbst durch neuen Textinhalt ändert.

Reanimated vergleicht dabei intern das Layout vor und nach einer React-Aktualisierung und berechnet automatisch die notwendige Transformation, ohne dass Start- und Zielwerte manuell gemessen werden müssen. Kombiniert mit entering und exiting entsteht so ein vollständiges, konsistentes Übergangssystem für dynamische Listen.

5. Praxisbeispiel: eine Liste mit Hinzufügen- und Entfernen-Animation

Das folgende Beispiel kombiniert alle drei Bausteine in einer einfachen Todo-Liste: Neue Einträge gleiten per entering von rechts ein, entfernte Einträge verblassen per exiting, und alle verbleibenden Einträge rutschen automatisch per layout an ihre neue Position, ganz ohne dass die Liste selbst irgendeine Animationslogik kennt.

Wichtig ist, dass jedes Listenelement einen stabilen key besitzt, meist die ID des jeweiligen Eintrags, weil Reanimated anhand dieses Keys erkennt, ob eine Komponente neu gemountet, unverändert weiterexistiert oder entfernt wurde. Ein instabiler Key, etwa der Array-Index, führt zu falsch zugeordneten Animationen.

function TodoList({ items }: { items: Todo[] }) {
  return (
    <View>
      {items.map((item) => (
        <Animated.View
          key={item.id}
          entering={SlideInRight}
          exiting={FadeOut}
          layout={LinearTransition.springify().damping(18)}
        >
          <TodoRow item={item} />
        </Animated.View>
      ))}
    </View>
  );
}

6. Eigene Transitions statt vordefinierter Presets

Für Fälle, in denen die vordefinierten Presets nicht ausreichen, lassen sich eigene Entering- und Exiting-Animationen als Worklet definieren, das Start- und Endwerte für beliebige Style-Eigenschaften zurückgibt. Das eröffnet die Möglichkeit, mehrere Eigenschaften gleichzeitig zu animieren oder eine Animation an eine spezifische Design-Sprache anzupassen, die von den mitgelieferten Presets nicht abgedeckt wird.

Diese Custom-Animationen laufen ebenso vollständig auf dem UI-Thread wie die vordefinierten Presets, weil auch sie letztlich als Worklets kompiliert werden, was bedeutet, dass sich Performance-Eigenschaften und Fallstricke aus dem Worklet-Modell direkt übertragen.

const CustomEntering = (targetValues: LayoutAnimationsValues) => {
  'worklet';
  const animations = {
    opacity: withTiming(1, { duration: 300 }),
    transform: [{ scale: withSpring(1) }],
  };
  const initialValues = { opacity: 0, transform: [{ scale: 0.8 }] };
  return { initialValues, animations };
};

7. Performance-Grenzen bei komplexen Listen

Bei kurzen bis mittellangen Listen, die vollständig als normale React-Komponenten gerendert werden, funktionieren Layout Animations praktisch ohne Einschränkungen. Bei sehr langen Listen, die über eine virtualisierte FlatList gerendert werden, stoßen entering und exiting jedoch an eine Grenze: Virtualisierte Listen mounten und unmounten Elemente außerhalb des sichtbaren Bereichs ständig, wodurch Reanimated versucht, Animationen für Elemente auszuführen, die der Nutzer nie sieht.

In der Praxis bedeutet das, Layout Animations gezielt nur für sichtbare, kurzfristige Änderungen einzusetzen, etwa das Hinzufügen oder Entfernen eines Eintrags durch eine direkte Nutzeraktion, statt sie pauschal auf jedes Element einer sehr langen, virtualisierten Liste anzuwenden. Bei mehreren hundert gleichzeitig animierten Elementen kann zudem die Anzahl paralleler UI-Thread-Berechnungen selbst auf leistungsstarken Geräten spürbar werden.

8. Layout Animations debuggen und typische Fehlerbilder

Ein häufiges Problem ist, dass eine Layout-Transition gar nicht sichtbar wird, weil die betroffene Komponente nicht direkt eine Animated.View ist, sondern in eine gewöhnliche View verpackt wurde, die selbst kein layout-Prop erhält. Reanimated kann Layout-Änderungen nur für Komponenten animieren, die selbst als Animated-Komponente gerendert werden, nicht für beliebige verschachtelte Kindelemente.

Ein zweites verbreitetes Problem betrifft die neue Architektur: Layout Animations setzen auf Fabric auf und funktionieren auf älteren, noch nicht migrierten App-Teilen mitunter inkonsistent. Ein Test auf beiden Plattformen mit aktivierter neuer Architektur ist deshalb ratsam, bevor Layout Animations produktiv in kritischen Listen eingesetzt werden.

9. Zusammenspiel mit gestengesteuerten Änderungen

Layout Animations lassen sich gut mit gestengesteuerten Interaktionen kombinieren, etwa wenn ein per Swipe-Geste entferntes Listenelement nach Abschluss der Wischbewegung über exiting endgültig ausgeblendet wird, während die verbleibenden Elemente automatisch per layout nachrücken. Die Geste selbst steuert dabei nur die Sichtbarkeit und den State, die eigentliche Übergangsanimation der Liste bleibt vollständig bei Reanimated.

Diese Kombination aus manuell gesteuerten Gesten-Animationen und automatischen Layout Animations ist ein gutes Beispiel dafür, wie sich beide Konzepte ergänzen, statt sich gegenseitig zu ersetzen: Gesten für direkte, physikalisch anmutende Interaktion, Layout Animations für die strukturelle Konsequenz dieser Interaktion.

10. Zusammenfassung

11. FAQ: Layout Animations