Animated API vs Reanimated 3 — chọn cái nào 2026?

Animated API (built-in RN core):
- Driver useNativeDriver: true đẩy animation lên native thread, smooth.
- Hạn chế: chỉ animate được layout/style không đụng tới layout (opacity, transform, backgroundColor); animate width/height/top phải useNativeDriver: false → JS thread, dễ jank.
- API verbose: Animated.timing, Animated.Value, interpolate chuỗi dài.

Reanimated 3 (recommend 2026):
- Worklet chạy trên UI thread qua JSI — animation độc lập với JS thread, không bao giờ bị block bởi render React.
- API hook-based gọn:

const offset = useSharedValue(0)
const style = useAnimatedStyle(() => ({
  transform: [{ translateX: withSpring(offset.value) }],
}))

<Animated.View style={style} />
<Pressable onPress={() => offset.value = 200}>...</Pressable>

• Animate được mọi prop (width, height, scroll offset).
• withSpring, withTiming, withSequence, withRepeat compose dễ.
• useDerivedValue, useAnimatedReaction cho logic phức tạp.
• Layout animation built-in: entering, exiting, layout props.

Quy tắc: Reanimated 3 cho mọi animation mới. Animated API chỉ cho legacy hoặc lib bắt buộc (ScrollView event onScroll cũ). Reanimated bundled trong Expo SDK 50+.