CODEWITHSUNDEEP
react-native
LuisPinto
LuisPinto

Reputation: 1697

Detect pan Responder Touch Coordinates

I'm using the Pan Responder to detect a touch event.

I'm doing that with:

onStartShouldSetPanResponder: (e, gestureState) => {
        console.log(gestureState)
        console.log(e)
      },

However I'm not able to know where the user has touched because gestureState.x0 returns always 0. Same for gestureState.Y0

Anyone knows how can I detect that?

Thanks!

Upvotes: 0

Views: 2329

Answers (2)

RY_ Zheng
RY_ Zheng

Reputation: 3427

  1. onStartShouldSetPanResponder is the method to ask the view if it wants to become a responder at the start of a touch.

There are four methods in the PanResponder to negotiate who should be the responder.

onStartShouldSetPanResponder: (evt, gestureState) => {...},
onStartShouldSetPanResponderCapture: (evt, gestureState) => {...},
onMoveShouldSetPanResponder: (evt, gestureState) => {...},
onMoveShouldSetPanResponderCapture: (evt, gestureState) => {...},

Libraries/Interaction/PanResponder.js#L423 For onStartShouldSetPanResponder, it will be called in the onStartShouldSetResponder function. So, we can read the doc about ShouldSet Handlers to know these four methods briefly.

  1. nativeEvent

If this view become the responser of that touch, you should implement any of the following methods to get the nativeEvent.

// The View is now responding for touch events. 
onPanResponderGrant: (evt, gestureState) => {}, 
onPanResponderMove: (evt, gestureState) => {}, 
// The end of the touch
onPanResponderRelease: (evt, gestureState) => {}
  • nativeEvent
    • locationX - The X position of the touch, relative to the element
    • locationY - The Y position of the touch, relative to the element
    • pageX - The X position of the touch, relative to the root element
    • pageY - The Y position of the touch, relative to the root element

You can use page* or location* to get the touch point relative to the particular view.

The code might be like this:

  this._panResponder = PanResponder.create({
      onStartShouldSetPanResponder: (evt, gestureState) => true,
      onPanResponderGrant: (e, gestureState) => {
         console.log(e.locationX, e.locationY, e.pageX, e.pageY);
      },
  })

  <View
        {...this._panResponder.panHandlers}
      >
  </View>

Upvotes: 0

Ilya Lyamkin
Ilya Lyamkin

Reputation: 384

You should use the onPanResponderStart event for getting gestureState. Try this:

this._panResponder = PanResponder.create({
  onStartShouldSetPanResponder:(evt, gestureState) => true,
  onPanResponderStart: (evt, gestureState) => {
    console.log(evt, gestureState)
  }
});

Upvotes: 1

Related Questions