Gesture Handler

React Native 36,878 's own responder system (behind Pressable and PanResponder, PanResponder) decides in JavaScript who owns a touch. Gesture Handler 6,788 attaches native recognizers instead: they receive the platform's touch events and recognize and negotiate gestures on the UI thread before any JavaScript runs. Its source is at github.com/software-mansion/react-native-gesture-handler (https://github.com/software-mansion/react-native-gesture-handler 6,788 ) (MIT). Three pieces make up the API that Expo SDK 57 6,418 's version 2.32 provides:

• GestureHandlerRootView, which must wrap the app (and each native modal);

• gesture objects such as Gesture.Pan(), Tap(), Fling(), LongPress(), Pinch() and Rotation();

• GestureDetector, which attaches a gesture to its single child view.

export default function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <SafeAreaProvider>
        <StatusBar style="auto" />
        <Demo />
      </SafeAreaProvider>
    </GestureHandlerRootView>
  );
}

A gesture begins when a finger lands, becomes active once its conditions are met, then ends, fails or is cancelled; the callbacks are onBegin, onStart, onUpdate, onEnd and onFinalize. They are worklets on the UI thread; .runOnJS(true) moves them to JavaScript.

Gesture Handler 3, the current npm 2,036 major, builds gestures with hooks such as usePanGesture() instead; upgrade when your Expo SDK does.