Lock movement with PanResponder in react native

Looking at the PanResponder documentation page you provided (https://facebook.github.io/react-native/docs/panresponder.html), I think you could modify the example to meet your needs.

The function responsible for taking action in response to a gesture is a property of PanResponder called onPanResponderMove, in the example code from the documentation this looks like:

_handlePanResponderMove: function(e: Object, gestureState: Object) {
    this._circleStyles.style.left = this._previousLeft + gestureState.dx;
    this._circleStyles.style.top = this._previousTop + gestureState.dy;
    this._updateNativeStyles();
},

Where the gestureState object looks like this:

stateID - ID of the gestureState- persisted as long as there at least one touch on screen
moveX - the latest screen coordinates of the recently-moved touch
moveY - the latest screen coordinates of the recently-moved touch
x0 - the screen coordinates of the responder grant
y0 - the screen coordinates of the responder grant
dx - accumulated distance of the gesture since the touch started
dy - accumulated distance of the gesture since the touch started
vx - current velocity of the gesture
vy - current velocity of the gesture
numberActiveTouches - Number of touches currently on screen

You might add a conditional check in _handlePanResponderMove to determine if the gestureState.y0 is below some threshold, and only apply a change if so

Tags:

React Native