Block movement using PanResponder in

Question

Using the native PanResponder reaction, how can I block the movement when the screen coordinates touch outside a certain range of values?

For example, how can I prevent users from moving a component below a certain y position on the screen?

PanResponder uses the Gesture Response System .

I carefully read the documentation, but I can not find the answer.

Any help is greatly appreciated.

Answer 1

By looking at the PanResponder documentation page that you provided ( https://facebook.imtqy.com/react-native/docs/panresponder.html ), I think you can modify the example to suit your needs.

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

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

If 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 can add a conditional check to _handlePanResponderMove to determine if gestureState.y0 is below some threshold and only apply the change, if so