How can I detect if the touch is over the border of a View from PanResponder?

Question

I'm working on a Image cropper, I have somehow figure out how to move the cropper even it's not a perfect solution but it works, but now I want to respond to the border touches/moves of a given View

I'm using this module for the corpping, but actually I'm still stuck at how to respond to border touches/moves

Answer 1

gestureState parameter is sufficient for the task.

x0 and y0 are the top-left coordinates of the responder view, further, moveX and moveY holds the current coordinates of touch.

So moveX === x0 means current touch is at left edge. Similarly moveY === y0 means current touch is at top edge.

For handling right and bottom edge I suggest you use onLayout in the <View> tag and assign height and width of the view to some variable or in state variable( take care of performances optimisations)

And then use it in similar way:

onPanresponderMove(evt, {x0, y0, moveX, moveY) { 
      ...
      if(moveX=== x0 || moveX === x0 + this.state._currentWidth) { 
         // task for left and right edge response
         ...
      }
      ...
   }

To get view width:

<View {...this._myResponder.panHandlers} 
             onLayout={ ({width, height}) => this.state._currentWidth = width } />