How do I detect the users touch on an element in react native?

Question

I understand in react native we have: - OnPress (detects a press and release) - OnPressIn (detects the user going from not touching, to touching the button) -OnPressOut (detects the user releasing the button, or moving their finger elsewhere)

But I want to detect when the user is already touching the screen elsewhere, and then drags their finger over the button.

Answer 1

You can use the PanResponder API to have fine-grained control over touches and gestures. Create PanHandlers and attach them to the View you want to detect touches on.

For your use case of detecting drag, you can use the onPanResponderMove

onPanResponderMove: (evt, gestureState) => {
    // The most recent move distance is gestureState.move{X,Y}
    // The accumulated gesture distance since becoming responder is
    // gestureState.d{x,y}
  }

Use dx and dy to get the distance dragged on X and Y axes.

Here's the documentation on PanResponder