Search code examples
react-nativegesturepan

How to move pan responder to only top and left direction

how to limit the area of movement of the pan respond only up(top) and to the left side?

I am doing so currently but without success!

this.state = 
{
  pan: new Animated.ValueXY()
}    

let eventMoveLeft = Animated.event
(
  [null, { dx: this.state.pan.x}]
);

let eventMoveTop = Animated.event
(
  [null, { dy: this.state.pan.y}]
);

onPanResponderMove: (e, gesture) => {
if (this.state.isAnimated) {
      return gesture.dx < gesture.dy ? eventMoveLeft(e, gesture) : eventMoveTop(e, gesture);
    }
  },
Solution

  • on event onPanResponderMove get height of device and of limit the distance you want in percentage, like this...

     Math.abs(gesture.dy) > HEIGHT_DEVICE * .16 ? null : this.state.pan.y.setValue(gesture.dy);