`react-native-gesture-handler` — vì sao thay `PanResponder`?

PanResponder (built-in):
- Mỗi gesture event đi qua bridge → JS xử lý → có lag.
- Không support gesture native (long-press riêng cho iOS, fling Android).
- Conflict với ScrollView/Modal hay xảy ra (event không propagate đúng).

react-native-gesture-handler (RNGH):
- Gesture detect và state machine chạy trên UI thread (native code).
- Cooperate native với scroll, pinch, rotate.
- API hook-based hợp với Reanimated:

import { Gesture, GestureDetector } from 'react-native-gesture-handler'
import Animated, { useSharedValue, useAnimatedStyle } from 'react-native-reanimated'

const x = useSharedValue(0)
const pan = Gesture.Pan()
  .onChange((e) => { x.value += e.changeX })
  .onEnd(() => { x.value = withSpring(0) })

const style = useAnimatedStyle(() => ({
  transform: [{ translateX: x.value }],
}))

<GestureDetector gesture={pan}>
  <Animated.View style={style} />
</GestureDetector>

Lợi ích:
- 60+ FPS gesture, không lag.
- Compose multi-gesture: Gesture.Race(pan, pinch), Gesture.Simultaneous(...).
- Cancel/finalize lifecycle rõ ràng (.onBegin, .onUpdate, .onEnd, .onFinalize).
- Tích hợp react-navigation: swipe-back, drawer mở/đóng.

Setup:
- Cài react-native-gesture-handler.
- iOS: tự setup qua autolinking.
- Android: MainActivity.kt extends ReactActivity, override createReactActivityDelegate để add gesture handler.
- Wrap app trong <GestureHandlerRootView style={{ flex: 1 }}> ở root.