`LayoutAnimation` — khi nào đủ dùng?

LayoutAnimation là built-in API — khai báo "tôi muốn next layout change được animate", và RN tự interpolate giữa layout cũ và mới.

import { LayoutAnimation, UIManager, Platform } from 'react-native'

if (Platform.OS === 'android') {
  UIManager.setLayoutAnimationEnabledExperimental?.(true)
}

const toggle = () => {
  LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
  setExpanded(!expanded)
}

Use case phù hợp:
- Add/remove item trong list ngắn (FlatList animation chuyển vị trí).
- Expand/collapse accordion.
- Show/hide UI block khi state đổi.

Hạn chế:
- Animation đơn giản — chỉ có 3 preset (easeInEaseOut, linear, spring).
- Khó custom: timing fix, interpolation curve hạn chế.
- Apply cho toàn bộ tree trong tick đó — không scope được vào component cụ thể.
- Conflict với Reanimated layout animation nếu dùng song song.

Khi nào dùng cái khác:
- Cần animation precise → Reanimated entering={FadeIn}, layout={Layout.springify()}.
- Cần gesture-driven → Reanimated worklet.
- Cần per-item animation trong list dài → FlashList với cellAnimation.

Thực tế 2026: dùng LayoutAnimation cho prototype nhanh hoặc UI rất đơn giản. Production lớn dùng Reanimated. RN dev khuyến nghị deprecate LayoutAnimation sau khi Reanimated layout API stable.

LayoutAnimation is a built-in API — declare "animate the next layout change" and RN interpolates between old and new layout.

import { LayoutAnimation, UIManager, Platform } from 'react-native'

if (Platform.OS === 'android') {
  UIManager.setLayoutAnimationEnabledExperimental?.(true)
}

const toggle = () => {
  LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
  setExpanded(!expanded)
}

Good use cases:
- Add/remove items in a short list (FlatList row reflow).
- Expand/collapse accordions.
- Show/hide UI blocks when state changes.

Limitations:
- Simple animations — only 3 presets (easeInEaseOut, linear, spring).
- Hard to customise: fixed timing, limited interpolation curves.
- Applies to the entire tree within that tick — cannot scope to a single component.
- Conflicts with Reanimated layout animation when used together.

When to pick something else:
- Need precise animation → Reanimated entering={FadeIn}, layout={Layout.springify()}.
- Need gesture-driven motion → Reanimated worklet.
- Need per-item animation in long lists → FlashList with cellAnimation.

Reality in 2026: use LayoutAnimation for quick prototypes or trivial UI. Large production codebases use Reanimated. The RN team has signaled deprecating LayoutAnimation once the Reanimated layout API stabilizes.