{"id":11804,"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.","status":"maintenance","version":"1.0.5","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/glepur/react-native-swipe-gestures","tags":["javascript","react-native","swipe","gesture","typescript"],"install":[{"cmd":"npm install react-native-swipe-gestures","lang":"bash","label":"npm"},{"cmd":"yarn add react-native-swipe-gestures","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-native-swipe-gestures","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core dependency for any React Native component. This library is built upon React Native's gesture responder system.","package":"react-native","optional":false}],"imports":[{"note":"GestureRecognizer is a default export, not a named export. It is also common to see `const GestureRecognizer = require('react-native-swipe-gestures').default;` in older CommonJS setups.","wrong":"import { GestureRecognizer } from 'react-native-swipe-gestures';","symbol":"GestureRecognizer","correct":"import GestureRecognizer from 'react-native-swipe-gestures';"},{"note":"swipeDirections is a named export containing constants for swipe directions (SWIPE_UP, SWIPE_DOWN, etc.).","wrong":"import swipeDirections from 'react-native-swipe-gestures';","symbol":"swipeDirections","correct":"import { swipeDirections } from 'react-native-swipe-gestures';"},{"note":"For CommonJS, the default export `GestureRecognizer` must be accessed via `.default`, while `swipeDirections` is a named export.","wrong":"const { GestureRecognizer, swipeDirections } = require('react-native-swipe-gestures');","symbol":"All symbols (CommonJS)","correct":"const GestureRecognizer = require('react-native-swipe-gestures').default;\nconst { swipeDirections } = require('react-native-swipe-gestures');"}],"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."},"warnings":[{"fix":"For new projects or those requiring optimal performance, consider using `react-native-gesture-handler` (especially v2.0+ or v3.0+), which performs gesture recognition on the UI thread for smoother interactions.","message":"The package's latest version (1.0.5) was published over six years ago (March 2020), indicating it may not be actively maintained or updated for newer React Native versions or architectures (e.g., Fabric). Users might encounter compatibility issues with recent React Native releases or performance limitations inherent to gesture handling on the JavaScript thread.","severity":"gotcha","affected_versions":">=1.0.5"},{"fix":"Ensure the `GestureRecognizer` component or its parent has appropriate `flex` properties or explicit `width` and `height` to occupy a visible area where gestures can be performed. For example, `style={{flex: 1}}` or specific pixel dimensions.","message":"Incorrect styling of the `GestureRecognizer` component (e.g., missing `flex: 1` or explicit width/height) can prevent it from properly registering touch events, as it relies on its rendered area to detect gestures. If the component has no dimensions, it cannot receive touches.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Familiarize yourself with the `gestureState` properties, especially `dx`, `dy`, `vx`, `vy` (change in x/y, velocity in x/y) for debugging or custom logic. The `swipeDirections` constants simplify handling common cases.","message":"The `gestureState` object passed to swipe callbacks provides raw information from React Native's `PanResponder`. Developers unfamiliar with its structure might misuse properties or misinterpret gesture data, leading to incorrect swipe logic.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Carefully manage the React Native Gesture Responder System's propagation and capture phases. If conflicts arise, consider restructuring your component hierarchy or moving to a more robust gesture library like `react-native-gesture-handler` which offers better composition capabilities.","message":"This library might conflict with other gesture detection systems in a parent or sibling component (e.g., an outer `ScrollView` or another `PanResponder`). This can lead to gestures being consumed by the wrong handler or not firing at all.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"If using CommonJS, `GestureRecognizer` is the default export: `const GestureRecognizer = require('react-native-swipe-gestures').default;`. Named exports like `swipeDirections` are accessed as `const { swipeDirections } = require('react-native-swipe-gestures');`.","cause":"Attempting to `require` the module and directly destructure `GestureRecognizer` when it's a default export, or attempting to use `.default` on a named export.","error":"TypeError: Cannot read property 'default' of undefined"},{"fix":"Ensure the import statement for `GestureRecognizer` is correct: `import GestureRecognizer from 'react-native-swipe-gestures';`. If using CommonJS, use `const GestureRecognizer = require('react-native-swipe-gestures').default;`.","cause":"This typically occurs when `GestureRecognizer` is imported incorrectly, resulting in `undefined` being passed as a component to React's renderer.","error":"Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined."},{"fix":"Verify that `GestureRecognizer` or its containing `View` has a defined width, height, or `flex` property (e.g., `style={{flex: 1}}`) so it can capture touch interactions.","cause":"The `GestureRecognizer` component might not have sufficient size or `flex` properties to register touch events across its intended area.","error":"Swipe gestures not detected even when component is rendered."}],"ecosystem":"npm"}