From a31251e1c950b4978973e31c0fbb3b343391f885 Mon Sep 17 00:00:00 2001 From: ajayg415 Date: Thu, 29 Jul 2021 12:36:29 +0530 Subject: [PATCH] added stayAtMaxZoom optional paramater to conditionally return zoom value when user reaches max zoom value --- README.md | 107 ++++++++++++++++---------------- src/ReactNativeZoomableView.tsx | 5 +- src/typings/index.d.ts | 1 + 3 files changed, 57 insertions(+), 56 deletions(-) diff --git a/README.md b/README.md index cb6b930..01f2361 100644 --- a/README.md +++ b/README.md @@ -25,7 +25,7 @@ We are happy to hear from you about bugs, issues and would also appreciate your `$ npm install @dudigital/react-native-zoomable-view --save` -or +or `$ yarn add @dudigital/react-native-zoomable-view` @@ -37,11 +37,13 @@ Therefore no platform specific configuration needs to be done. Just use it as a drop in component instead of a normal view. Import ReactNativeZoomableView: + ```JSX import ReactNativeZoomableView from '@dudigital/react-native-zoomable-view/src/ReactNativeZoomableView'; ``` Use the component: + ```JSX | -| zoomBy | Changes the zoom level relative to the current level (use positive numbers to zoom in, negative numbers to zoom out) | zoomLevelChange: number, bindToBorders = true | Promise | -| moveTo | Shifts the zoomed part to a specific point (in px relative to x: 0, y: 0) | newOffsetX: number, newOffsetY: number, bindToBorders = true | Promise | -| moveBy | Shifts the zoomed part by a specific pixel number | newOffsetX: number, newOffsetY: number, bindToBorders = true | Promise | - +| name | description | params | expected return | +| ------ | -------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------ | --------------- | +| zoomTo | Changes the zoom level to a specific number | newZoomLevel: number, bindToBorders = true | Promise | +| zoomBy | Changes the zoom level relative to the current level (use positive numbers to zoom in, negative numbers to zoom out) | zoomLevelChange: number, bindToBorders = true | Promise | +| moveTo | Shifts the zoomed part to a specific point (in px relative to x: 0, y: 0) | newOffsetX: number, newOffsetY: number, bindToBorders = true | Promise | +| moveBy | Shifts the zoomed part by a specific pixel number | newOffsetX: number, newOffsetY: number, bindToBorders = true | Promise | **Example:** @@ -222,24 +222,24 @@ export default function App() { ``` - #### Pan Responder Hooks Sometimes you need to change deeper level behavior, so we prepared these panresponder hooks for you. -| name | description | params | expected return | -| ---- | ----------- | ------ | --------------- | -| onStartShouldSetPanResponder | description | event, gestureState, zoomableViewEventObject, baseComponentResult | {boolean} whether panresponder should be set or not | -| onMoveShouldSetPanResponder | description | event, gestureState, zoomableViewEventObject, baseComponentResult | {boolean} whether panresponder should be set or not | -| onPanResponderGrant | description | event, gestureState, zoomableViewEventObject | void | -| onPanResponderEnd | Will be called when gesture ends (more accurately, on pan responder "release") | event, gestureState, zoomableViewEventObject | void | -| onPanResponderTerminate | Will be called when the gesture is force-interrupted by another handler | event, gestureState, zoomableViewEventObject | void | -| onPanResponderTerminationRequest | Callback asking whether the gesture should be interrupted by another handler (**iOS only** due to https://github.com/facebook/react-native/issues/27778, https://github.com/facebook/react-native/issues/5696, ...) | event, gestureState, zoomableViewEventObject | void | -| onPanResponderMove | Will be called when user moves while touching | event, gestureState, zoomableViewEventObject | void | +| name | description | params | expected return | +| -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------- | --------------------------------------------------- | +| onStartShouldSetPanResponder | description | event, gestureState, zoomableViewEventObject, baseComponentResult | {boolean} whether panresponder should be set or not | +| onMoveShouldSetPanResponder | description | event, gestureState, zoomableViewEventObject, baseComponentResult | {boolean} whether panresponder should be set or not | +| onPanResponderGrant | description | event, gestureState, zoomableViewEventObject | void | +| onPanResponderEnd | Will be called when gesture ends (more accurately, on pan responder "release") | event, gestureState, zoomableViewEventObject | void | +| onPanResponderTerminate | Will be called when the gesture is force-interrupted by another handler | event, gestureState, zoomableViewEventObject | void | +| onPanResponderTerminationRequest | Callback asking whether the gesture should be interrupted by another handler (**iOS only** due to https://github.com/facebook/react-native/issues/27778, https://github.com/facebook/react-native/issues/5696, ...) | event, gestureState, zoomableViewEventObject | void | +| onPanResponderMove | Will be called when user moves while touching | event, gestureState, zoomableViewEventObject | void | ### zoomableViewEventObject The zoomableViewEventObject object is attached to every event and represents the current state of our zoomable view. + ``` { zoomLevel: number, // current level of zooming (usually a value between minZoom and maxZoom) @@ -256,7 +256,7 @@ The zoomableViewEventObject object is attached to every event and represents the lastMovePinch: boolean, // boolean, that states if this movement was a pinch movement originalHeight: number, // original height of the outer view originalWidth: number, // original width of the outer view - captureEvent: boolean, // should the panresponder be taken away from parent component (used for react-native modals) + captureEvent: boolean, // should the panresponder be taken away from parent component (used for react-native modals) } ``` @@ -267,12 +267,11 @@ The zoomableViewEventObject object is attached to every event and represents the To make this work with react-native modals, you have to set the `captureEvent` prop to `true`. Otherwise the modal will stop the pinch2zoom event and it will not work. - ## TODO -* Improve documentation -* Add examples for more complex scenarios (react-native-zoomable-view in a swiper) -* TESTS +- Improve documentation +- Add examples for more complex scenarios (react-native-zoomable-view in a swiper) +- TESTS ## Contributing diff --git a/src/ReactNativeZoomableView.tsx b/src/ReactNativeZoomableView.tsx index 989d909..40d12d8 100644 --- a/src/ReactNativeZoomableView.tsx +++ b/src/ReactNativeZoomableView.tsx @@ -47,6 +47,7 @@ class ReactNativeZoomableView extends Component