What is react-native-gesture-handler?

react-native-gesture-handler replaces React Native's built-in touch system with a native gesture recognition system. Built-in touch events go through the JS bridge on every touch — slow. Gesture handler processes gestures on the native thread for buttery-smooth interactions. Installation: npm install react-native-gesture-handler. Wrap root component: import { GestureHandlerRootView } from "react-native-gesture-handler"; export default function App() { return ( <GestureHandlerRootView style={{ flex: 1 }}> <Navigation /> </GestureHandlerRootView> ); }. RNGH v2 API (modern): import { Gesture, GestureDetector } from "react-native-gesture-handler"; import Animated, { useSharedValue, useAnimatedStyle, withSpring } from "react-native-reanimated"; function DraggableBox() { const offsetX = useSharedValue(0); const offsetY = useSharedValue(0); const pan = Gesture.Pan() .onChange(event => { offsetX.value += event.changeX; offsetY.value += event.changeY; }) .onEnd(() => { offsetX.value = withSpring(0); offsetY.value = withSpring(0); }); const animatedStyle = useAnimatedStyle(() => ({ transform: [{ translateX: offsetX.value }, { translateY: offsetY.value }] })); return ( <GestureDetector gesture={pan}> <Animated.View style={[styles.box, animatedStyle]} /> </GestureDetector> ); }. Other gestures: Tap, LongPress, Pinch (zoom), Rotation, Fling, simultaneous gestures. Used by: React Navigation (swipe back), react-native-bottom-sheet, react-native-draggable-flatlist.