Skip to content
This repository has been archived by the owner on Nov 30, 2022. It is now read-only.

Feature/added doubletap zoom to center prop #62

Merged
merged 2 commits into from
Jun 10, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 |
Expand Down
33 changes: 27 additions & 6 deletions src/ReactNativeZoomableView.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
}));
}
Expand Down Expand Up @@ -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)),
Expand Down
1 change: 1 addition & 0 deletions typings/index.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down