glepur/react-native-swipe-gestures

swipe-gesture breaks scrollview

zawie opened this issue · 3 comments

zawie commented

I have swipe-gesture elements inside of scroll view, and the scrollw view no longer detects scrolling up or down.

appdeveloperhw commented

Same issue did you find any solution?

zawie commented

Well, I manually edited the file. I modified the code; it mainly entails "canceling" the PanHandler responder if there was vertical movement. Pretty hacky, but hey, it worked.

I also wrapped the scroll view and each individual element in the scroll view with the swipe gesture component.

export default class SwipeGesture extends Component {
  componentWillMount() {
    this.PanResponder = PanResponder.create({
      onShouldBlockNativeResponder: () => false,
      onStartShouldSetPanResponder: (evt, gestureState) => true,
      onPanResponderRelease: (evt, gestureState) => {
        let x = gestureState.dx;
        let y = gestureState.dy;
        if (x == 0 && y == 0) {
          this.props.onSwipePerformed('press')
        } else if (Math.abs(gestureState.vx) > 0 && Math.abs(x) > Math.abs(y)) {
          if (x >= 0) {
            this.props.onSwipePerformed('right')
          }
          else {
            this.props.onSwipePerformed('left')
          }
        }
      }
    })
  }
RazaShehryar commented

For anyone looking out for a solution, you can try this library: https://www.npmjs.com/package/rn-swipe-gestures
It's basically a clone of react-native-swipe-gestures. The only difference is you can add props to the config such as detectSwipeUp, detectSwipeDown, etc. This will solve your problem.

  • 👎1