├── .editorconfig
├── .gitignore
├── .prettierrc
├── LICENSE
├── README.md
├── index.d.ts
├── index.js
├── package.json
├── rollup.config.js
├── src
    ├── ReactNativeZoomableView.tsx
    ├── ReactNativeZoomableViewWithGestures.tsx
    ├── index.tsx
    └── typings
    │   └── index.d.ts
└── tsconfig.json


/.editorconfig:
--------------------------------------------------------------------------------
 1 | # Editor configuration, see
 2 | # https://editorconfig-specification.readthedocs.io/en/latest/#supported-pairs
 3 | 
 4 | root = true
 5 | 
 6 | [**]
 7 | charset = utf-8
 8 | indent_size = 2
 9 | indent_style = space
10 | 
11 | [{src/**,test/**}]
12 | end_of_line = lf
13 | insert_final_newline = true
14 | trim_trailing_whitespace = true
15 | 
16 | [*.md]
17 | trim_trailing_whitespace = unset
18 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .idea
2 | .vscode
3 | node_modules
4 | yarn.lock
5 | package-lock.json
6 | dist


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |     "printWidth": 120,
3 |     "endOfLine": "crlf",
4 |     "quoteProps": "consistent",
5 |     "singleQuote": true,
6 |     "trailingComma": "all"
7 | }


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 DuAgentur
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # 🚩🚩🚩 Attention: Deprecated 🚩🚩🚩
  2 | <p>Sadly we are not using react-native in any of our projects anymore and therefore don't use this either. We tried to apply some fixes from time to time, but it took up way more time than we have available for a fun project. We also wanted to do a complete rewrite using react-animated for performance reasons, but we never made it past a prototype. Since we did not find enough contributors to keep the project alive and did not want to leave the users hanging, we decided to deprecate our codebase and talk to some of the people, who have forked and worked on it.</p>
  3 | <p>Fortunately the awesome guys from [openspacelabs](https://github.com/openspacelabs/) have used this package and extended it in their repo. We have talked to them and they have agreed that now have their fork is the defacto successor of react-native-zoomable-view.<br />
  4 | <br />There is also a reanimated version, with a (as far as I can see bit smaller feature set - but it might be perfect for you) available: https://github.com/kesha-antonov/react-native-zoom-reanimated<br /><br />
  5 | Please only use their package going forward: https://github.com/openspacelabs/react-native-zoomable-view .<br />
  6 | This package will not be developed anymore and as soon as their npm package is published, we will archive our npm package.</p>
  7 | 
  8 | 
  9 | 
 10 | <br />
 11 | <br />
 12 | <br />
 13 | <br />
 14 | <br />
 15 | 
 16 | # react-native-zoomable-view
 17 | 
 18 | A view component for react-native with pinch to zoom, tap to move and double tap to zoom capability.
 19 | You can zoom everything, from normal images, text and more complex nested views.
 20 | 
 21 | We are using this component already in production in two of our projects, but for quality assurance sake, please consider this component beta.
 22 | We are happy to hear from you about bugs, issues and would also appreciate your pull requests, if you've made improvements or fixed bugs.
 23 | 
 24 | ## Preview
 25 | 
 26 | ![](https://thumbs.gfycat.com/PalatableMeanGnat-size_restricted.gif)
 27 | 
 28 | ## Getting started
 29 | 
 30 | - [Installation](#installation)
 31 | - [Basic Usage](#basic-usage)
 32 | - [Props](#props)
 33 | - [Events](#events)
 34 | - [Pan Responder Hooks](#pan-responder-hooks)
 35 | - [Example](#example)
 36 | - [Expo Snack Example](#expo-snack-example)
 37 | - [Example Repo](#example-repo)
 38 | 
 39 | ### Installation
 40 | 
 41 | `$ npm install @dudigital/react-native-zoomable-view --save`
 42 | 
 43 | or 
 44 | 
 45 | `$ yarn add @dudigital/react-native-zoomable-view`
 46 | 
 47 | ### Basic Usage
 48 | 
 49 | This component is based on react-natives View, enhanced by panresponders and other events to make it zoomable.
 50 | Therefore no platform specific configuration needs to be done.
 51 | 
 52 | Just use it as a drop in component instead of a normal view.
 53 | 
 54 | Import ReactNativeZoomableView:
 55 | ```JSX
 56 | import ReactNativeZoomableView from '@dudigital/react-native-zoomable-view/src/ReactNativeZoomableView';
 57 | ```
 58 | 
 59 | Use the component:
 60 | ```JSX
 61 | <ReactNativeZoomableView
 62 |    maxZoom={1.5}
 63 |    minZoom={0.5}
 64 |    zoomStep={0.5}
 65 |    initialZoom={1}
 66 |    bindToBorders={true}
 67 |    onZoomAfter={this.logOutZoomState}
 68 |    style={{
 69 |       padding: 10,
 70 |       backgroundColor: 'red',
 71 |    }}
 72 | >
 73 |    <Text>This is the content</Text>
 74 | </ReactNativeZoomableView>
 75 | ```
 76 | 
 77 | ### Example
 78 | 
 79 | Here is a full drop in example you can use in Expo, after installing the package.
 80 | 
 81 | ```JSX
 82 | import React from 'react';
 83 | import { View, Image } from 'react-native';
 84 | import ReactNativeZoomableView from '@dudigital/react-native-zoomable-view/src/ReactNativeZoomableView';
 85 | 
 86 | export default class App extends React.Component {
 87 |   /**
 88 |    * Log out an example event after zooming
 89 |    *
 90 |    * @param event
 91 |    * @param gestureState
 92 |    * @param zoomableViewEventObject
 93 |    */
 94 |   logOutZoomState = (event, gestureState, zoomableViewEventObject) => {
 95 |     console.log('');
 96 |     console.log('');
 97 |     console.log('-------------');
 98 |     console.log('Event: ', event);
 99 |     console.log('GestureState: ', gestureState);
100 |     console.log('ZoomableEventObject: ', zoomableViewEventObject);
101 |     console.log('');
102 |     console.log(`Zoomed from ${zoomableViewEventObject.lastZoomLevel} to  ${zoomableViewEventObject.zoomLevel}`);
103 |   }
104 | 
105 |   render() {
106 |     return (
107 |       <View style={{ flex: 1 }}>
108 |         <ReactNativeZoomableView
109 |           maxZoom={1.5}
110 |           minZoom={0.5}
111 |           zoomStep={0.5}
112 |           initialZoom={1}
113 |           bindToBorders={true}
114 |           onZoomAfter={this.logOutZoomState}
115 |           style={{
116 |             padding: 10,
117 |             backgroundColor: 'red',
118 |           }}
119 |         >
120 |           <Image style={{ flex: 1, width: null, height: '100%' }}
121 |                  source={require('./image.jpg')}
122 |                  resizeMode="contain" />
123 |         </ReactNativeZoomableView>
124 |       </View>
125 |     );
126 |   }
127 | }
128 | ```
129 | 
130 | ### Expo Snack Example
131 | 
132 | https://snack.expo.io/SkltQtr8Q
133 | 
134 | ### Example Repo
135 | 
136 | https://github.com/DuDigital/react-native-zoomable-view-example
137 | 
138 | 
139 | ### Props
140 | 
141 | #### Options
142 | 
143 | These options can be used to limit and change the zoom behavior.
144 | 
145 | | name | type | description | default |
146 | | ---- | ----------- | ------ | --------------- |
147 | | zoomEnabled | boolean | Can be used to enable or disable the zooming dynamically | true |
148 | | initialZoom | number | Initial zoom level on startup | 1.0 |
149 | | maxZoom | number | Maximum possible zoom level (zoom in). Can be set to `null` to allow unlimited zooming | 1.5 |
150 | | minZoom | number | Minimum possible zoom level (zoom out) | 0.5 |
151 | | doubleTapDelay | number  | How much delay will still be recognized as double press (ms) | 300 |
152 | | doubleTapZoomToCenter | boolean | If true, double tapping will always zoom to center of View instead of the direction it was double tapped in
153 | | bindToBorders | boolean | If true, it makes sure the object stays within box borders | true |
154 | | zoomStep | number | How much zoom should be applied on double tap | 0.5 |
155 | | pinchToZoomInSensitivity | number | the level of resistance (sensitivity) to zoom in (0 - 10) - higher is less sensitive | 3 |
156 | | pinchToZoomOutSensitivity | number | the level of resistance (sensitivity) to zoom out (0 - 10) - higher is less sensitive | 1 |
157 | | zoomCenteringLevelDistance | number | the (zoom level - 0 - maxZoom) distance for pinch to zoom actions until they are shifted on new pinch to zoom center - higher means it centeres slower | 0.5 |
158 | | movementSensibility | number | how resistant should shifting the view around be? (0.5 - 5) - higher is less sensitive | 1.9 |
159 | | initialOffsetX | number | The horizontal offset the image should start at | 0 |
160 | | initialOffsetY | number | The vertical offset the image should start at | 0 |
161 | | longPressDuration | number | Duration in ms until a press is considered a long press | 700 |
162 | | captureEvent | boolean | Defines whether the pan responder of the parent element should be captured. (useful for react-native modals, set it to true) | false |
163 | 
164 | #### Callbacks
165 | 
166 | These events can be used to work with data after specific events.
167 | 
168 | | name | description | params | expected return |
169 | | ---- | ----------- | ------ | --------------- |
170 | | onDoubleTapBefore | Will be called, at the start of a double tap | event, gestureState, zoomableViewEventObject | void |
171 | | onDoubleTapAfter | Will be called at the end of a double tap | event, gestureState, zoomableViewEventObject | void |
172 | | onShiftingBefore | Will be called, when user taps and moves the view, but before our view movement work kicks in (so this is the place to interrupt movement, if you need to)  | event, gestureState, zoomableViewEventObject |  {boolean} if this returns true, ZoomableView will not process the shift, otherwise it will |
173 | | onShiftingAfter | Will be called, when user taps and moves the view, but after the values have changed already | event, gestureState, zoomableViewEventObject | void |
174 | | onShiftingEnd | Will be called, when user stops a tap and move gesture | event, gestureState, zoomableViewEventObject | void |
175 | | onZoomBefore | Will be called, while the user pinches the screen, but before our zoom work kicks in (so this is the place to interrupt zooming, if you need to) | event, gestureState, zoomableViewEventObject | {boolean} if this returns true, ZoomableView will not process the pinch, otherwise it will |
176 | | onZoomAfter | Will be called, while the user pinches the screen, but after the values have changed already | event, gestureState, zoomableViewEventObject | {boolean} if this returns true, ZoomableView will not process the pinch, otherwise it will |
177 | | onZoomEnd | Will be called after pinchzooming has ended | event, gestureState, zoomableViewEventObject | {boolean} if this returns true, ZoomableView will not process the pinch, otherwise it will |
178 | | onLongPress | Will be called after the user pressed on the image for a while | event, gestureState | void | 
179 | 
180 | 
181 | #### Events
182 | 
183 | The following events allow you to control the ZoomableView zoom level & position from your component.
184 | (think of control buttons, ...)
185 | 
186 | You can find an implementation example in the example repo: https://github.com/DuDigital/react-native-zoomable-view-example
187 | 
188 | | name | description | params | expected return |
189 | | ---- | ----------- | ------ | --------------- |
190 | | zoomTo | Changes the zoom level to a specific number | newZoomLevel: number, bindToBorders = true | Promise<bool> |
191 | | 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<bool> |
192 | | moveTo | Shifts the zoomed part to a specific point (in px relative to x: 0, y: 0) | newOffsetX: number, newOffsetY: number, bindToBorders = true | Promise<void> |
193 | | moveBy | Shifts the zoomed part by a specific pixel number | newOffsetX: number, newOffsetY: number, bindToBorders = true | Promise<void> |
194 | 
195 | 
196 | **Example:**
197 | 
198 | ```TSX
199 | 
200 | export default function App() {
201 |   // you will need a reference to the ReactNativeZoomableView component
202 |   const zoomableViewRef = createRef<ReactNativeZoomableView>();
203 | 
204 |   return (
205 |     <View style={styles.container}>
206 |       <View style={styles.zoomWrapper}>
207 |         <ReactNativeZoomableView
208 |           ref={zoomableViewRef}
209 |           bindToBorders={true}
210 |         >
211 |           <Text style={styles.caption}>HelloWorld</Text>
212 |         </ReactNativeZoomableView>
213 |       </View>
214 | 
215 |       <View style={styles.controlWrapperLeft}>
216 |         {/* Here you see some examples of moveBy */}
217 |         <Button onPress={() => zoomableViewRef.current!.moveBy(-30, 0)} title="⬅️" />
218 |         <Button onPress={() => zoomableViewRef.current!.moveBy(30, 0)} title="➡️" />
219 |         <Button onPress={() => zoomableViewRef.current!.moveBy(0, -30)} title="⬆️" />
220 |         <Button onPress={() => zoomableViewRef.current!.moveBy(0, 30)} title="⬇️" />
221 | 
222 |         {/* Here you see an example of moveTo */}
223 |         <Button onPress={() => zoomableViewRef.current!.moveTo(300, 200)} title="Move to" />
224 |       </View>
225 | 
226 |       <View style={styles.controlWrapperRight}>
227 |         {/* Here you see examples of zoomBy */}
228 |         <Button onPress={() => zoomableViewRef.current!.zoomBy(-0.1)} title="-" />
229 |         <Button onPress={() => zoomableViewRef.current!.zoomBy(0.1)} title="+" />
230 | 
231 |         {/* Here you see an example of zoomTo */}
232 |         <Button onPress={() => zoomableViewRef.current!.zoomTo(1)} title="reset" />
233 |       </View>
234 |     </View>
235 |   );
236 | }
237 | 
238 | ```
239 | 
240 | 
241 | #### Pan Responder Hooks
242 | 
243 | Sometimes you need to change deeper level behavior, so we prepared these panresponder hooks for you.
244 | 
245 | | name | description | params | expected return |
246 | | ---- | ----------- | ------ | --------------- |
247 | | onStartShouldSetPanResponder | description | event, gestureState, zoomableViewEventObject, baseComponentResult | {boolean} whether panresponder should be set or not |
248 | | onMoveShouldSetPanResponder | description | event, gestureState, zoomableViewEventObject, baseComponentResult | {boolean} whether panresponder should be set or not |
249 | | onPanResponderGrant | description | event, gestureState, zoomableViewEventObject | void |
250 | | onPanResponderEnd | Will be called when gesture ends (more accurately, on pan responder "release") | event, gestureState, zoomableViewEventObject | void |
251 | | onPanResponderTerminate | Will be called when the gesture is force-interrupted by another handler | event, gestureState, zoomableViewEventObject | void |
252 | | 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 |
253 | | onPanResponderMove | Will be called when user moves while touching | event, gestureState, zoomableViewEventObject | void |
254 | 
255 | ### zoomableViewEventObject
256 | 
257 | The zoomableViewEventObject object is attached to every event and represents the current state of our zoomable view.
258 | ```
259 |    {
260 |       zoomLevel: number,         // current level of zooming (usually a value between minZoom and maxZoom)
261 |       offsetX: number,           // current offset left
262 |       offsetY: number,           // current offset top
263 |       lastZoomLevel: number,     // last zoom level (before we started the movement)
264 |       lastX: number,             // last offset left (before we started the movement)
265 |       lastY: number,             // last offset top (before we started the movement)
266 |       lastMovePinch: boolean,    // information if a movement is going on
267 |       distanceBottom: number,    // view offset from bottom border
268 |       distanceLeft: number,      // view offset from left border
269 |       distanceRight: number,     // view offset from right border
270 |       distanceTop: number,       // view offset from bottom border
271 |       lastMovePinch: boolean,    // boolean, that states if this movement was a pinch movement
272 |       originalHeight: number,    // original height of the outer view
273 |       originalWidth: number,     // original width of the outer view
274 |       captureEvent: boolean,     // should the panresponder be taken away from parent component (used for react-native modals) 
275 |    }
276 | ```
277 | 
278 | ## Special configurations
279 | 
280 | ### React Native Modal
281 | 
282 | To make this work with react-native modals, you have to set the `captureEvent` prop to `true`.
283 | Otherwise the modal will stop the pinch2zoom event and it will not work.
284 | 
285 | 
286 | ## TODO
287 | 
288 | * Improve documentation
289 | * Add examples for more complex scenarios (react-native-zoomable-view in a swiper)
290 | * TESTS
291 | 
292 | ## Contributing
293 | 
294 | A lot of people are now using react-native-zoomable-view and there are always smaller things to improve and change.<br />
295 | Therefore any contributions are more than welcome! <3<br /><br />
296 | 
297 | Are you looking to help out and improve this project?<br />
298 | Either submit Pull requests with awesome changes or reach out to me on Twitter: https://twitter.com/SimonEritsch<br />
299 | Helping hands are always appreciated! :)
300 | 
301 | ### How to contribute
302 | 
303 | Just clone the example repository: https://github.com/DuDigital/react-native-zoomable-view-example
304 | 
305 | Adjust the package in the typescript files in `node_modules/@dudigital/react-native-zoomable-view` folder, while running `npm transpile` **in that folder** as well.
306 | (the transpile command will make sure to transpile the typescript code into javascript)
307 | 
308 | // We definitely need a better process here. If you have any ideas - please open an issue or PR about a solution. ;)
309 | // We would really appreciate it
310 | 


--------------------------------------------------------------------------------
/index.d.ts:
--------------------------------------------------------------------------------
1 | import ReactNativeZoomableView from './ReactNativeZoomableView';
2 | import ReactNativeZoomableViewWithGestures from './ReactNativeZoomableViewWithGestures';
3 | 
4 | export { ReactNativeZoomableView, ReactNativeZoomableViewWithGestures };
5 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DuDigital/react-native-zoomable-view/0507c9ebc639cb583ea64caaab4ad2b71651b2fd/index.js


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@dudigital/react-native-zoomable-view",
 3 |   "version": "1.1.4",
 4 |   "description": "A view component for react-native with pinch to zoom, tap to move and double tap to zoom capability.",
 5 |   "main": "dist/index.js",
 6 |   "scripts": {
 7 |     "build": "rollup -c",
 8 |     "start": "rollup -c -w",
 9 |     "transpile": "rollup -c -w",
10 |     "test": "echo \"Error: no test specified\" && exit 1",
11 |     "format": "prettier --write \"src/**/*.ts\" \"src/**/*.tsx\"",
12 |     "version": "npm run format && git add -A src",
13 |     "postversion": "git push && git push --tags",
14 |     "prepare": "npm run build"
15 |   },
16 |   "files": [
17 |     "dist",
18 |     "src"
19 |   ],
20 |   "repository": {
21 |     "type": "git",
22 |     "url": "git+https://github.com/DuDigital/react-native-zoomable-view.git"
23 |   },
24 |   "keywords": [
25 |     "react-native",
26 |     "react-component",
27 |     "ios",
28 |     "android",
29 |     "pinch-to-zoom",
30 |     "pinch",
31 |     "mobile",
32 |     "native",
33 |     "component",
34 |     "view",
35 |     "zoom",
36 |     "zoomable",
37 |     "double",
38 |     "tap"
39 |   ],
40 |   "author": "Simon Auer",
41 |   "license": "MIT",
42 |   "bugs": {
43 |     "url": "https://github.com/DuDigital/react-native-zoomable-view/issues"
44 |   },
45 |   "homepage": "https://github.com/DuDigital/react-native-zoomable-view#readme",
46 |   "types": "typings/index.d.ts",
47 |   "dependencies": {
48 |     "prop-types": "^15.7.2",
49 |     "react-native": ">=0.54.0"
50 |   },
51 |   "devDependencies": {
52 |     "@types/react": ">=16.8.0",
53 |     "@types/react-native": "^0.64.10",
54 |     "babel-core": "^7.0.0-bridge.0",
55 |     "babel-runtime": "^6.26.0",
56 |     "prettier": "^2.3.1",
57 |     "rollup": "^2.51.1",
58 |     "rollup-plugin-typescript2": "^0.30.0",
59 |     "tslint": "^6.1.3",
60 |     "tslint-config-prettier": "^1.18.0",
61 |     "typescript": "^4.3.2"
62 |   },
63 |   "peerDependencies": {
64 |     "react": ">=16.8.0",
65 |     "react-native": ">=0.54.0"
66 |   }
67 | }
68 | 


--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
 1 | import typescript from 'rollup-plugin-typescript2'
 2 | import pkg from './package.json'
 3 | 
 4 | // continued
 5 | export default {
 6 |     input: 'src/index.tsx',
 7 |     output: [
 8 |       {
 9 |         // file: pkg.main,
10 |         dir: 'dist',
11 |         format: 'cjs',
12 |         exports: 'named',
13 |         sourcemap: true,
14 |         strict: false
15 |       }
16 |     ],
17 |     plugins: [
18 |       typescript({ objectHashIgnoreUnknownHack: true })
19 |     ],
20 |     external: ['react', 'react-dom']
21 | }


--------------------------------------------------------------------------------
/src/ReactNativeZoomableView.tsx:
--------------------------------------------------------------------------------
  1 | import {
  2 |   ReactNativeZoomableViewProps,
  3 |   ReactNativeZoomableViewState,
  4 |   ZoomableViewEvent,
  5 | } from '@dudigital/react-native-zoomable-view';
  6 | import React, { Component } from 'react';
  7 | import { View, StyleSheet, PanResponder } from 'react-native';
  8 | 
  9 | const initialState = {
 10 |   lastZoomLevel: 1,
 11 |   offsetX: 0,
 12 |   offsetY: 0,
 13 |   lastX: 0,
 14 |   lastY: 0,
 15 |   lastMovePinch: false,
 16 |   originalWidth: null,
 17 |   originalHeight: null,
 18 | };
 19 | 
 20 | class ReactNativeZoomableView extends Component<ReactNativeZoomableViewProps, ReactNativeZoomableViewState> {
 21 |   gestureHandlers: any;
 22 |   distance: number;
 23 |   isDistanceSet: boolean;
 24 |   lastPressHolder: number;
 25 |   gestureType: 'pinch' | 'shift' | 'null';
 26 |   contextState = {
 27 |     distanceLeft: 0,
 28 |     distanceRight: 0,
 29 |     distanceTop: 0,
 30 |     distanceBottom: 0,
 31 |   };
 32 | 
 33 |   static defaultProps = {
 34 |     zoomEnabled: true,
 35 |     initialZoom: 1,
 36 |     initialOffsetX: 0,
 37 |     initialOffsetY: 0,
 38 |     maxZoom: 1.5,
 39 |     minZoom: 0.5,
 40 |     pinchToZoomInSensitivity: 3,
 41 |     pinchToZoomOutSensitivity: 1,
 42 |     zoomCenteringLevelDistance: 0.5,
 43 |     movementSensibility: 1.9,
 44 |     doubleTapDelay: 300,
 45 |     bindToBorders: true,
 46 |     zoomStep: 0.5,
 47 |     onLongPress: null,
 48 |     longPressDuration: 700,
 49 |     captureEvent: false,
 50 |   };
 51 | 
 52 |   constructor(props) {
 53 |     super(props);
 54 | 
 55 |     this.gestureHandlers = PanResponder.create({
 56 |       onStartShouldSetPanResponder: this._handleStartShouldSetPanResponder,
 57 |       onMoveShouldSetPanResponder: this._handleMoveShouldSetPanResponder,
 58 |       onPanResponderGrant: this._handlePanResponderGrant,
 59 |       onPanResponderMove: this._handlePanResponderMove,
 60 |       onPanResponderRelease: this._handlePanResponderEnd,
 61 |       onPanResponderTerminate: props.onPanResponderTerminate,
 62 |       onPanResponderTerminationRequest: props.onPanResponderTerminationRequest ?? ((evt) => false),
 63 |       onShouldBlockNativeResponder: (evt) => false,
 64 |     });
 65 | 
 66 |     this.state = {
 67 |       ...initialState,
 68 |       zoomLevel: props.initialZoom,
 69 |       lastZoomLevel: props.initialZoom || initialState.lastZoomLevel,
 70 |       offsetX: props.initialOffsetX,
 71 |       offsetY: props.initialOffsetY,
 72 |     };
 73 | 
 74 |     this.distance = 150;
 75 |     this.isDistanceSet = true;
 76 | 
 77 |     this.gestureType = null;
 78 | 
 79 |     this.contextState = {
 80 |       distanceLeft: 0,
 81 |       distanceRight: 0,
 82 |       distanceTop: 0,
 83 |       distanceBottom: 0,
 84 |     };
 85 |   }
 86 | 
 87 |   componentDidUpdate(prevProps) {
 88 |     const { zoomEnabled, initialZoom } = this.props;
 89 |     if (prevProps.zoomEnabled && !zoomEnabled) {
 90 |       this.setState({
 91 |         zoomLevel: initialZoom,
 92 |         ...initialState,
 93 |       });
 94 |     }
 95 |   }
 96 | 
 97 |   /**
 98 |    * Last press time (used to evaluate whether user double tapped)
 99 |    * @type {number}
100 |    */
101 |   longPressTimeout = null;
102 | 
103 |   /**
104 |    * Current position of zoom center
105 |    * @type { x: number, y: number }
106 |    */
107 |   pinchZoomPosition = null;
108 | 
109 |   /**
110 |    * Returns additional information about components current state for external event hooks
111 |    *
112 |    * @returns {{}}
113 |    * @private
114 |    */
115 |   _getZoomableViewEventObject(overwriteObj = {}): ZoomableViewEvent {
116 |     return {
117 |       ...this.state,
118 |       ...this.contextState,
119 |       ...overwriteObj,
120 |     } as ZoomableViewEvent;
121 |   }
122 | 
123 |   /**
124 |    * Get the original box dimensions and save them for later use.
125 |    * (They will be used to calculate boxBorders)
126 |    *
127 |    * @param layoutEvent
128 |    * @private
129 |    */
130 |   _getBoxDimensions = (layoutEvent) => {
131 |     const { x, y, height, width } = layoutEvent.nativeEvent.layout;
132 | 
133 |     this.setState({
134 |       originalWidth: width,
135 |       originalHeight: height,
136 |     });
137 |   };
138 | 
139 |   /**
140 |    * Handles the start of touch events and checks for taps
141 |    *
142 |    * @param e
143 |    * @param gestureState
144 |    * @returns {boolean}
145 |    *
146 |    * @private
147 |    */
148 |   _handleStartShouldSetPanResponder = (e, gestureState) => {
149 |     this._doubleTapCheck(e, gestureState);
150 | 
151 |     if (this.props.onStartShouldSetPanResponder) {
152 |       this.props.onStartShouldSetPanResponder(e, gestureState, this._getZoomableViewEventObject(), false);
153 |     }
154 | 
155 |     return this.props.captureEvent;
156 |   };
157 | 
158 |   /**
159 |    * Checks if the movement responder should be triggered
160 |    *
161 |    * @param e
162 |    * @param gestureState
163 |    * @returns {Boolean|boolean}
164 |    */
165 |   _handleMoveShouldSetPanResponder = (e, gestureState) => {
166 |     let baseComponentResult =
167 |       this.props.zoomEnabled &&
168 |       (Math.abs(gestureState.dx) > 2 || Math.abs(gestureState.dy) > 2 || gestureState.numberActiveTouches === 2);
169 | 
170 |     if (this.props.onMoveShouldSetPanResponder) {
171 |       baseComponentResult = this.props.onMoveShouldSetPanResponder(
172 |         e,
173 |         gestureState,
174 |         this._getZoomableViewEventObject(),
175 |         baseComponentResult,
176 |       );
177 |     }
178 | 
179 |     return baseComponentResult;
180 |   };
181 | 
182 |   /**
183 |    * Calculates pinch distance
184 |    *
185 |    * @param e
186 |    * @param gestureState
187 |    * @private
188 |    */
189 |   _handlePanResponderGrant = (e, gestureState) => {
190 |     this.isDistanceSet = false;
191 | 
192 |     if (gestureState.numberActiveTouches === 2) {
193 |       let dx = Math.abs(e.nativeEvent.touches[0].pageX - e.nativeEvent.touches[1].pageX);
194 |       let dy = Math.abs(e.nativeEvent.touches[0].pageY - e.nativeEvent.touches[1].pageY);
195 | 
196 |       let distant = Math.sqrt(dx * dx + dy * dy);
197 |       this.distance = distant;
198 |       this.isDistanceSet = true;
199 |     }
200 | 
201 |     if (this.props.onLongPress) {
202 |       this.longPressTimeout = setTimeout(() => {
203 |         if (this.props.onLongPress) {
204 |           this.props.onLongPress(e, gestureState, this._getZoomableViewEventObject());
205 |           this.longPressTimeout = null;
206 |         }
207 |       }, this.props.longPressDuration);
208 |     }
209 | 
210 |     if (this.props.onPanResponderGrant) {
211 |       this.props.onPanResponderGrant(e, gestureState, this._getZoomableViewEventObject());
212 |     }
213 |   };
214 | 
215 |   /**
216 |    * Handles the end of touch events
217 |    *
218 |    * @param e
219 |    * @param gestureState
220 |    *
221 |    * @private
222 |    */
223 |   _handlePanResponderEnd = (e, gestureState) => {
224 |     this.setState({
225 |       lastX: this.state.offsetX,
226 |       lastY: this.state.offsetY,
227 |       lastZoomLevel: this.state.zoomLevel,
228 |     });
229 | 
230 |     if (this.longPressTimeout) {
231 |       clearTimeout(this.longPressTimeout);
232 |       this.longPressTimeout = null;
233 |     }
234 | 
235 |     if (this.props.onPanResponderEnd) {
236 |       this.props.onPanResponderEnd(e, gestureState, this._getZoomableViewEventObject());
237 |     }
238 | 
239 |     if (this.gestureType === 'pinch') {
240 |       this.pinchZoomPosition = null;
241 |       if (this.props.onZoomEnd) {
242 |         this.props.onZoomEnd(e, gestureState, this._getZoomableViewEventObject());
243 |       }
244 |     } else if (this.gestureType === 'shift') {
245 |       if (this.props.onShiftingEnd) {
246 |         this.props.onShiftingEnd(e, gestureState, this._getZoomableViewEventObject());
247 |       }
248 |     }
249 | 
250 |     this.gestureType = null;
251 |   };
252 | 
253 |   /**
254 |    * Takes a single offset value and calculates the correct offset value within our view to make
255 |    *
256 |    * @param {'x'|'y'} axis
257 |    * @param offsetValue
258 |    * @param containerSize
259 |    * @param elementSize
260 |    * @param zoomLevel
261 |    *
262 |    * @returns {number}
263 |    */
264 |   _getBoundOffsetValue(
265 |     axis: 'x' | 'y',
266 |     offsetValue: number,
267 |     containerSize: number,
268 |     elementSize: number,
269 |     zoomLevel: number,
270 |   ) {
271 |     const zoomLevelOffsetValue = zoomLevel * offsetValue;
272 | 
273 |     const containerToScaledElementRatioSub = 1 - containerSize / elementSize;
274 |     const halfLengthPlusScaledHalf = 0.5 + 0.5 / zoomLevel;
275 |     const startBorder = containerSize * containerToScaledElementRatioSub * halfLengthPlusScaledHalf;
276 |     const endBorder = (containerSize + startBorder - containerSize) * -1;
277 | 
278 |     // calculate distance to start and end borders
279 |     const distanceToStart = offsetValue - startBorder;
280 |     const distanceToEnd = (offsetValue + startBorder) * -1;
281 | 
282 |     // set context for callback events
283 |     this._setContextStateDistances(axis, distanceToStart, distanceToEnd);
284 | 
285 |     // if both sides (before and after the element) have a positive distance
286 |     // => (our zoomed content is smaller than the frame)
287 |     // => so center it
288 |     if (containerSize > elementSize) {
289 |       return containerSize / 2 - elementSize / 2 / zoomLevel;
290 |     }
291 | 
292 |     // if everything above failed
293 |     // => (one side is outside of the borders)
294 |     // => find out which one it is and make sure it is 0
295 |     if (distanceToStart > 0) {
296 |       return startBorder;
297 |     }
298 | 
299 |     // if there is distance to the end border
300 |     // => (it is outside of the box)
301 |     // => adjust offset to make sure it stays within
302 |     if (distanceToEnd > 0) {
303 |       return endBorder;
304 |     }
305 | 
306 |     // if everything above failed
307 |     // => (everything is within borders)
308 |     // => just return the original offset value
309 |     return offsetValue;
310 |   }
311 | 
312 |   /**
313 |    * Sets the distance to borders for callback events
314 |    *
315 |    * @param axis
316 |    * @param distanceToStart
317 |    * @param distanceToEnd
318 |    * @private
319 |    */
320 |   _setContextStateDistances(axis: 'x' | 'y', distanceToStart: number, distanceToEnd: number) {
321 |     if (axis === 'x') {
322 |       this.contextState.distanceLeft = distanceToStart;
323 |       this.contextState.distanceRight = distanceToEnd;
324 |       return;
325 |     }
326 | 
327 |     this.contextState.distanceTop = distanceToStart;
328 |     this.contextState.distanceBottom = distanceToEnd;
329 |   }
330 | 
331 |   /**
332 |    * Takes a change object (that is going to be used in setState) and makes sure offsetX and
333 |    * offsetY are within our view borders. If that is not the case, they will be corrected.
334 |    *
335 |    * @param changeObj the object that is going to be modified.
336 |    *    Needs to contain at least the following elements:
337 |    *    {
338 |    *      zoomLevel: numeric,
339 |    *      offsetX: numeric,
340 |    *      offsetY: numeric,
341 |    *    }
342 |    * @private
343 |    */
344 |   _bindOffsetValuesToBorders(changeObj, bindToBorders = null) {
345 |     // if bindToBorders is disabled -> nothing do here
346 |     if (bindToBorders === false || (bindToBorders === null && !this.props.bindToBorders)) {
347 |       return changeObj;
348 |     }
349 | 
350 |     const { originalWidth, originalHeight } = this.state;
351 | 
352 |     const currentElementWidth = originalWidth * changeObj.zoomLevel;
353 |     const currentElementHeight = originalHeight * changeObj.zoomLevel;
354 | 
355 |     // make sure that view doesn't go out of borders
356 |     const offsetXBound = this._getBoundOffsetValue(
357 |       'x',
358 |       changeObj.offsetX,
359 |       originalWidth,
360 |       currentElementWidth,
361 |       changeObj.zoomLevel,
362 |     );
363 |     changeObj.offsetX = offsetXBound;
364 | 
365 |     const offsetYBound = this._getBoundOffsetValue(
366 |       'y',
367 |       changeObj.offsetY,
368 |       originalHeight,
369 |       currentElementHeight,
370 |       changeObj.zoomLevel,
371 |     );
372 |     changeObj.offsetY = offsetYBound;
373 | 
374 |     return changeObj;
375 |   }
376 | 
377 |   /**
378 |    * Handles the acutal movement of our pan responder
379 |    *
380 |    * @param e
381 |    * @param gestureState
382 |    *
383 |    * @private
384 |    */
385 |   _handlePanResponderMove = (e, gestureState) => {
386 |     if (this.props.onPanResponderMove) {
387 |       if (this.props.onPanResponderMove(e, gestureState, this._getZoomableViewEventObject())) {
388 |         return false;
389 |       }
390 |     }
391 | 
392 |     if (gestureState.numberActiveTouches === 2) {
393 |       if (this.longPressTimeout) {
394 |         clearTimeout(this.longPressTimeout);
395 |         this.longPressTimeout = null;
396 |       }
397 | 
398 |       if (!this.isDistanceSet) {
399 |         this._handlePanResponderGrant(e, gestureState);
400 |       }
401 | 
402 |       this.gestureType = 'pinch';
403 |       this._handlePinching(e, gestureState);
404 |     } else if (gestureState.numberActiveTouches === 1) {
405 |       if (this.longPressTimeout && (Math.abs(gestureState.dx) > 5 || Math.abs(gestureState.dy) > 5)) {
406 |         clearTimeout(this.longPressTimeout);
407 |         this.longPressTimeout = null;
408 |       }
409 | 
410 |       if (this.gestureType !== 'pinch') {
411 |         this.gestureType = 'shift';
412 |       }
413 |       this._handleMovement(e, gestureState);
414 |     }
415 |   };
416 | 
417 |   /**
418 |    * Handles the pinch movement and zooming
419 |    *
420 |    * @param e
421 |    * @param gestureState
422 |    *
423 |    * @private
424 |    */
425 |   _handlePinching = (e, gestureState) => {
426 |     const { maxZoom, minZoom, zoomCenteringLevelDistance, pinchToZoomInSensitivity, pinchToZoomOutSensitivity } =
427 |       this.props;
428 | 
429 |     let dx = Math.abs(e.nativeEvent.touches[0].pageX - e.nativeEvent.touches[1].pageX);
430 |     let dy = Math.abs(e.nativeEvent.touches[0].pageY - e.nativeEvent.touches[1].pageY);
431 |     let distant = Math.sqrt(dx * dx + dy * dy);
432 | 
433 |     if (this.props.onZoomBefore) {
434 |       if (this.props.onZoomBefore(e, gestureState, this._getZoomableViewEventObject())) {
435 |         return false;
436 |       }
437 |     }
438 | 
439 |     // define the new zoom level and take zoom level sensitivity into consideration
440 |     const zoomChangeFromStartOfPinch = distant / this.distance;
441 |     const pinchToZoomSensitivity =
442 |       zoomChangeFromStartOfPinch < 1 ? pinchToZoomOutSensitivity : pinchToZoomInSensitivity;
443 |     let zoomLevel =
444 |       (zoomChangeFromStartOfPinch * this.state.lastZoomLevel + this.state.lastZoomLevel * pinchToZoomSensitivity) /
445 |       (pinchToZoomSensitivity + 1);
446 | 
447 |     // make sure max and min zoom levels are respected
448 |     if (maxZoom !== null && zoomLevel > maxZoom) {
449 |       zoomLevel = maxZoom;
450 |     }
451 | 
452 |     if (zoomLevel < minZoom) {
453 |       zoomLevel = minZoom;
454 |     }
455 | 
456 |     // only use the first position we get by pinching, or the screen will "wobble" during zoom action
457 |     if (this.pinchZoomPosition === null) {
458 |       const pinchToZoomCenterX = Math.min(e.nativeEvent.touches[0].pageX, e.nativeEvent.touches[1].pageX) + dx / 2;
459 |       const pinchToZoomCenterY = Math.min(e.nativeEvent.touches[0].pageY, e.nativeEvent.touches[1].pageY) + dy / 2;
460 | 
461 |       this.pinchZoomPosition = this._getOffsetAdjustedPosition(pinchToZoomCenterX, pinchToZoomCenterY);
462 |     }
463 | 
464 |     // make sure we shift the layer slowly during our zoom movement
465 |     const zoomStage = Math.abs(zoomLevel - this.state.lastZoomLevel) / zoomCenteringLevelDistance;
466 | 
467 |     const ratioOffsetX = this.state.lastX + zoomStage * this.pinchZoomPosition.x;
468 |     const ratioOffsetY = this.state.lastY + zoomStage * this.pinchZoomPosition.y;
469 | 
470 |     // define the changeObject and make sure the offset values are bound to view
471 |     const changeStateObj = this._bindOffsetValuesToBorders(
472 |       {
473 |         zoomLevel,
474 |         lastMovePinch: true,
475 |         offsetX: ratioOffsetX,
476 |         offsetY: ratioOffsetY,
477 |       },
478 |       null,
479 |     );
480 | 
481 |     this.setState(changeStateObj, () => {
482 |       if (this.props.onZoomAfter) {
483 |         this.props.onZoomAfter(e, gestureState, this._getZoomableViewEventObject());
484 |       }
485 |     });
486 |   };
487 | 
488 |   /**
489 |    * Handles movement by tap and move
490 |    *
491 |    * @param e
492 |    * @param gestureState
493 |    *
494 |    * @private
495 |    */
496 |   _handleMovement = (e, gestureState) => {
497 |     const { movementSensibility } = this.props;
498 | 
499 |     // make sure not to accidentally move after pinch to zoom
500 |     if (this.pinchZoomPosition) {
501 |       return;
502 |     }
503 | 
504 |     let offsetX = this.state.lastX + gestureState.dx / this.state.zoomLevel / movementSensibility;
505 |     let offsetY = this.state.lastY + gestureState.dy / this.state.zoomLevel / movementSensibility;
506 | 
507 |     this._setNewOffsetPosition(offsetX, offsetY);
508 |   };
509 | 
510 |   /**
511 |    * Set the state to offset moved
512 |    *
513 |    * @param {number} newOffsetX
514 |    * @param {number} newOffsetY
515 |    * @param {bool} bindToBorders
516 |    * @param {bool} updateLastCoords should the last coordinates be updated as well?
517 |    * @param {() => void)} callbk
518 |    * @returns
519 |    */
520 |   _setNewOffsetPosition = (
521 |     newOffsetX: number,
522 |     newOffsetY: number,
523 |     bindToBorders = true,
524 |     updateLastCoords = false,
525 |     callbk = null,
526 |   ) => {
527 |     const { onShiftingBefore, onShiftingAfter } = this.props;
528 | 
529 |     if (onShiftingBefore) {
530 |       if (onShiftingBefore(null, null, this._getZoomableViewEventObject())) {
531 |         return false;
532 |       }
533 |     }
534 | 
535 |     const changeStateObj = this._bindOffsetValuesToBorders(
536 |       {
537 |         lastMovePinch: false,
538 |         zoomLevel: this.state.zoomLevel,
539 |         offsetX: newOffsetX,
540 |         offsetY: newOffsetY,
541 |       },
542 |       bindToBorders,
543 |     );
544 | 
545 |     // if we want to update last coords as well -> do that
546 |     if (updateLastCoords) {
547 |       changeStateObj.lastX = changeStateObj.offsetX;
548 |       changeStateObj.lastY = changeStateObj.offsetY;
549 |     }
550 | 
551 |     this.setState(changeStateObj, () => {
552 |       if (callbk) {
553 |         callbk();
554 |       }
555 | 
556 |       if (onShiftingAfter) {
557 |         if (onShiftingAfter(null, null, this._getZoomableViewEventObject())) {
558 |           return false;
559 |         }
560 |       }
561 |     });
562 |   };
563 | 
564 |   /**
565 |    * Wraps the check for double tap
566 |    *
567 |    * @param e
568 |    * @param gestureState
569 |    *
570 |    * @private
571 |    */
572 |   _doubleTapCheck = (e, gestureState) => {
573 |     const now = new Date().getTime();
574 | 
575 |     if (this.lastPressHolder && now - this.lastPressHolder < this.props.doubleTapDelay) {
576 |       delete this.lastPressHolder;
577 |       this._handleDoubleTap(e, gestureState);
578 |     } else {
579 |       this.lastPressHolder = now;
580 |     }
581 |   };
582 | 
583 |   /**
584 |    * Handles the double tap event
585 |    *
586 |    * @param event
587 |    * @param gestureState
588 |    *
589 |    * @private
590 |    */
591 |   _handleDoubleTap(e, gestureState) {
592 |     const { onDoubleTapBefore, onDoubleTapAfter, doubleTapZoomToCenter } = this.props;
593 | 
594 |     // ignore more than 2 touches
595 |     if (gestureState.numberActiveTouches > 1 || !this.props.zoomEnabled) {
596 |       return;
597 |     }
598 | 
599 |     if (onDoubleTapBefore) {
600 |       onDoubleTapBefore(e, gestureState, this._getZoomableViewEventObject());
601 |     }
602 | 
603 |     const nextZoomStep = this._getNextZoomStep();
604 | 
605 |     // define new zoom position coordinates
606 |     const zoomPositionCoordinates = {
607 |       x: e.nativeEvent.locationX,
608 |       y: e.nativeEvent.locationY,
609 |     };
610 | 
611 |     // if doubleTapZoomToCenter enabled -> always zoom to center instead
612 |     if (doubleTapZoomToCenter) {
613 |       zoomPositionCoordinates.x = 0;
614 |       zoomPositionCoordinates.y = 0;
615 |     }
616 | 
617 |     this._zoomToLocation(zoomPositionCoordinates.x, zoomPositionCoordinates.y, nextZoomStep, true, () => {
618 |       if (onDoubleTapAfter) {
619 |         onDoubleTapAfter(
620 |           e,
621 |           gestureState,
622 |           this._getZoomableViewEventObject({
623 |             zoomLevel: nextZoomStep,
624 |           }),
625 |         );
626 |       }
627 |     });
628 |   }
629 | 
630 |   /**
631 |    * Returns the next zoom step based on current step and zoomStep property.
632 |    * If we are zoomed all the way in -> return to initialzoom
633 |    *
634 |    * @returns {*}
635 |    */
636 |   _getNextZoomStep() {
637 |     const { zoomStep, maxZoom, initialZoom } = this.props;
638 |     const { zoomLevel } = this.state;
639 | 
640 |     if (zoomLevel === maxZoom) {
641 |       return initialZoom;
642 |     }
643 | 
644 |     let nextZoomStep = zoomLevel + zoomLevel * zoomStep;
645 |     if (maxZoom !== null && nextZoomStep > maxZoom) {
646 |       return maxZoom;
647 |     }
648 | 
649 |     return nextZoomStep;
650 |   }
651 | 
652 |   /**
653 |    * Converts touch events x and y coordinates into the context of our element center
654 |    *
655 |    * @param x
656 |    * @param y
657 |    * @returns {{x: number, y: number}}
658 |    *
659 |    * @private
660 |    */
661 |   _getOffsetAdjustedPosition(x: number, y: number) {
662 |     const { originalWidth, originalHeight } = this.state;
663 | 
664 |     if (x === 0 && y === 0) {
665 |       return {
666 |         x: 0,
667 |         y: 0,
668 |       };
669 |     }
670 | 
671 |     const returnObj = {
672 |       x: -x + originalWidth / 2,
673 |       y: -y + originalHeight / 2,
674 |     };
675 | 
676 |     return returnObj;
677 |   }
678 | 
679 |   /**
680 |    * Zooms to a specific location in our view
681 |    *
682 |    * @param x
683 |    * @param y
684 |    * @param newZoomLevel
685 |    * @param bindToBorders
686 |    * @param callbk
687 |    *
688 |    * @private
689 |    */
690 |   _zoomToLocation(x: number, y: number, newZoomLevel: number, bindToBorders = true, callbk = null) {
691 |     const offsetAdjustedPosition = this._getOffsetAdjustedPosition(x, y);
692 | 
693 |     if (this.props.onZoomBefore) {
694 |       this.props.onZoomBefore(null, null, this._getZoomableViewEventObject());
695 |     }
696 | 
697 |     // define the changeObject and make sure the offset values are bound to view
698 |     const changeStateObj = this._bindOffsetValuesToBorders(
699 |       {
700 |         zoomLevel: newZoomLevel,
701 |         offsetX: offsetAdjustedPosition.x,
702 |         offsetY: offsetAdjustedPosition.y,
703 |         lastZoomLevel: newZoomLevel,
704 |         lastX: offsetAdjustedPosition.x,
705 |         lastY: offsetAdjustedPosition.y,
706 |       },
707 |       bindToBorders,
708 |     );
709 | 
710 |     this.setState(changeStateObj, () => {
711 |       if (callbk) {
712 |         callbk();
713 |       }
714 | 
715 |       if (this.props.onZoomAfter) {
716 |         this.props.onZoomAfter(null, null, this._getZoomableViewEventObject());
717 |       }
718 |     });
719 |   }
720 | 
721 |   /**
722 |    * Zooms to a specificied zoom level.
723 |    * Returns a promise if everything was updated and a boolean, whether it could be updated or if it exceeded the min/max zoom limits.
724 |    *
725 |    * @param {number} newZoomLevel
726 |    * @param {bool} bindToBorders
727 |    *
728 |    * @return {Promise<bool>}
729 |    */
730 |   zoomTo(newZoomLevel: number, bindToBorders = true): Promise<boolean> {
731 |     return new Promise((resolve) => {
732 |       // if we would go out of our min/max limits -> abort
733 |       if (newZoomLevel >= this.props.maxZoom || newZoomLevel <= this.props.minZoom) {
734 |         resolve(false);
735 |         return;
736 |       }
737 | 
738 |       this._zoomToLocation(0, 0, newZoomLevel, bindToBorders, () => {
739 |         resolve(true);
740 |       });
741 |     });
742 |   }
743 | 
744 |   /**
745 |    * Zooms in or out by a specificied change level
746 |    * Use a positive number for `zoomLevelChange` to zoom in
747 |    * Use a negative number for `zoomLevelChange` to zoom out
748 |    *
749 |    * Returns a promise if everything was updated and a boolean, whether it could be updated or if it exceeded the min/max zoom limits.
750 |    *
751 |    * @param {number} newZoomLevel
752 |    * @param {bool} bindToBorders
753 |    *
754 |    * @return {Promise<bool>}
755 |    */
756 |   zoomBy(zoomLevelChange: number = null, bindToBorders = true): Promise<boolean> {
757 |     // if no zoom level Change given -> just use zoom step
758 |     if (!zoomLevelChange) {
759 |       zoomLevelChange = this.props.zoomStep;
760 |     }
761 | 
762 |     return this.zoomTo(this.state.zoomLevel + zoomLevelChange, bindToBorders);
763 |   }
764 | 
765 |   /**
766 |    * Moves the zoomed view to a specified position
767 |    * Returns a promise when finished
768 |    *
769 |    * @param {number} newOffsetX the new position we want to move it to (x-axis)
770 |    * @param {number} newOffsetY the new position we want to move it to (y-axis)
771 |    * @param {bool} bindToBorders
772 |    *
773 |    * @return {Promise<bool>}
774 |    */
775 |   moveTo(newOffsetX: number, newOffsetY: number, bindToBorders = true): Promise<void> {
776 |     const { zoomLevel, originalWidth, originalHeight } = this.state;
777 | 
778 |     let offsetX = (newOffsetX - originalWidth / 2) / zoomLevel;
779 |     let offsetY = (newOffsetY - originalHeight / 2) / zoomLevel;
780 | 
781 |     return new Promise((resolve) => {
782 |       this._setNewOffsetPosition(-offsetX, -offsetY, bindToBorders, true, () => {
783 |         resolve();
784 |       });
785 |     });
786 |   }
787 | 
788 |   /**
789 |    * Moves the zoomed view by a certain amount.
790 |    *
791 |    * Returns a promise when finished
792 |    *
793 |    * @param {number} offsetChangeX the amount we want to move the offset by (x-axis)
794 |    * @param {number} offsetChangeXY the amount we want to move the offset by (y-axis)
795 |    * @param {bool} bindToBorders
796 |    *
797 |    * @return {Promise<bool>}
798 |    */
799 |   moveBy(offsetChangeX: number, offsetChangeY: number, bindToBorders = true): Promise<void> {
800 |     const { zoomLevel, lastX, lastY } = this.state;
801 | 
802 |     let offsetX = lastX - offsetChangeX / zoomLevel;
803 |     let offsetY = lastY - offsetChangeY / zoomLevel;
804 | 
805 |     return new Promise((resolve) => {
806 |       this._setNewOffsetPosition(offsetX, offsetY, bindToBorders, true, () => {
807 |         resolve();
808 |       });
809 |     });
810 |   }
811 | 
812 |   render() {
813 |     return (
814 |       <View style={styles.container} {...this.gestureHandlers.panHandlers} onLayout={this._getBoxDimensions}>
815 |         <View
816 |           style={[
817 |             styles.wrapper,
818 |             this.props.style,
819 |             {
820 |               transform: [
821 |                 { scale: this.state.zoomLevel },
822 |                 { scale: this.state.zoomLevel },
823 |                 { translateX: this.state.offsetX },
824 |                 { translateY: this.state.offsetY },
825 |               ],
826 |             },
827 |           ]}
828 |         >
829 |           {this.props.children}
830 |         </View>
831 |       </View>
832 |     );
833 |   }
834 | }
835 | /*
836 | TODO: delete them if not needed anymore
837 | 
838 | ReactNativeZoomableView.propTypes = {
839 |     ...View.propTypes,
840 |     zoomEnabled: PropTypes.bool,
841 |     initialZoom: PropTypes.number,
842 |     initialOffsetX: PropTypes.number,
843 |     initialOffsetY: PropTypes.number,
844 |     maxZoom: PropTypes.number,
845 |     minZoom: PropTypes.number,
846 |     pinchToZoomInSensitivity: PropTypes.number, // the level of resistance (sensitivity) to zoom in (0 - 10) - higher is less sensitive - default: 3
847 |     pinchToZoomOutSensitivity: PropTypes.number, // the level of resistance (sensitivity) to zoom out (0 - 10) - higher is less sensitive default: 1
848 |     zoomCenteringLevelDistance: PropTypes.number, // the (zoom level - 0 - maxZoom) distance for pinch to zoom actions until they are shifted on new pinch to zoom center - higher means it centeres slower - default 0.5
849 |     movementSensibility: PropTypes.number, // how resistant should shifting the view around be? (0.5 - 5) - higher is less sensitive - default: 1.9
850 |     doubleTapDelay: PropTypes.number, // how much delay will still be recognized as double press
851 |     bindToBorders: PropTypes.bool, // makes sure that the object stays within box borders
852 |     zoomStep: PropTypes.number, // how much zoom should be applied on double tap
853 |     onZoomBefore: PropTypes.func, // triggered before pinch movement
854 |     onZoomAfter: PropTypes.func, // triggered after pinch movement
855 |     onZoomEnd: PropTypes.func, // triggered after pinch movement ended
856 |     onDoubleTapBefore: PropTypes.func,
857 |     onDoubleTapAfter: PropTypes.func,
858 |     onShiftingBefore: PropTypes.func, // triggered before shift movement
859 |     onShiftingAfter: PropTypes.func, // triggered after shift movement
860 |     onShiftingEnd: PropTypes.func, // triggered after shift movement ended
861 |     onStartShouldSetPanResponder: PropTypes.func,
862 |     onMoveShouldSetPanResponder: PropTypes.func,
863 |     onPanResponderGrant: PropTypes.func,
864 |     onPanResponderEnd: PropTypes.func,
865 |     onPanResponderMove: PropTypes.func,
866 |     onLongPress: PropTypes.func,
867 |     longPressDuration: PropTypes.number
868 | };
869 | 
870 | ReactNativeZoomableView.defaultProps = {
871 |     zoomEnabled: true,
872 |     initialZoom: 1,
873 |     initialOffsetX: 0,
874 |     initialOffsetY: 0,
875 |     maxZoom: 1.5,
876 |     minZoom: 0.5,
877 |     pinchToZoomInSensitivity: 3,
878 |     pinchToZoomOutSensitivity: 1,
879 |     zoomCenteringLevelDistance: 0.5,
880 |     movementSensibility: 1.9,
881 |     doubleTapDelay: 300,
882 |     bindToBorders: true,
883 |     zoomStep: 0.5,
884 |     onLongPress: null,
885 |     longPressDuration: 700,
886 |     captureEvent: false,
887 | }; */
888 | 
889 | const styles = StyleSheet.create({
890 |   wrapper: {
891 |     flex: 1,
892 |     width: '100%',
893 |     justifyContent: 'center',
894 |   },
895 |   container: {
896 |     flex: 1,
897 |     justifyContent: 'center',
898 |     alignItems: 'center',
899 |     position: 'relative',
900 |   },
901 | });
902 | 
903 | export default ReactNativeZoomableView;
904 | 


--------------------------------------------------------------------------------
/src/ReactNativeZoomableViewWithGestures.tsx:
--------------------------------------------------------------------------------
  1 | import {
  2 |   ReactNativeZoomableViewState,
  3 |   ReactNativeZoomableViewWithGesturesProps,
  4 | } from '@dudigital/react-native-zoomable-view';
  5 | import React from 'react';
  6 | import ReactNativeZoomableView from './ReactNativeZoomableView';
  7 | 
  8 | export const swipeDirections = {
  9 |   SWIPE_UP: 'SWIPE_UP',
 10 |   SWIPE_DOWN: 'SWIPE_DOWN',
 11 |   SWIPE_LEFT: 'SWIPE_LEFT',
 12 |   SWIPE_RIGHT: 'SWIPE_RIGHT',
 13 | };
 14 | 
 15 | class ReactNativeZoomableViewWithGestures extends React.Component<
 16 |   ReactNativeZoomableViewWithGesturesProps,
 17 |   ReactNativeZoomableViewState
 18 | > {
 19 |   _onShiftingEnd = (e, gestureState, zoomableViewState) => {
 20 |     if (this.props.onShiftingEnd) {
 21 |       this.props.onShiftingEnd(e, gestureState, zoomableViewState);
 22 |     }
 23 | 
 24 |     if (!this._couldCallSwipeEvent(zoomableViewState)) {
 25 |       return;
 26 |     }
 27 | 
 28 |     const swipeDirection = this._getSwipeDirection(gestureState);
 29 |     this._triggerSwipeHandlers(swipeDirection, gestureState);
 30 |   };
 31 | 
 32 |   /**
 33 |    * Checks if current config options make it possible to process a swipe or if is not necessary
 34 |    *
 35 |    * @returns {*}
 36 |    * @private
 37 |    */
 38 |   _couldCallSwipeEvent(zoomableViewState) {
 39 |     const { onSwipe, onSwipeUp, onSwipeDown, onSwipeLeft, onSwipeRight, swipeMaxZoom, swipeMinZoom } = this.props;
 40 | 
 41 |     if (swipeMaxZoom && zoomableViewState.zoomLevel > swipeMaxZoom) {
 42 |       return false;
 43 |     }
 44 | 
 45 |     if (swipeMinZoom && zoomableViewState.zoomLevel < swipeMinZoom) {
 46 |       return false;
 47 |     }
 48 | 
 49 |     return onSwipe && onSwipeUp && onSwipeDown && onSwipeLeft && onSwipeRight;
 50 |   }
 51 | 
 52 |   /**
 53 |    * Checks the swipe and validates whether we should process it or not
 54 |    *
 55 |    * @param gestureState
 56 |    * @returns {*|boolean}
 57 |    *
 58 |    * @private
 59 |    */
 60 |   _validateSwipe(gestureState) {
 61 |     const { onSwipeUp, onSwipeDown, onSwipeLeft, onSwipeRight } = this.props;
 62 |     const swipeDirection = this._getSwipeDirection(gestureState);
 63 |     const { SWIPE_LEFT, SWIPE_RIGHT, SWIPE_UP, SWIPE_DOWN } = swipeDirections;
 64 | 
 65 |     return (
 66 |       (onSwipeUp && swipeDirection === SWIPE_UP) ||
 67 |       (onSwipeDown && swipeDirection === SWIPE_DOWN) ||
 68 |       (onSwipeLeft && swipeDirection === SWIPE_LEFT) ||
 69 |       (onSwipeRight && swipeDirection === SWIPE_RIGHT)
 70 |     );
 71 |   }
 72 | 
 73 |   /**
 74 |    * Triggers the correct directional callback
 75 |    *
 76 |    * @param swipeDirection
 77 |    * @param gestureState
 78 |    * @private
 79 |    */
 80 |   _triggerSwipeHandlers(swipeDirection, gestureState) {
 81 |     const { onSwipe, onSwipeUp, onSwipeDown, onSwipeLeft, onSwipeRight } = this.props;
 82 |     const { SWIPE_LEFT, SWIPE_RIGHT, SWIPE_UP, SWIPE_DOWN } = swipeDirections;
 83 | 
 84 |     // trigger the general onswipe callback
 85 |     if (onSwipe) {
 86 |       onSwipe(swipeDirection, gestureState);
 87 |     }
 88 | 
 89 |     // trigger the direction specific swipe callback
 90 |     switch (swipeDirection) {
 91 |       case SWIPE_LEFT:
 92 |         onSwipeLeft && onSwipeLeft(gestureState);
 93 |         break;
 94 |       case SWIPE_RIGHT:
 95 |         onSwipeRight && onSwipeRight(gestureState);
 96 |         break;
 97 |       case SWIPE_UP:
 98 |         onSwipeUp && onSwipeUp(gestureState);
 99 |         break;
100 |       case SWIPE_DOWN:
101 |         onSwipeDown && onSwipeDown(gestureState);
102 |         break;
103 |     }
104 |   }
105 | 
106 |   /**
107 |    * Calculates what direction the user swiped
108 |    *
109 |    * @param gestureState
110 |    * @returns {*}
111 |    * @private
112 |    */
113 |   _getSwipeDirection(gestureState) {
114 |     const { swipeLengthThreshold } = this.props;
115 |     const { SWIPE_LEFT, SWIPE_RIGHT, SWIPE_UP, SWIPE_DOWN } = swipeDirections;
116 |     const { dx, dy } = gestureState;
117 | 
118 |     if (!swipeLengthThreshold) {
119 |       return;
120 |     }
121 | 
122 |     if (this._isValidHorizontalSwipe(gestureState)) {
123 |       if (Math.abs(dx) > swipeLengthThreshold) {
124 |         return dx > 0 ? SWIPE_RIGHT : SWIPE_LEFT;
125 |       }
126 |     } else if (this._isValidVerticalSwipe(gestureState)) {
127 |       if (Math.abs(dy) > swipeLengthThreshold) {
128 |         return dy > 0 ? SWIPE_DOWN : SWIPE_UP;
129 |       }
130 |     }
131 | 
132 |     return null;
133 |   }
134 | 
135 |   /**
136 |    * Checks, whether the swipe was done in a horizontal fashion, respecting swipeVelocityThreshold limits
137 |    *
138 |    * @param gestureState
139 |    * @returns {*}
140 |    *
141 |    * @private
142 |    */
143 |   _isValidHorizontalSwipe(gestureState) {
144 |     const { vx, dy } = gestureState;
145 |     const { swipeVelocityThreshold, swipeDirectionalThreshold } = this.props;
146 |     return this._isValidSwipe(vx, swipeVelocityThreshold, dy, swipeDirectionalThreshold);
147 |   }
148 | 
149 |   /**
150 |    * Checks, whether the swipe was done in a vertical fashion, respecting swipeVelocityThreshold limits
151 |    *
152 |    * @param gestureState
153 |    * @returns {*}
154 |    *
155 |    * @private
156 |    */
157 |   _isValidVerticalSwipe(gestureState) {
158 |     const { vy, dx } = gestureState;
159 |     const { swipeVelocityThreshold, swipeDirectionalThreshold } = this.props;
160 |     return this._isValidSwipe(vy, swipeVelocityThreshold, dx, swipeDirectionalThreshold);
161 |   }
162 | 
163 |   /**
164 |    * Checks the sipw against velocity and directional offset to make sure it only gets activated, when we actually need it
165 |    *
166 |    * @param velocity
167 |    * @param swipeVelocityThreshold
168 |    * @param directionalOffset
169 |    * @param swipeDirectionalThreshold
170 |    *
171 |    * @returns {boolean}
172 |    *
173 |    * @private
174 |    */
175 |   _isValidSwipe(velocity, swipeVelocityThreshold, directionalOffset, swipeDirectionalThreshold) {
176 |     return Math.abs(velocity) > swipeVelocityThreshold && Math.abs(directionalOffset) < swipeDirectionalThreshold;
177 |   }
178 | 
179 |   render() {
180 |     return <ReactNativeZoomableView {...this.props} onShiftingEnd={this._onShiftingEnd} />;
181 |   }
182 | }
183 | /* 
184 | TODO: Remove this when typescript is proven to work
185 | ReactNativeZoomableViewWithGestures.propTypes = {
186 |   swipeLengthThreshold: PropTypes.number,
187 |   swipeVelocityThreshold: PropTypes.number,
188 |   swipeDirectionalThreshold: PropTypes.number,
189 |   swipeMinZoom: PropTypes.number,
190 |   swipeMaxZoom: PropTypes.number,
191 |   swipeDisabled: PropTypes.bool,
192 |   onSwipe: PropTypes.func,
193 |   onSwipeUp: PropTypes.func,
194 |   onSwipeDown: PropTypes.func,
195 |   onSwipeLeft: PropTypes.func,
196 |   onSwipeRight: PropTypes.func,
197 | };
198 | 
199 | ReactNativeZoomableViewWithGestures.defaultProps = {
200 |   swipeLengthThreshold: 0,
201 |   swipeVelocityThreshold: 0.1,
202 |   swipeDirectionalThreshold: 120,
203 |   swipeMinZoom: null,
204 |   swipeMaxZoom: null,
205 |   swipeDisabled: false,
206 |   onSwipe: null,
207 |   onSwipeUp: null,
208 |   onSwipeDown: null,
209 |   onSwipeLeft: null,
210 |   onSwipeRight: null,
211 | };
212 |  */
213 | export default ReactNativeZoomableViewWithGestures;
214 | 


--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
1 | import ReactNativeZoomableView from './ReactNativeZoomableView';
2 | import ReactNativeZoomableViewWithGestures from './ReactNativeZoomableViewWithGestures';
3 | 
4 | export { ReactNativeZoomableView, ReactNativeZoomableViewWithGestures };
5 | 


--------------------------------------------------------------------------------
/src/typings/index.d.ts:
--------------------------------------------------------------------------------
  1 | declare module '@dudigital/react-native-zoomable-view' {
  2 |   import React from 'react';
  3 |   import { PanResponderGestureState, ViewProps } from 'react-native';
  4 | 
  5 |   export enum SwipeDirection {
  6 |     SWIPE_UP = 'SWIPE_UP',
  7 |     SWIPE_DOWN = 'SWIPE_DOWN',
  8 |     SWIPE_LEFT = 'SWIPE_LEFT',
  9 |     SWIPE_RIGHT = 'SWIPE_RIGHT',
 10 |   }
 11 | 
 12 |   export interface ZoomableViewEvent {
 13 |     zoomLevel: number;
 14 |     offsetX: number;
 15 |     offsetY: number;
 16 |     lastZoomLevel: number;
 17 |     lastX: number;
 18 |     lastY: number;
 19 |     distanceBottom: number;
 20 |     distanceLeft: number;
 21 |     distanceRight: number;
 22 |     distanceTop: number;
 23 |     lastMovePinch: boolean;
 24 |     originalHeight: number;
 25 |     originalWidth: number;
 26 |   }
 27 | 
 28 |   export interface ReactNativeZoomableViewProps extends ViewProps {
 29 |     // options
 30 |     zoomEnabled?: boolean;
 31 |     initialZoom?: number;
 32 |     initialOffsetX?: number;
 33 |     initialOffsetY?: number;
 34 |     maxZoom?: number;
 35 |     minZoom?: number;
 36 |     doubleTapDelay?: number;
 37 |     doubleTapZoomToCenter?: boolean;
 38 |     bindToBorders?: boolean;
 39 |     zoomStep?: number;
 40 |     pinchToZoomInSensitivity?: number;
 41 |     pinchToZoomOutSensitivity?: number;
 42 |     zoomCenteringLevelDistance?: number;
 43 |     movementSensibility?: number;
 44 |     longPressDuration?: number;
 45 |     captureEvent?: boolean;
 46 |     style?: any;
 47 | 
 48 |     // callbacks
 49 |     onDoubleTapBefore?: (
 50 |       event: Event,
 51 |       gestureState: PanResponderGestureState,
 52 |       zoomableViewEventObject: ZoomableViewEvent,
 53 |     ) => void;
 54 |     onDoubleTapAfter?: (
 55 |       event: Event,
 56 |       gestureState: PanResponderGestureState,
 57 |       zoomableViewEventObject: ZoomableViewEvent,
 58 |     ) => void;
 59 |     onShiftingBefore?: (
 60 |       event: Event,
 61 |       gestureState: PanResponderGestureState,
 62 |       zoomableViewEventObject: ZoomableViewEvent,
 63 |     ) => boolean;
 64 |     onShiftingAfter?: (
 65 |       event: Event,
 66 |       gestureState: PanResponderGestureState,
 67 |       zoomableViewEventObject: ZoomableViewEvent,
 68 |     ) => boolean;
 69 |     onShiftingEnd?: (
 70 |       event: Event,
 71 |       gestureState: PanResponderGestureState,
 72 |       zoomableViewEventObject: ZoomableViewEvent,
 73 |     ) => void;
 74 |     onZoomBefore?: (
 75 |       event: Event,
 76 |       gestureState: PanResponderGestureState,
 77 |       zoomableViewEventObject: ZoomableViewEvent,
 78 |     ) => boolean | void;
 79 |     onZoomAfter?: (
 80 |       event: Event,
 81 |       gestureState: PanResponderGestureState,
 82 |       zoomableViewEventObject: ZoomableViewEvent,
 83 |     ) => void;
 84 |     onZoomEnd?: (
 85 |       event: Event,
 86 |       gestureState: PanResponderGestureState,
 87 |       zoomableViewEventObject: ZoomableViewEvent,
 88 |     ) => void;
 89 |     onLongPress?: (
 90 |       event: Event,
 91 |       gestureState: PanResponderGestureState,
 92 |       zoomableViewEventObject: ZoomableViewEvent,
 93 |     ) => void;
 94 |     onStartShouldSetPanResponder?: (
 95 |       event: Event,
 96 |       gestureState: PanResponderGestureState,
 97 |       zoomableViewEventObject: ZoomableViewEvent,
 98 |       baseComponentResult: boolean,
 99 |     ) => boolean;
100 |     onMoveShouldSetPanResponder?: (
101 |       event: Event,
102 |       gestureState: PanResponderGestureState,
103 |       zoomableViewEventObject: ZoomableViewEvent,
104 |       baseComponentResult: boolean,
105 |     ) => boolean;
106 |     onPanResponderGrant?: (
107 |       event: Event,
108 |       gestureState: PanResponderGestureState,
109 |       zoomableViewEventObject: ZoomableViewEvent,
110 |     ) => void;
111 |     onPanResponderEnd?: (
112 |       event: Event,
113 |       gestureState: PanResponderGestureState,
114 |       zoomableViewEventObject: ZoomableViewEvent,
115 |     ) => void;
116 |     onPanResponderMove?: (
117 |       event: Event,
118 |       gestureState: PanResponderGestureState,
119 |       zoomableViewEventObject: ZoomableViewEvent,
120 |     ) => boolean;
121 |     onPanResponderTerminate?: (
122 |       event: Event,
123 |       gestureState: PanResponderGestureState,
124 |       zoomableViewEventObject: ZoomableViewEvent,
125 |     ) => void;
126 |     onPanResponderTerminationRequest?: (
127 |       event: Event,
128 |       gestureState: PanResponderGestureState,
129 |       zoomableViewEventObject: ZoomableViewEvent,
130 |     ) => boolean;
131 |   }
132 | 
133 |   export interface ReactNativeZoomableViewState {
134 |     offsetX: number;
135 |     offsetY: number;
136 |     lastX: number;
137 |     lastY: number;
138 |     lastZoomLevel: number;
139 |     zoomLevel: number;
140 |     originalWidth: number;
141 |     originalHeight: number;
142 |     lastMovePinch: boolean;
143 |   }
144 | 
145 |   export class ReactNativeZoomableView extends React.PureComponent<ReactNativeZoomableViewProps> {
146 |     // events
147 |     zoomTo: (newZoomLevel: number, bindToBorders: boolean) => Promise<void>;
148 |     zoomBy: (zoomLevelChange: number, bindToBorders: boolean) => Promise<void>;
149 |     moveTo: (newOffsetX: number, newOffsetY: number, bindToBorders: boolean) => Promise<boolean>;
150 |     moveBy: (offsetChangeX: number, offsetChangeY: number, bindToBorders: boolean) => Promise<boolean>;
151 |   }
152 | 
153 |   export interface ReactNativeZoomableViewWithGesturesProps extends ReactNativeZoomableViewProps {
154 |     swipeLengthThreshold?: number;
155 |     swipeVelocityThreshold?: number;
156 |     swipeDirectionalThreshold?: number;
157 |     swipeMinZoom?: number;
158 |     swipeMaxZoom?: number;
159 |     swipeDisabled?: boolean;
160 |     onSwipe?: (swipeDirection: SwipeDirection, gestureState: PanResponderGestureState) => void;
161 |     onSwipeUp?: (gestureState: PanResponderGestureState) => void;
162 |     onSwipeDown?: (gestureState: PanResponderGestureState) => void;
163 |     onSwipeLeft?: (gestureState: PanResponderGestureState) => void;
164 |     onSwipeRight?: (gestureState: PanResponderGestureState) => void;
165 |   }
166 | 
167 |   export class ReactNativeZoomableViewWithGestures extends ReactNativeZoomableView {}
168 | }
169 | 
170 | declare module '@dudigital/react-native-zoomable-view/src/ReactNativeZoomableView' {
171 |   import { ReactNativeZoomableView } from '@dudigital/react-native-zoomable-view';
172 |   export default ReactNativeZoomableView;
173 | }
174 | 
175 | declare module '@dudigital/react-native-zoomable-view/src/ReactNativeZoomableViewWithGestures' {
176 |   import { ReactNativeZoomableViewWithGestures } from '@dudigital/react-native-zoomable-view';
177 |   export default ReactNativeZoomableViewWithGestures;
178 | }
179 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "declaration": true,
 4 |     "declarationDir": "dist",
 5 |     "module": "esnext",
 6 |     "target": "es5",
 7 |     "lib": ["es6", "dom", "es2016", "es2017"],
 8 |     "sourceMap": true,
 9 |     "jsx": "react",
10 |     "moduleResolution": "node",
11 |     "allowSyntheticDefaultImports": true,
12 |     "esModuleInterop": true,
13 |     "strict": false 
14 |   },
15 |   "include": ["src/**/*"],
16 |   "exclude": [
17 |     "node_modules",
18 |     "dist",
19 |     "src/**/*.stories.tsx",
20 |     "src/**/*.test.tsx"
21 |   ]
22 | }


--------------------------------------------------------------------------------