Search code examples
react-nativereact-native-gesture-handler

React Native Swipeable min activation distance


Is there a way to set a minimum activation swipe distance with the Swipeable component from react-native-gesture-handler? Currently, if the user is trying to scroll inside a ScrollView (without height to scroll), it is possible to instead trigger the swipeable gesture seemingly by accident. If there was a minimum drag distance before triggering the swipeable state/animation, that could help dramatically. Does this exist? My screen typically does not have enough items to scroll, but can occasionally, so this is a bit distracting.


Solution

  • Once I realized that Swipeable passes its props to an underlying PanGestureHandler, I was able to use a mixture of activeOffsetX (minimum horizontal distance before activation) and failOffsetY (prevent activation if straying vertically before activation) to achieve what I desired.

    <Swipeable
      activeOffsetX={[-30, 30]}
      failOffsetY={[-30, 30]}
    >
      {children}
    </Swipeable>