Merge pull request #62 from DuDigital/feature/added-doubletap-zoom-to…

…-center-prop

Feature/added doubletap zoom to center prop

README.md

@@ -134,6 +134,7 @@ These options can be used to limit and change the zoom behavior.
 | maxZoom | number | Maximum possible zoom level (zoom in). Can be set to `null` to allow unlimited zooming | 1.5 |
 | minZoom | number | Minimum possible zoom level (zoom out) | 0.5 |
 | doubleTapDelay | number  | How much delay will still be recognized as double press (ms) | 300 |
+| doubleTapZoomToCenter | boolean | If true, double tapping will always zoom to center of View instead of the direction it was double tapped in
 | bindToBorders | boolean | If true, it makes sure the object stays within box borders | true |
 | zoomStep | number | How much zoom should be applied on double tap | 0.5 |
 | pinchToZoomInSensitivity | number | the level of resistance (sensitivity) to zoom in (0 - 10) - higher is less sensitive | 3 |

src/ReactNativeZoomableView.js

@@ -503,26 +503,40 @@ class ReactNativeZoomableView extends Component {
    * @private
    */
   _handleDoubleTap(e, gestureState) {
+    const { onDoubleTapBefore, onDoubleTapAfter, doubleTapZoomToCenter } = this.props;
+
     // ignore more than 2 touches
     if (gestureState.numberActiveTouches > 1 || !this.props.zoomEnabled) {
       return;
     }
 
-    if (this.props.onDoubleTapBefore) {
-      this.props.onDoubleTapBefore(e, gestureState, this._getZoomableViewEventObject());
+    if (onDoubleTapBefore) {
+      onDoubleTapBefore(e, gestureState, this._getZoomableViewEventObject());
     }
 
     const nextZoomStep = this._getNextZoomStep();
 
+    // define new zoom position coordinates
+    const zoomPositionCoordinates = {
+      x: e.nativeEvent.locationX,
+      y: e.nativeEvent.locationY,
+    };
+
+    // if doubleTapZoomToCenter enabled -> always zoom to center instead
+    if (doubleTapZoomToCenter) {
+      zoomPositionCoordinates.x = 0;
+      zoomPositionCoordinates.y = 0;
+    }
+
     this._zoomToLocation(
-      e.nativeEvent.locationX,
-      e.nativeEvent.locationY,
+      zoomPositionCoordinates.x,
+      zoomPositionCoordinates.y,
       nextZoomStep,
       true
     );
 
-    if (this.props.onDoubleTapAfter) {
-      this.props.onDoubleTapAfter(e, gestureState, this._getZoomableViewEventObject({
+    if (onDoubleTapAfter) {
+      onDoubleTapAfter(e, gestureState, this._getZoomableViewEventObject({
         zoomLevel: nextZoomStep,
       }));
     }
@@ -567,6 +581,13 @@ class ReactNativeZoomableView extends Component {
     const currentElementWidth = originalWidth;
     const currentElementHeight = originalHeight;
 
+    if (x === 0 && y === 0) {
+      return {
+        x: 0,
+        y: 0,
+      }
+    }
+
     const returnObj = {
       x: (-x + (currentElementWidth / 2)),
       y: (-y + (currentElementHeight / 2)),

typings/index.d.ts

@@ -31,6 +31,7 @@ declare module '@dudigital/react-native-zoomable-view' {
     maxZoom?: number;
     minZoom?: number;
     doubleTapDelay?: number;
+    doubleTapZoomToCenter?: boolean;
     bindToBorders?: boolean;
     zoomStep?: number;
     pinchToZoomInSensitivity?: number;