diff --git a/README.md b/README.md index f77ebe8..2b9febe 100644 --- a/README.md +++ b/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 | diff --git a/src/ReactNativeZoomableView.js b/src/ReactNativeZoomableView.js index c823d72..3f0733d 100644 --- a/src/ReactNativeZoomableView.js +++ b/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( - 0, - 0, + 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, })); } diff --git a/typings/index.d.ts b/typings/index.d.ts index 3fd8338..271c28a 100644 --- a/typings/index.d.ts +++ b/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;