Animated API và Reanimated — chọn cái nào?

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

Reanimated (khuyến nghị 2026, bản hiện tại là 4.x):
- 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.
• Reanimated 4 chỉ chạy trên New Architecture, tách phần worklet ra package react-native-worklets, và thêm CSS animations/transitions. App còn Legacy Architecture thì dùng Reanimated 3.

Lưu ý: dùng Reanimated cho animation mới, nhất là animation gắn với gesture (kết hợp react-native-gesture-handler). Animated API vẫn đủ cho hiệu ứng đơn giản như fade/scale, hoặc khi thư viện cũ yêu cầu. Template Expo đã cài sẵn Reanimated.