Using PanResponder with Animated.event

Question

I've been trying to get PanResponder to work in the way that I need. I have a View that contains a circle, and as I move my finger on that view, I want the circle to follow me.

The structure

<View {...this.panResponder.panHandlers}>
   <Animated.Circle />
</View>

Now, all of the tutorials show the following

onPanResponderMove: Animated.event([
  null, {dx: this.state.pan.x, dy: this.state.pan.y},
]),

And this works absolutely fine, my problem is that I need to fit more logic within the onPanResponderMove, and every time I try to use Animated.event within the function it does nothing. Here's an example of the function:

onPanResponderMove: (e, gestureState) => {
  /* some other logic that I need here */

  const { dx, dy } = gestureState;
  Animated.event([null, {dx: this.state.pan.x, dy: this.state.pan.y}]);
},

How could I make this work?

Thanks in advance

Answer 1

The solution was the following

onPanResponderMove: Animated.event([null, {dx: this.state.pan.x, dy: this.state.pan.y}], {
  listener: (event, gestureState) => {
    /* my own logic */
  },
}),

Answer 2

https://github.com/facebook/react-native/issues/15880

Reason was because Animation.event() only generates the function which is used from onPanResponderMove, it also needs the default arguments evt, gestureState

The following works:

onPanResponderMove: (evt, gestureState) => {
  // do whatever you need here
  // be sure to return the Animated.event as it returns a function
  return Animated.event([null, {
    dx: this.state.pan.x,
    dy: this.state.pan.y,
  }])(evt, gestureState)
},