{"library":"react-native-swipe-gestures","title":"React Native Swipe Gestures","description":"react-native-swipe-gestures is a React Native component designed to detect and handle 4-directional swipe gestures: up, down, left, and right. It provides a `GestureRecognizer` component that wraps other UI elements, enabling them to respond to these directional swipe events. The library allows for fine-grained control over gesture sensitivity through configurable parameters such as `velocityThreshold`, `directionalOffsetThreshold`, and `gestureIsClickThreshold`. Currently at version 1.0.5, this package offers a straightforward, declarative API for implementing common swipe interactions, abstracting the complexities of React Native's underlying `PanResponder`. It also ships with TypeScript type definitions, providing an improved development experience for TypeScript users. While effective for basic swipe detection, for more complex gesture interactions or higher performance requirements (e.g., gestures running on the UI thread), alternative libraries like `react-native-gesture-handler` (v2.0+) might be considered.","language":"javascript","status":"maintenance","last_verified":"Sun Apr 19","install":{"commands":["npm install react-native-swipe-gestures"],"cli":null},"imports":["import GestureRecognizer from 'react-native-swipe-gestures';","import { swipeDirections } from 'react-native-swipe-gestures';","const GestureRecognizer = require('react-native-swipe-gestures').default;\nconst { swipeDirections } = require('react-native-swipe-gestures');"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { Component, useState } from 'react';\nimport { View, Text, StyleSheet } from 'react-native';\nimport GestureRecognizer, { swipeDirections } from 'react-native-swipe-gestures';\n\nconst App = () => {\n  const [myText, setMyText] = useState('I\\'m ready to get swiped!');\n  const [gestureName, setGestureName] = useState('none');\n  const [backgroundColor, setBackgroundColor] = useState('#fff');\n\n  const onSwipeUp = () => setMyText('You swiped up!');\n  const onSwipeDown = () => setMyText('You swiped down!');\n  const onSwipeLeft = () => setMyText('You swiped left!');\n  const onSwipeRight = () => setMyText('You swiped right!');\n\n  const onSwipe = (direction) => {\n    const { SWIPE_UP, SWIPE_DOWN, SWIPE_LEFT, SWIPE_RIGHT } = swipeDirections;\n    setGestureName(direction);\n    switch (direction) {\n      case SWIPE_UP: setBackgroundColor('red'); break;\n      case SWIPE_DOWN: setBackgroundColor('green'); break;\n      case SWIPE_LEFT: setBackgroundColor('blue'); break;\n      case SWIPE_RIGHT: setBackgroundColor('yellow'); break;\n      default: setBackgroundColor('#fff'); break;\n    }\n  };\n\n  const config = {\n    velocityThreshold: 0.3,\n    directionalOffsetThreshold: 80,\n    gestureIsClickThreshold: 5\n  };\n\n  return (\n    <View style={styles.container}>\n      <GestureRecognizer\n        onSwipe={(direction, state) => onSwipe(direction, state)}\n        onSwipeUp={(state) => onSwipeUp(state)}\n        onSwipeDown={(state) => onSwipeDown(state)}\n        onSwipeLeft={(state) => onSwipeLeft(state)}\n        onSwipeRight={(state) => onSwipeRight(state)}\n        config={config}\n        style={[styles.gestureArea, { backgroundColor: backgroundColor }]}\n      >\n        <Text style={styles.text}>{myText}</Text>\n        <Text style={styles.text}>onSwipe callback received: {gestureName}</Text>\n      </GestureRecognizer>\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n  },\n  gestureArea: {\n    flex: 1,\n    width: '100%',\n    justifyContent: 'center',\n    alignItems: 'center',\n  },\n  text: {\n    fontSize: 20,\n    color: 'black',\n    marginBottom: 10,\n  },\n});\n\nexport default App;\n","lang":"typescript","description":"This example demonstrates how to integrate `GestureRecognizer` into a React Native component using functional components and hooks. It shows how to define callback functions for each swipe direction and a general `onSwipe` handler to update the UI based on the detected gesture and its configuration. The component changes its background color and text based on the swipe direction.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}