React Native Pan Responder

Question

I need some clarification about the PanResponder API in React native. This is the simplest implementation (found in the Animated Docs):

 class DraggableView extends React.Component {
   constructor(props) {
   super(props);
   this.state = {
     pan: new Animated.ValueXY(), // inits to zero
   };
   this.state.panResponder = PanResponder.create({
   onStartShouldSetPanResponder: () => true,
   onPanResponderMove: Animated.event([null, {
     dx: this.state.pan.x, // x,y are Animated.Value
     dy: this.state.pan.y,
   }]),
   onPanResponderRelease: () => {
     Animated.spring(
       this.state.pan,         // Auto-multiplexed
       {toValue: {x: 0, y: 0}} // Back to zero
     ).start();
   },
  });
 }
 render() {
   return (
     <Animated.View
       {...this.state.panResponder.panHandlers}
       style={this.state.pan.getLayout()}>
       {this.props.children}
     </Animated.View>
   );
 }
}

focusing only on the onPanResponderMove function, I want to do something like this (following this docs:

onPanResponderMove: (e, gestureState) => {...}

because I need to execute multiple functions within this handler. if I mix the two solutions:

onPanResponderMove: (evt, gestureState) => {
    console.log(evt);
    console.log(gestureState);


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

it doesn't work. How can I execute multiple functions in this handler? thanks.

What error are you getting here? You might try extracting what you want to happen into its own function — Jason Gaare, Sep 12 '16 at 16:38

score 1 · Answer 1 · answered Sep 13 '16 at 18:14

1

There was a problem with the Animated.event function. The solution is to return the Animated.event, because this function is executed many times during the handler execution.

onPanResponderMove: (evt, gestureState) => {
  console.log(evt);
  console.log(gestureState);

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

answered Sep 13 '16 at 18:14

rick_zan

71
10

Did u do this For Multiple Images which are taken in a array.. using map func – Lucifer_Latif Jun 09 '18 at 11:15

React Native Pan Responder

1 Answers1