I'm working with the PanResponder in React Native, and am considering the scenario in which I click an Animated.View and drag it. I have the following code:

this.panResponder = PanResponder.create({
  onStartShouldSetPanResponder: () => true,
  onMoveShouldSetPanResponder: () => true,
  onPanResponderGrant: () => {
    this.animatedValue.setOffset({
      x: this._value.x,
      y: this._value.y,
    })
    this.animatedValue.setValue({ x: 0, y: 0})
  },
  onPanResponderMove: Animated.event([
    null,
    {
      dx: this.animatedValue.x,
      dy: this.animatedValue.y
    }
  ])
})

My questions are:

1) If I click the Animated.View that the PanResponder is attached to, I know that onStartShouldSetPanResponder: () => true causes the Animated.View to bee a responder to this gesture, but does onMoveShouldSetPanResponder: () => true cause it to 're-bee' a responder on every subsequent increment of the drag gesture?

2) Does onPanResponderGrant() get called only when I first click the Animated.View, or does it also get called on every subsequent increment of the drag gesture?

3) In onPanResponderMove, are dx and dy the total accumulated distances from the beginning of the touch, or are they the small increments corresponding to the individual increment of the current drag gesture? ie. If I've dragged the Animated.View a total of 100px in the x direction, would dx by 100px or would it be something like 1px for the current increment of the drag gesture?

If you can give me some insight on ANY of these, that would be great.

Thanks!

I'm working with the PanResponder in React Native, and am considering the scenario in which I click an Animated.View and drag it. I have the following code:

this.panResponder = PanResponder.create({
  onStartShouldSetPanResponder: () => true,
  onMoveShouldSetPanResponder: () => true,
  onPanResponderGrant: () => {
    this.animatedValue.setOffset({
      x: this._value.x,
      y: this._value.y,
    })
    this.animatedValue.setValue({ x: 0, y: 0})
  },
  onPanResponderMove: Animated.event([
    null,
    {
      dx: this.animatedValue.x,
      dy: this.animatedValue.y
    }
  ])
})

My questions are:

1) If I click the Animated.View that the PanResponder is attached to, I know that onStartShouldSetPanResponder: () => true causes the Animated.View to bee a responder to this gesture, but does onMoveShouldSetPanResponder: () => true cause it to 're-bee' a responder on every subsequent increment of the drag gesture?

2) Does onPanResponderGrant() get called only when I first click the Animated.View, or does it also get called on every subsequent increment of the drag gesture?

3) In onPanResponderMove, are dx and dy the total accumulated distances from the beginning of the touch, or are they the small increments corresponding to the individual increment of the current drag gesture? ie. If I've dragged the Animated.View a total of 100px in the x direction, would dx by 100px or would it be something like 1px for the current increment of the drag gesture?

If you can give me some insight on ANY of these, that would be great.

Thanks!

• javascript
• react-native
• gesture
• gesture-recognition

Share Improve this question Follow asked Mar 17, 2019 at 20:26 gkeenleygkeenley 7,4781717 gold badges7878 silver badges180180 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

1. No it will only bee responder once. Usually you only need either one of them. For example if you only want a gesture to bee active on dragging you would return no from onStartShouldSetPanResponder.

2. onPanResponderGrant() will only be called once for a given gesture. This is typically where you could update the state or UI to to notify the user that a gesture is active.

3. dx and dy are indeed accumulated x and y positions relative to the start of the gesture. So in your example it would be 100.