Layout Animations

Layout Animations

Layout Animations in Reanimated

Reanimated 11,010 's layout animations do what LayoutAnimation does, but per component and under your control. Give an Animated.View an entering animation for when it mounts, an exiting animation for when it unmounts (Reanimated keeps the view on screen until the animation ends), and a layout transition for when its position or size changes because a sibling came or went. Dozens of presets exist, such as FadeIn, SlideInRight, ZoomOut and BounceIn, each with builder methods: .duration(), .delay(), .springify(), .withCallback().

src/rea/CartList.tsx: rows that enter, leave and close the gap (excerpt)TSX

  const entered = (title: string) => (finished: boolean) => {
    'worklet';
    scheduleOnRN(log, 'entered:', title, finished);
  };
// ...
      {items.map((b, i) => (
        <Animated.View key={b.id} style={ui.card}
          entering={FadeInDown.delay(i * 80).withCallback(entered(b.title))}
          exiting={FadeOutLeft.duration(250)}
          layout={LinearTransition.springify()}>

Opening the screen, removing Patterns of the Deep Web, then tapping the title, which puts it back:

Output of 104

 LOG  +546ms entered: The Quiet Harbor false
 LOG  +566ms entered: Patterns of the Deep Web false
 LOG  +567ms entered: Salt and Saffron false
 LOG  +567ms entered: Small Steps to Big Summits false
 LOG  +0ms remove Patterns of the Deep Web
 LOG  +496ms entered: Patterns of the Deep Web true

The first render's four entering animations reported finished: false, interrupted before the end; the one after the removal finished. Treat these callbacks as "ended", not "played". <LayoutAnimationConfig skipEntering> stops a screen's first render from animating, and stable keys matter: with index keys, the wrong row leaves.

MENU