{"library":"react-native-gesture-handler","title":"React Native Gesture Handler","description":"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-native-gesture-handler"],"cli":null},"imports":["import { GestureDetector, Gesture } from 'react-native-gesture-handler';","import { TapGestureHandler, State } from 'react-native-gesture-handler';","import { gestureHandlerRootHOC } from 'react-native-gesture-handler';","import { GestureHandlerRootView } from 'react-native-gesture-handler';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport { View, Text, StyleSheet } from 'react-native';\nimport { GestureDetector, Gesture } from 'react-native-gesture-handler';\nimport { GestureHandlerRootView } from 'react-native-gesture-handler';\n\nfunction AppContent() {\n  const [count, setCount] = React.useState(0);\n\n  // Define a simple tap gesture\n  const tapGesture = Gesture.Tap()\n    .onEnd(() => {\n      // This runs on the UI thread for performance\n      setCount(prev => prev + 1);\n    })\n    .numberOfTaps(1); // Respond to single taps\n\n  return (\n    <View style={styles.container}>\n      <GestureDetector gesture={tapGesture}>\n        <View style={styles.box}>\n          <Text style={styles.text}>Tap Me!</Text>\n          <Text style={styles.text}>Taps: {count}</Text>\n        </View>\n      </GestureDetector>\n    </View>\n  );\n}\n\n// It is crucial to wrap your entire application with GestureHandlerRootView\nexport default function App() {\n  return (\n    <GestureHandlerRootView style={{ flex: 1 }}>\n      <AppContent />\n    </GestureHandlerRootView>\n  );\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n    backgroundColor: '#F5FCFF',\n  },\n  box: {\n    width: 150,\n    height: 150,\n    backgroundColor: '#61dafb',\n    borderRadius: 20,\n    justifyContent: 'center',\n    alignItems: 'center',\n    padding: 20\n  },\n  text: {\n    fontSize: 20,\n    color: 'white',\n    fontWeight: 'bold',\n    textAlign: 'center'\n  }\n});\n","lang":"typescript","description":"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}