PanResponder

PanResponder.md

Initial Setup

constructor(props) {
  super(props);

  this.state = {
    pan: new Animated.ValueXY(), //In order to keep track of where the image is on the screen we’ll want to keep a record of its position somewhere. 
 scale: new Animated.Value(1) // used to change size of item while moving
  };
}
componentWillMount() {

  this._panResponder = PanResponder.create({
          // onMoveShouldSetResponderCapture: () => true,  Tells the OS we want to allow movement of the view we’ll attach this panresponder to.
          onMoveShouldSetResponderCapture: () => true

          // onMoveShouldSetPanResponderCapture: () => true,:  This does the same, but for dragging, which we want to be able to do.
          onMoveShouldSetPanResponderCapture: () => true,

          // onPanResponderGrant: (e, gestureState) => {}: This gets invoked when we got access to the movement of the element. This is a perfect spot to set some initial values.
          onPanResponderGrant: (e, gestureState) => {
                    this.state.pan.setValue({x: 0, y: 0}); //Set Defaults value of x and y to 0 (the center of the screen)
          },
          onPanResponderGrant: (e, gestureState) => {
                      // Set the initial value to the current state
                      this.state.pan.setOffset({x: this.state.pan.x._value, y: this.state.pan.y._value});
                      this.state.pan.setValue({x: 0, y: 0});
          },
          onPanResponderGrant: (e, gestureState) => {
                        // Set the initial value to the current state
                        this.state.pan.setOffset({x: this.state.pan.x._value, y: this.state.pan.y._value});
                        this.state.pan.setValue({x: 0, y: 0});
                        Animated.spring(this.state.scale,{ toValue: 1.1, friction: 3 }).start();
},

          //  onPanResponderMove: Animated.event([]),:  This gets invoked when we move the element, which we can use to calculate the next value for the object          
          onPanResponderMove: Animated.event([null, {dx: this.state.pan.x, dy: this.state.pan.y},]),

          // onPanResponderRelease: (e, {vx, vy}) => {}: This is invoked when we release the view. In a minute we’ll use this to make the image animated back to its original position
          onPanResponderRelease: (e, {vx, vy}) => {
                        // Flatten the offset to avoid erratic behavior
                        this.state.pan.flattenOffset();
           }
           onPanResponderRelease: (e, {vx, vy}) => {
                        // Flatten the offset to avoid erratic behavior
                        this.state.pan.flattenOffset();
                        Animated.spring(this.state.scale,{ toValue: 1, friction: 3 }).start();
           }
  });
}

render() {
  // Destructure the value of pan from the state
  let { pan } = this.state;

  // Calculate the x and y transform from the pan value
  let [translateX, translateY] = [pan.x, pan.y];

  // Calculate the transform property and set it as a value for our style which we add below to the Animated.View component
  let imageStyle = {transform: [{translateX}, {translateY}]};
  // same as above but adds the effect to change size of item while moving
  let imageStyle = {transform: [{translateX}, {translateY}, {rotate}, {scale}]};

  let rotate = '0deg';



  return (
    <View style={{flex:1}}>
      <Animated.View {...this._panResponder.panHandlers}>
        <Image source={uri:"https://unsplash.it/300/300/?random"} />
      </Animated.View>
    </View>
  );
}

```javascript

sources:

https://mindthecode.com/getting-started-with-the-panresponder-in-react-native/
https://facebook.github.io/react-native/docs/panresponder.html