React Native Gesture Handler

2.31.1 · active · verified Sun Apr 19

React Native Gesture Handler is a declarative API that exposes the native platform's touch and gesture system to React Native applications. It provides a robust and performant way to handle complex gestures like pan, pinch, rotate, and tap directly on the native UI thread, leading to smoother animations and a more responsive user experience compared to JavaScript-based gesture systems. The current stable version is 2.31.1, with an active release cadence that frequently publishes patch and minor updates, and a significant version 3.0 in public beta. Key differentiators include its deep integration with the native UI, enabling seamless interoperability with `react-native-reanimated` for advanced animations, and its move towards a hook-based API in version 3 designed for React Native's New Architecture. It aims to reduce the load on the JavaScript thread by offloading gesture recognition to the native side.

Common errors

Warnings

Install

Imports

Quickstart

Demonstrates a basic tap gesture using the `GestureDetector` and `Gesture` API (v3 style), incrementing a counter on tap. It includes the necessary `GestureHandlerRootView` wrapping the entire application.

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { GestureDetector, Gesture } from 'react-native-gesture-handler';
import { GestureHandlerRootView } from 'react-native-gesture-handler';

function AppContent() {
  const [count, setCount] = React.useState(0);

  // Define a simple tap gesture
  const tapGesture = Gesture.Tap()
    .onEnd(() => {
      // This runs on the UI thread for performance
      setCount(prev => prev + 1);
    })
    .numberOfTaps(1); // Respond to single taps

  return (
    <View style={styles.container}>
      <GestureDetector gesture={tapGesture}>
        <View style={styles.box}>
          <Text style={styles.text}>Tap Me!</Text>
          <Text style={styles.text}>Taps: {count}</Text>
        </View>
      </GestureDetector>
    </View>
  );
}

// It is crucial to wrap your entire application with GestureHandlerRootView
export default function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <AppContent />
    </GestureHandlerRootView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  box: {
    width: 150,
    height: 150,
    backgroundColor: '#61dafb',
    borderRadius: 20,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20
  },
  text: {
    fontSize: 20,
    color: 'white',
    fontWeight: 'bold',
    textAlign: 'center'
  }
});

view raw JSON →