CODEWITHSUNDEEP
reactjsreact-nativereact-animated
mibbit
mibbit

Reputation: 5375

react-native onPanResponderMove strange behavior no documentation Animated.Event

I have noticed in react-native panResponder onPanResponderMove method calls when I use 

  onPanResponderMove: Animated.event([null, {dx: this._pan}]),

but when I try to use:

  onPanResponderMove: (e, gestureState) => {
    Animated.event([null, {dx: this._pan}])
  },

the method does't call. Is there another javascript syntax I can use so that I have a function scope I can use along side Animated.event

Upvotes: 1

Views: 1273

Answers (2)

fcFn
fcFn

Reputation: 427

If you want to do something along with Animated.event, you need to pass event arguments like so:

onPanResponderMove: (e, gestureState) => {
    ...some actions...
    Animated.event([null, {dx: this._pan}])(e, gestureState);
  },

This is because a call to Animated.event returns another function (using provided mappings to bind event data to component variables, so it could call setValue on them), which is in turn called back by onPanResponderMove listener on the move event.

Upvotes: 1

dazweeja
dazweeja

Reputation: 334

Animated.event() returns a function. If you want to run the function, you have to call it. I'm assuming your use case is that you want to execute some actions on every move? In that case, the syntax you are looking for is:

onPanResponderMove: (e, gestureState) => {
    ...some actions...
    Animated.event([null, {dx: this.state.pan.x}])(e, gestureState);
  },

Upvotes: 3

Related Questions