{"id":12335,"date":"2025-05-14T07:45:56","date_gmt":"2025-05-14T07:45:56","guid":{"rendered":"https:\/\/www.bacancytechnology.com\/qanda\/?p=12335"},"modified":"2025-05-15T12:27:47","modified_gmt":"2025-05-15T12:27:47","slug":"detect-swipe-left-in-react-native","status":"publish","type":"post","link":"https:\/\/www.bacancytechnology.com\/qanda\/react-native\/detect-swipe-left-in-react-native","title":{"rendered":"Detect Swipe Left in React Native"},"content":{"rendered":"

\u200bDetecting a left swipe gesture in React Native can be achieved through various methods, each tailored to different use cases and preferences.<\/p>\n

1. Using a Custom Hook with Touch Events:<\/h3>\n

A straightforward method involves creating a custom hook that tracks touch positions to determine swipe direction. Here’s how you can implement it:<\/p>\n

\r\nimport { Dimensions } from 'react-native';\r\nconst windowWidth = Dimensions.get('window').width;\r\nexport function useSwipe(onSwipeLeft ?:()=>void, onSwipeRight?:()=>void, rangeOffset = 4) {\r\n   let firstTouch = 0;\r\n   \/\/ Set user touch start position\r\n   function onTouchStart(e) {\r\n       firstTouch = e.nativeEvent.pageX;\r\n   }\r\n   \/\/ When touch ends, check for swipe directions\r\n   function onTouchEnd(e) {\r\n       const positionX = e.nativeEvent.pageX;\r\n       const range = windowWidth \/ rangeOffset;\r\n\r\n\r\n       if (positionX - firstTouch > range) {\r\n           onSwipeRight && onSwipeRight();\r\n       } else if (firstTouch - positionX > range) {\r\n           onSwipeLeft && onSwipeLeft();\r\n       }\r\n   }\r\n   return { onTouchStart, onTouchEnd };\r\n}\r\n<\/pre>\n
In your component, you can utilize this hook as follows:<\/p>\n
\r\nexport default function App() {\r\n const { onTouchStart, onTouchEnd } = useSwipe(\r\n   () => console.log('Swiped left'),\r\n   () => console.log('Swiped right')\r\n );\r\n return (\r\n   \r\n   \r\n       Open up App.tsx to start working on your app!<\/Text>\r\n   <\/View>\r\n   <\/ScrollView>\r\n );\r\n}\r\n<\/pre>\n
This approach offers a clean implementation without relying on external modules.
\na custom hook to detect left and right swipe gestures within a ScrollView that has horizontal={true}. Since a horizontal ScrollView arranges its children in a row direction (flexDirection: ‘row’) and onSwipeLeft and onSwipeRight can detect swipe left\/right you can add your logic as you want<\/p>\n
2. Utilizing the PanResponder API:<\/h3>\n
React Native’s PanResponder API can be employed to recognize swipe gestures. By tracking the gesture’s movement, you can determine the swipe direction. For instance, by monitoring the dx (change in x-axis position), you can detect left or right swipes.<\/p>\n
\r\nimport React, { useRef } from 'react';\r\nimport { View, Text, PanResponder, StyleSheet } from 'react-native';\r\n\r\nexport default function SwipeDetector() {\r\n   const panResponder = useRef(\r\n       PanResponder.create({\r\n           onStartShouldSetPanResponder: () => true,\r\n           onMoveShouldSetPanResponder: () => true,\r\n\r\n\r\n           onPanResponderRelease: (evt, gestureState) => {\r\n               const { dx } = gestureState;\r\n               __DEV__ && console.log('dx', dx);\r\n               if (dx > 50) {\r\n                   console.log('Swiped Right');\r\n               } else if (dx < -50) {\r\n                   console.log('Swiped Left');\r\n               }\r\n           },\r\n       })\r\n   ).current;\r\n   return (\r\n       \r\n           Swipe Left or Right<\/Text>\r\n       <\/View>\r\n   );\r\n}\r\nconst styles = StyleSheet.create({\r\n   container: {\r\n       flex: 1,\r\n       justifyContent: 'center',\r\n       alignItems: 'center',\r\n       backgroundColor: '#f0f0f0',\r\n   },\r\n   text: {\r\n       fontSize: 20,\r\n       fontWeight: 'bold',\r\n   },\r\n});\r\n<\/pre>\n
How It Works:<\/h2>\n
    \n
  1. PanResponder.create() initializes a gesture responder.<\/li>\n
  2. onPanResponderRelease detects swipe movements by checking dx (horizontal displacement).<\/li>\n
  3. A swipe is considered:
    \n-> Right swipe if dx > 50
    \n-> Left swipe if dx < -50<\/li>\n
  4. panHandlers is applied to the root View to capture gestures.<\/li>\n<\/ol>\n
    This is a lightweight, dependency-free approach to detecting swipe gestures in React Native. <\/p>\n
    3. Using the react-native-gesture-handler Library:<\/h3>\n
    For more advanced gesture recognition, the react-native-gesture-handler<\/strong> library provides components like Swipeable and PanGestureHandler. These components offer enhanced performance and flexibility in handling gestures. For example, Swipeable can be used to create swipeable rows with customizable actions.
    \nHere you need to install react-native-gesture-handler<\/strong> lib from npm<\/p>\n
    Here is the code:<\/strong><\/p>\n
    \r\nimport React from 'react';\r\nimport { View, Text, StyleSheet } from 'react-native';\r\nimport { GestureHandlerRootView, HandlerStateChangeEvent, PanGestureHandler, PanGestureHandlerEventPayload, State } from 'react-native-gesture-handler';\r\n\r\nexport default function SwipeGesture() {\r\n   const onGestureEvent = (event: HandlerStateChangeEvent) => {\r\n       const { translationX, state } = event.nativeEvent;\r\n       if (state === State.END) {\r\n           if (translationX < -50) {\r\n               console.log('Swiped Left');\r\n           } else if (translationX > 50) {\r\n               console.log('Swiped Right');\r\n           }\r\n       }\r\n   };\r\n\r\n   return (\r\n       \r\n           \r\n               \r\n                   Swipe Left or Right<\/Text>\r\n               <\/View>\r\n           <\/PanGestureHandler>\r\n       <\/GestureHandlerRootView>\r\n   );\r\n}\r\nconst styles = StyleSheet.create({\r\n   container: {\r\n       flex: 1,\r\n       justifyContent: 'center',\r\n       alignItems: 'center',\r\n       backgroundColor: '#f0f0f0',\r\n   },\r\n   text: {\r\n       fontSize: 20,\r\n       fontWeight: 'bold',\r\n   },\r\n});\r\n<\/pre>\n
    How It Works:<\/h2>\n
      \n
    1. PanGestureHandler detects swipe gestures.<\/li>\n
    2. translationX determines swipe direction:
      \n -> translationX < -50 \u2192 Swiped Left\n-> translationX > 50 \u2192 Swiped Right<\/li>\n
    3. State.END ensures detection happens when the gesture ends.<\/li>\n
    4. This solution is efficient and smooth, making it ideal for gesture-heavy apps.<\/li>\n<\/ol>\n
      4. Implementing the onResponderMove Event:<\/h3>\n
      Another method involves using the onResponderMove event to track touch movements and determine swipe direction. By setting up a responder and monitoring the touch’s movement along the x-axis, you can identify left and right swipes.\u200b<\/p>\n
      Here is the code<\/strong><\/p>\n
      \r\nimport React, { useRef } from 'react';\r\nimport { View, Text, StyleSheet, GestureResponderEvent } from 'react-native';\r\nexport default function SwipeResponder() {\r\n   const startX = useRef(0);\r\n   const onStartShouldSetResponder = () => true;\r\n   const onResponderGrant = (event:GestureResponderEvent) => {\r\n       startX.current = event.nativeEvent.pageX;\r\n   };\r\n\r\n\r\n   const onResponderRelease = (event:GestureResponderEvent) => {\r\n       const endX = event.nativeEvent.pageX;\r\n       const diffX = endX - startX.current;\r\n\r\n\r\n       if (diffX > 50) {\r\n           console.log('Swiped Right');\r\n       } else if (diffX < -50) {\r\n           console.log('Swiped Left');\r\n       }\r\n   };\r\n   return (\r\n       \r\n           Swipe Left or Right 2<\/Text>\r\n       <\/View>\r\n   );\r\n}\r\nconst styles = StyleSheet.create({\r\n   container: {\r\n       flex: 1,\r\n       justifyContent: 'center',\r\n       alignItems: 'center',\r\n       backgroundColor: '#f0f0f0',\r\n   },\r\n   text: {\r\n       fontSize: 20,\r\n       fontWeight: 'bold',\r\n   },\r\n});\r\n<\/pre>\n
      How It Works:<\/h2>\n