controlling the speed of panning a view in react native

Question

I am using this to implement panning on an animated.view https://software-mansion.github.io/react-native-gesture-handler/docs/handler-pan.html

This animated view also has pinch and zoom enabled using the same library

<Animated.View 
  style={[{width: this.props.width, height: this.props.height, backgroundColor:this.props.bgColor},
      {
       transform: [
         { scale: this._scale },
         { translateX: this._translateX },
         { translateY: this._translateY },
         ],
          },
       ]} collapsable={false}>
        {this.props.children}
 </Animated.View>

When the view is at its normal zoom/scale, pan works as you would expect. The view moves along with the finger.

If you zoom out (the view gets smaller), the pan gesture moves the view less pixels for each equivalent movement of the finger.

If you zoom in (The view is really big), the pan gesture moves the view a lot. So even the tiniest move of your finger moves the view considerably and is hard to get an accurate pan.

Is there a way to adjust the panning sensitivity inline with how much zoom/scale you have? I cannot seem to find any properties in the docs that would get this to work. Are there work arounds for this?

End result wanted:
Zoom out, increase panning speed/sensitivity
zoom in, decrease panning speed/sensitivity

score 1 · Answer 1 · answered Jul 16 '20 at 15:05

You need to do some maths with the scale value.

Something like this should work.

<Animated.View 
  style={[{width: this.props.width, height: this.props.height, backgroundColor:this.props.bgColor},
      {
       transform: [
         { scale: this._scale },
         { translateX: Animated.divide(this._translateX, this._scale) },
         { translateY: Animated.divide(this._translateY, this._scale) },
         ],
          },
       ]} collapsable={false}>
        {this.props.children}
 </Animated.View>

If you are allowing multiple pinches to keep scaling in, or multiple pans to keep changing the translate values, then you will also need to store the previous scale and factor this into the translate calculations.

controlling the speed of panning a view in react native

1 Answers1