Merge pull request #8 from DuDigital/fix-pinch-zoom-panning-error

Fix pinch zoom panning error
DuDigital · Mar 4, 2019 · 2b62c17 · 2b62c17
2 parents 4579ed6 + 5204494
commit 2b62c17
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 29 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@dudigital/react-native-zoomable-view",
-  "version": "1.0.11",
+  "version": "1.0.12",
   "description": "A view component for react-native with pinch to zoom, tap to move and double tap to zoom capability.",
   "main": "index.js",
   "scripts": {

diff --git a/src/ReactNativeZoomableView.js b/src/ReactNativeZoomableView.js
@@ -108,7 +108,7 @@ class ReactNativeZoomableView extends Component {
    */
   _handleMoveShouldSetPanResponder = (e, gestureState) => {
     let baseComponentResult = this.props.zoomEnabled
-      && (Math.abs(gestureState.dx) > 2 || Math.abs(gestureState.dy) > 2 || gestureState.numberActiveTouches === 2);
+        && (Math.abs(gestureState.dx) > 2 || Math.abs(gestureState.dy) > 2 || gestureState.numberActiveTouches === 2);
 
     if (this.props.onMoveShouldSetPanResponder) {
       baseComponentResult = this.props.onMoveShouldSetPanResponder(e, gestureState, this._getZoomableViewEventObject(), baseComponentResult);
@@ -160,8 +160,8 @@ class ReactNativeZoomableView extends Component {
     }
 
     if (this.gestureType === 'pinch') {
+      this.pinchZoomPosition = null;
       if (this.props.onZoomEnd) {
-        this.pinchZoomPosition = null;
         this.props.onZoomEnd(e, gestureState, this._getZoomableViewEventObject());
       }
     } else if (this.gestureType === 'shift') {
@@ -261,7 +261,7 @@ class ReactNativeZoomableView extends Component {
   _bindOffsetValuesToBorders(changeObj, bindToBorders = null) {
     // if bindToBorders is disabled -> nothing do here
     if (bindToBorders === false ||
-      (bindToBorders === null && !this.props.bindToBorders)) {
+        (bindToBorders === null && !this.props.bindToBorders)) {
       return changeObj;
     }
 
@@ -344,10 +344,10 @@ class ReactNativeZoomableView extends Component {
 
     // only use the first position we get by pinching, or the screen will "wobble" during zoom action
     if (this.pinchZoomPosition === null) {
-	    const pinchToZoomCenterX = Math.min(e.nativeEvent.touches[ 0 ].pageX, e.nativeEvent.touches[ 1 ].pageX) + ( dx / 2 );
-	    const pinchToZoomCenterY = Math.min(e.nativeEvent.touches[ 0 ].pageY, e.nativeEvent.touches[ 1 ].pageY) + ( dy / 2 );
+      const pinchToZoomCenterX = Math.min(e.nativeEvent.touches[ 0 ].pageX, e.nativeEvent.touches[ 1 ].pageX) + ( dx / 2 );
+      const pinchToZoomCenterY = Math.min(e.nativeEvent.touches[ 0 ].pageY, e.nativeEvent.touches[ 1 ].pageY) + ( dy / 2 );
 
-	    this.pinchZoomPosition = this._getOffsetAdjustedPosition(pinchToZoomCenterX, pinchToZoomCenterY);
+      this.pinchZoomPosition = this._getOffsetAdjustedPosition(pinchToZoomCenterX, pinchToZoomCenterY);
     }
 
     // make sure we shift the layer slowly during our zoom movement
@@ -453,10 +453,10 @@ class ReactNativeZoomableView extends Component {
     const nextZoomStep = this._getNextZoomStep();
 
     this._zoomToLocation(
-      e.nativeEvent.locationX,
-      e.nativeEvent.locationY,
-      nextZoomStep,
-      true
+        e.nativeEvent.locationX,
+        e.nativeEvent.locationY,
+        nextZoomStep,
+        true
     );
 
     if (this.props.onDoubleTapAfter) {
@@ -546,25 +546,25 @@ class ReactNativeZoomableView extends Component {
 
   render() {
     return (
-      <View
-        style={styles.container}
-        {...this.gestureHandlers.panHandlers}
-        onLayout={this._getBoxDimensions}
-      >
         <View
-          style={[styles.wrapper, this.props.style, {
-            transform: [
-              { scale: this.state.zoomLevel },
-              { scale: this.state.zoomLevel },
-              { translateX: this.state.offsetX },
-              { translateY: this.state.offsetY },
-            ],
-          }]}
+    style={styles.container}
+    {...this.gestureHandlers.panHandlers}
+    onLayout={this._getBoxDimensions}
         >
-          {this.props.children}
-        </View>
-      </View>
-    );
+        <View
+    style={[styles.wrapper, this.props.style, {
+      transform: [
+        { scale: this.state.zoomLevel },
+        { scale: this.state.zoomLevel },
+        { translateX: this.state.offsetX },
+        { translateY: this.state.offsetY },
+      ],
+    }]}
+  >
+    {this.props.children}
+  </View>
+    </View>
+  );
   }
 }
 
@@ -625,4 +625,3 @@ const styles = StyleSheet.create({
 });
 
 export default ReactNativeZoomableView;
-