Academy
mediumReact Native#38

LayoutAnimation for list insert

Prompt

Use LayoutAnimation to animate when a new item is added to the beginning of a list. The existing items should smoothly shift down to make room.

Solution

const addItem = () => {
  LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
  setItems(prev => [String.fromCharCode(65 + prev.length), ...prev])
}
return (
  <View>
    <Button title="Add" onPress={addItem} />
    {items.map((item, i) => <Text key={`${item}-${i}`} style={{ padding: 16 }}>{item}</Text>)}
  </View>
)
Mentor's take

LayoutAnimation occupies a spot neither Animated nor Reanimated covers as cheaply: animating layout changes you didn't choreograph. Inserting at the head of this list moves every existing row — animating that with Animated would mean an Animated.Value per row and hand-computed target positions. LayoutAnimation inverts the model: configureNext arms a one-shot animation, and the next layout pass — whatever it turns out to move, however many views — is animated natively, frame-by-frame on the platform side, no per-view wiring and no JS-thread involvement per frame.

The call ordering is the whole API: configureNext before the setItems that triggers the change. It's per-transition, not a mode — each animated change arms it again, which is also its virtue: you opt in exactly where motion is wanted. Presets.easeInEaseOut covers most cases; the config object underneath lets you tune create/update/delete phases separately.

The trade-offs to name: it's global and fire-and-forget — it animates every layout change in that pass, not just your list, so a simultaneous unrelated update animates too; there's no progress value, no interruption, no gesture coupling — for that, Reanimated's layout/entering transitions are the modern, controllable answer. Historically Android required UIManager.setLayoutAnimationEnabledExperimental(true); knowing that flag (and that the New Architecture reworks this area) signals real device time.

Red flag: reaching for per-item Animated.Values to animate a list insert — that's choreographing by hand what the layout engine will diff for free.

Say it: "configureNext arms a native one-shot animation for the next layout pass — perfect for inserts where I can't enumerate what moves — and when I need interruptible or per-item control, that's Reanimated layout transitions."