decathlon-ui 0.2.1 → 0.2.3

package/dist/components/image-viewing/components/image-item/image-loading.component.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ActivityIndicator, Dimensions, StyleSheet, View } from "react-native";
+const SCREEN = Dimensions.get("screen");
+const SCREEN_WIDTH = SCREEN.width;
+const SCREEN_HEIGHT = SCREEN.height;
+export const ImageLoading = () => (_jsx(View, { style: styles.loading, children: _jsx(ActivityIndicator, { size: "small", color: "#FFF" }) }));
+const styles = StyleSheet.create({
+    loading: {
+        width: SCREEN_WIDTH,
+        height: SCREEN_HEIGHT,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+});

package/dist/components/image-viewing/components/status-bar-manager.d.ts

@@ -0,0 +1,6 @@
+import { ModalProps } from "react-native";
+declare const StatusBarManager: ({ presentationStyle, }: {
+    presentationStyle?: ModalProps["presentationStyle"];
+}) => null;
+export default StatusBarManager;
+//# sourceMappingURL=status-bar-manager.d.ts.map

package/dist/components/image-viewing/components/status-bar-manager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"status-bar-manager.d.ts","sourceRoot":"","sources":["../../../../src/components/image-viewing/components/status-bar-manager.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,UAAU,EAEX,MAAM,cAAc,CAAC;AAEtB,QAAA,MAAM,gBAAgB,GAAI,wBAEvB;IACD,iBAAiB,CAAC,EAAE,UAAU,CAAC,mBAAmB,CAAC,CAAC;CACrD,SAaA,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/components/image-viewing/components/status-bar-manager.js

@@ -0,0 +1,14 @@
+import { useEffect } from "react";
+import { Platform, StatusBar, } from "react-native";
+const StatusBarManager = ({ presentationStyle, }) => {
+    if (Platform.OS === "ios" || presentationStyle !== "overFullScreen") {
+        return null;
+    }
+    //Can't get an actual state of app status bar with default RN. Gonna rely on "presentationStyle === overFullScreen" prop and guess application status bar state to be visible in this case.
+    StatusBar.setHidden(true);
+    useEffect(() => {
+        return () => StatusBar.setHidden(false);
+    }, []);
+    return null;
+};
+export default StatusBarManager;

package/dist/components/image-viewing/hooks/index.d.ts

@@ -0,0 +1,8 @@
+export { default as useAnimatedComponents } from "./useAnimatedComponents";
+export { default as useDoubleTapToZoom } from "./useDoubleTapToZoom";
+export { default as useImageDimensions } from "./useImageDimensions";
+export { default as useImageIndexChange } from "./useImageIndexChange";
+export { default as useImagePrefetch } from "./useImagePrefetch";
+export { default as usePanResponder } from "./usePanResponder";
+export { default as useRequestClose } from "./useRequestClose";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/image-viewing/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/image-viewing/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/components/image-viewing/hooks/index.js

@@ -0,0 +1,7 @@
+export { default as useAnimatedComponents } from "./useAnimatedComponents";
+export { default as useDoubleTapToZoom } from "./useDoubleTapToZoom";
+export { default as useImageDimensions } from "./useImageDimensions";
+export { default as useImageIndexChange } from "./useImageIndexChange";
+export { default as useImagePrefetch } from "./useImagePrefetch";
+export { default as usePanResponder } from "./usePanResponder";
+export { default as useRequestClose } from "./useRequestClose";

package/dist/components/image-viewing/hooks/useAnimatedComponents.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) JOB TODAY S.A. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import { Animated } from "react-native";
+declare const useAnimatedComponents: () => readonly [[{
+    translateX: Animated.AnimatedValue;
+}, {
+    translateY: Animated.AnimatedValue;
+}], [{
+    translateX: Animated.AnimatedValue;
+}, {
+    translateY: Animated.AnimatedValue;
+}], (isVisible: boolean) => void];
+export default useAnimatedComponents;
+//# sourceMappingURL=useAnimatedComponents.d.ts.map

package/dist/components/image-viewing/hooks/useAnimatedComponents.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAnimatedComponents.d.ts","sourceRoot":"","sources":["../../../../src/components/image-viewing/hooks/useAnimatedComponents.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAQxC,QAAA,MAAM,qBAAqB;;;;;;;;gBAIS,OAAO,UAwB1C,CAAC;AAEF,eAAe,qBAAqB,CAAC"}

package/dist/components/image-viewing/hooks/useAnimatedComponents.js

@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) JOB TODAY S.A. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import { Animated } from "react-native";
+const INITIAL_POSITION = { x: 0, y: 0 };
+const ANIMATION_CONFIG = {
+    duration: 200,
+    useNativeDriver: true,
+};
+const useAnimatedComponents = () => {
+    const headerTranslate = new Animated.ValueXY(INITIAL_POSITION);
+    const footerTranslate = new Animated.ValueXY(INITIAL_POSITION);
+    const toggleVisible = (isVisible) => {
+        if (isVisible) {
+            Animated.parallel([
+                Animated.timing(headerTranslate.y, { ...ANIMATION_CONFIG, toValue: 0 }),
+                Animated.timing(footerTranslate.y, { ...ANIMATION_CONFIG, toValue: 0 }),
+            ]).start();
+        }
+        else {
+            Animated.parallel([
+                Animated.timing(headerTranslate.y, {
+                    ...ANIMATION_CONFIG,
+                    toValue: -300,
+                }),
+                Animated.timing(footerTranslate.y, {
+                    ...ANIMATION_CONFIG,
+                    toValue: 300,
+                }),
+            ]).start();
+        }
+    };
+    const headerTransform = headerTranslate.getTranslateTransform();
+    const footerTransform = footerTranslate.getTranslateTransform();
+    return [headerTransform, footerTransform, toggleVisible];
+};
+export default useAnimatedComponents;

package/dist/components/image-viewing/hooks/useDoubleTapToZoom.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) JOB TODAY S.A. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import React from "react";
+import { NativeSyntheticEvent, NativeTouchEvent, ScrollView } from "react-native";
+import { Dimensions } from "../image-viewing.types";
+/**
+ * This is iOS only.
+ * Same functionality for Android implemented inside usePanResponder hook.
+ */
+declare function useDoubleTapToZoom(scrollViewRef: React.RefObject<ScrollView>, scaled: boolean, screen: Dimensions): (event: NativeSyntheticEvent<NativeTouchEvent>) => void;
+export default useDoubleTapToZoom;
+//# sourceMappingURL=useDoubleTapToZoom.d.ts.map

package/dist/components/image-viewing/hooks/useDoubleTapToZoom.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDoubleTapToZoom.d.ts","sourceRoot":"","sources":["../../../../src/components/image-viewing/hooks/useDoubleTapToZoom.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAsB,MAAM,OAAO,CAAC;AAC3C,OAAO,EACL,oBAAoB,EACpB,gBAAgB,EAChB,UAAU,EACX,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAKpD;;;GAGG;AACH,iBAAS,kBAAkB,CACzB,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC,UAAU,CAAC,EAC1C,MAAM,EAAE,OAAO,EACf,MAAM,EAAE,UAAU,WAGR,oBAAoB,CAAC,gBAAgB,CAAC,UAoCjD;AAED,eAAe,kBAAkB,CAAC"}

package/dist/components/image-viewing/hooks/useDoubleTapToZoom.js

@@ -0,0 +1,49 @@
+/**
+ * Copyright (c) JOB TODAY S.A. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import { useCallback } from "react";
+const DOUBLE_TAP_DELAY = 300;
+let lastTapTS = null;
+/**
+ * This is iOS only.
+ * Same functionality for Android implemented inside usePanResponder hook.
+ */
+function useDoubleTapToZoom(scrollViewRef, scaled, screen) {
+    const handleDoubleTap = useCallback((event) => {
+        var _a;
+        const nowTS = new Date().getTime();
+        const scrollResponderRef = (_a = scrollViewRef === null || scrollViewRef === void 0 ? void 0 : scrollViewRef.current) === null || _a === void 0 ? void 0 : _a.getScrollResponder();
+        if (lastTapTS && nowTS - lastTapTS < DOUBLE_TAP_DELAY) {
+            const { pageX, pageY } = event.nativeEvent;
+            let targetX = 0;
+            let targetY = 0;
+            let targetWidth = screen.width;
+            let targetHeight = screen.height;
+            // Zooming in
+            // TODO: Add more precise calculation of targetX, targetY based on touch
+            if (!scaled) {
+                targetX = pageX / 2;
+                targetY = pageY / 2;
+                targetWidth = screen.width / 2;
+                targetHeight = screen.height / 2;
+            }
+            // @ts-ignore
+            scrollResponderRef === null || scrollResponderRef === void 0 ? void 0 : scrollResponderRef.scrollResponderZoomTo({
+                x: targetX,
+                y: targetY,
+                width: targetWidth,
+                height: targetHeight,
+                animated: true,
+            });
+        }
+        else {
+            lastTapTS = nowTS;
+        }
+    }, [scaled]);
+    return handleDoubleTap;
+}
+export default useDoubleTapToZoom;

package/dist/components/image-viewing/hooks/useImageDimensions.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) JOB TODAY S.A. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import { Dimensions, ImageSource } from "../image-viewing.types";
+declare const useImageDimensions: (image: ImageSource) => Dimensions | null;
+export default useImageDimensions;
+//# sourceMappingURL=useImageDimensions.d.ts.map

package/dist/components/image-viewing/hooks/useImageDimensions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useImageDimensions.d.ts","sourceRoot":"","sources":["../../../../src/components/image-viewing/hooks/useImageDimensions.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAKH,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAMjE,QAAA,MAAM,kBAAkB,GAAI,OAAO,WAAW,KAAG,UAAU,GAAG,IAiE7D,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/components/image-viewing/hooks/useImageDimensions.js

@@ -0,0 +1,64 @@
+/**
+ * Copyright (c) JOB TODAY S.A. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import { useEffect, useState } from "react";
+import { Image } from "react-native";
+import { createCache } from "../util";
+const CACHE_SIZE = 50;
+const imageDimensionsCache = createCache(CACHE_SIZE);
+const useImageDimensions = (image) => {
+    const [dimensions, setDimensions] = useState(null);
+    const getImageDimensions = (image) => {
+        return new Promise((resolve) => {
+            if (typeof image == "number") {
+                const cacheKey = `${image}`;
+                let imageDimensions = imageDimensionsCache.get(cacheKey);
+                if (!imageDimensions) {
+                    const { width, height } = Image.resolveAssetSource(image);
+                    imageDimensions = { width, height };
+                    imageDimensionsCache.set(cacheKey, imageDimensions);
+                }
+                resolve(imageDimensions);
+                return;
+            }
+            // @ts-ignore
+            if (image.uri) {
+                const source = image;
+                const cacheKey = source.uri;
+                const imageDimensions = imageDimensionsCache.get(cacheKey);
+                if (imageDimensions) {
+                    resolve(imageDimensions);
+                }
+                else {
+                    // @ts-ignore
+                    Image.getSizeWithHeaders(source.uri, source.headers, (width, height) => {
+                        imageDimensionsCache.set(cacheKey, { width, height });
+                        resolve({ width, height });
+                    }, () => {
+                        resolve({ width: 0, height: 0 });
+                    });
+                }
+            }
+            else {
+                resolve({ width: 0, height: 0 });
+            }
+        });
+    };
+    let isImageUnmounted = false;
+    useEffect(() => {
+        getImageDimensions(image).then((dimensions) => {
+            if (!isImageUnmounted) {
+                setDimensions(dimensions);
+            }
+        });
+        return () => {
+            isImageUnmounted = true;
+        };
+    }, [image]);
+    return dimensions;
+};
+export default useImageDimensions;

package/dist/components/image-viewing/hooks/useImageIndexChange.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) JOB TODAY S.A. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import { NativeScrollEvent, NativeSyntheticEvent } from "react-native";
+import { Dimensions } from "../image-viewing.types";
+declare const useImageIndexChange: (imageIndex: number, screen: Dimensions) => readonly [number, (event: NativeSyntheticEvent<NativeScrollEvent>) => void];
+export default useImageIndexChange;
+//# sourceMappingURL=useImageIndexChange.d.ts.map

package/dist/components/image-viewing/hooks/useImageIndexChange.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useImageIndexChange.d.ts","sourceRoot":"","sources":["../../../../src/components/image-viewing/hooks/useImageIndexChange.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAEvE,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD,QAAA,MAAM,mBAAmB,GAAI,YAAY,MAAM,EAAE,QAAQ,UAAU,+BAExC,oBAAoB,CAAC,iBAAiB,CAAC,UAcjE,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/dist/components/image-viewing/hooks/useImageIndexChange.js

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) JOB TODAY S.A. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import { useState } from "react";
+const useImageIndexChange = (imageIndex, screen) => {
+    const [currentImageIndex, setImageIndex] = useState(imageIndex);
+    const onScroll = (event) => {
+        const { nativeEvent: { contentOffset: { x: scrollX }, }, } = event;
+        if (screen.width) {
+            const nextIndex = Math.round(scrollX / screen.width);
+            setImageIndex(nextIndex < 0 ? 0 : nextIndex);
+        }
+    };
+    return [currentImageIndex, onScroll];
+};
+export default useImageIndexChange;

package/dist/components/image-viewing/hooks/useImagePrefetch.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) JOB TODAY S.A. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import { ImageSource } from "../image-viewing.types";
+declare const useImagePrefetch: (images: ImageSource[]) => void;
+export default useImagePrefetch;
+//# sourceMappingURL=useImagePrefetch.d.ts.map

package/dist/components/image-viewing/hooks/useImagePrefetch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useImagePrefetch.d.ts","sourceRoot":"","sources":["../../../../src/components/image-viewing/hooks/useImagePrefetch.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAIH,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAErD,QAAA,MAAM,gBAAgB,GAAI,QAAQ,WAAW,EAAE,SAU9C,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/components/image-viewing/hooks/useImagePrefetch.js

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) JOB TODAY S.A. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import { useEffect } from "react";
+import { Image } from "react-native";
+const useImagePrefetch = (images) => {
+    useEffect(() => {
+        images.forEach((image) => {
+            //@ts-ignore
+            if (image.uri) {
+                //@ts-ignore
+                return Image.prefetch(image.uri);
+            }
+        });
+    }, []);
+};
+export default useImagePrefetch;

package/dist/components/image-viewing/hooks/usePanResponder.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) JOB TODAY S.A. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import { Animated, GestureResponderHandlers } from "react-native";
+import { Position } from "../image-viewing.types";
+type Props = {
+    initialScale: number;
+    initialTranslate: Position;
+    onZoom: (isZoomed: boolean) => void;
+    doubleTapToZoomEnabled: boolean;
+    onLongPress: () => void;
+    delayLongPress: number;
+};
+declare const usePanResponder: ({ initialScale, initialTranslate, onZoom, doubleTapToZoomEnabled, onLongPress, delayLongPress, }: Props) => Readonly<[GestureResponderHandlers, Animated.Value, Animated.ValueXY]>;
+export default usePanResponder;
+//# sourceMappingURL=usePanResponder.d.ts.map

package/dist/components/image-viewing/hooks/usePanResponder.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePanResponder.d.ts","sourceRoot":"","sources":["../../../../src/components/image-viewing/hooks/usePanResponder.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,EACL,QAAQ,EAGR,wBAAwB,EAGzB,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAiBlD,KAAK,KAAK,GAAG;IACX,YAAY,EAAE,MAAM,CAAC;IACrB,gBAAgB,EAAE,QAAQ,CAAC;IAC3B,MAAM,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACpC,sBAAsB,EAAE,OAAO,CAAC;IAChC,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,cAAc,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,QAAA,MAAM,eAAe,GAAI,kGAOtB,KAAK,KAAG,QAAQ,CACjB,CAAC,wBAAwB,EAAE,QAAQ,CAAC,KAAK,EAAE,QAAQ,CAAC,OAAO,CAAC,CAuV7D,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/components/image-viewing/hooks/usePanResponder.js

@@ -0,0 +1,273 @@
+/**
+ * Copyright (c) JOB TODAY S.A. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import { useEffect, useMemo } from "react";
+import { Animated, Dimensions, } from "react-native";
+import { createPanResponder, getDistanceBetweenTouches, getImageDimensionsByTranslate, getImageTranslate, } from "../util";
+const SCREEN = Dimensions.get("window");
+const SCREEN_WIDTH = SCREEN.width;
+const SCREEN_HEIGHT = SCREEN.height;
+const MIN_DIMENSION = Math.min(SCREEN_WIDTH, SCREEN_HEIGHT);
+const SCALE_MAX = 2;
+const DOUBLE_TAP_DELAY = 300;
+const OUT_BOUND_MULTIPLIER = 0.75;
+const usePanResponder = ({ initialScale, initialTranslate, onZoom, doubleTapToZoomEnabled, onLongPress, delayLongPress, }) => {
+    let numberInitialTouches = 1;
+    let initialTouches = [];
+    let currentScale = initialScale;
+    let currentTranslate = initialTranslate;
+    let tmpScale = 0;
+    let tmpTranslate = null;
+    let isDoubleTapPerformed = false;
+    let lastTapTS = null;
+    let longPressHandlerRef = null;
+    const meaningfulShift = MIN_DIMENSION * 0.01;
+    const scaleValue = new Animated.Value(initialScale);
+    const translateValue = new Animated.ValueXY(initialTranslate);
+    const imageDimensions = getImageDimensionsByTranslate(initialTranslate, SCREEN);
+    const getBounds = (scale) => {
+        const scaledImageDimensions = {
+            width: imageDimensions.width * scale,
+            height: imageDimensions.height * scale,
+        };
+        const translateDelta = getImageTranslate(scaledImageDimensions, SCREEN);
+        const left = initialTranslate.x - translateDelta.x;
+        const right = left - (scaledImageDimensions.width - SCREEN.width);
+        const top = initialTranslate.y - translateDelta.y;
+        const bottom = top - (scaledImageDimensions.height - SCREEN.height);
+        return [top, left, bottom, right];
+    };
+    const getTranslateInBounds = (translate, scale) => {
+        const inBoundTranslate = { x: translate.x, y: translate.y };
+        const [topBound, leftBound, bottomBound, rightBound] = getBounds(scale);
+        if (translate.x > leftBound) {
+            inBoundTranslate.x = leftBound;
+        }
+        else if (translate.x < rightBound) {
+            inBoundTranslate.x = rightBound;
+        }
+        if (translate.y > topBound) {
+            inBoundTranslate.y = topBound;
+        }
+        else if (translate.y < bottomBound) {
+            inBoundTranslate.y = bottomBound;
+        }
+        return inBoundTranslate;
+    };
+    const fitsScreenByWidth = () => imageDimensions.width * currentScale < SCREEN_WIDTH;
+    const fitsScreenByHeight = () => imageDimensions.height * currentScale < SCREEN_HEIGHT;
+    useEffect(() => {
+        scaleValue.addListener(({ value }) => {
+            if (typeof onZoom === "function") {
+                onZoom(value !== initialScale);
+            }
+        });
+        return () => scaleValue.removeAllListeners();
+    });
+    const cancelLongPressHandle = () => {
+        longPressHandlerRef && clearTimeout(longPressHandlerRef);
+    };
+    const handlers = {
+        onGrant: (_, gestureState) => {
+            numberInitialTouches = gestureState.numberActiveTouches;
+            if (gestureState.numberActiveTouches > 1)
+                return;
+            longPressHandlerRef = setTimeout(onLongPress, delayLongPress);
+        },
+        onStart: (event, gestureState) => {
+            initialTouches = event.nativeEvent.touches;
+            numberInitialTouches = gestureState.numberActiveTouches;
+            if (gestureState.numberActiveTouches > 1)
+                return;
+            const tapTS = Date.now();
+            // Handle double tap event by calculating diff between first and second taps timestamps
+            isDoubleTapPerformed = Boolean(lastTapTS && tapTS - lastTapTS < DOUBLE_TAP_DELAY);
+            if (doubleTapToZoomEnabled && isDoubleTapPerformed) {
+                const isScaled = currentTranslate.x !== initialTranslate.x; // currentScale !== initialScale;
+                const { pageX: touchX, pageY: touchY } = event.nativeEvent.touches[0];
+                const targetScale = SCALE_MAX;
+                const nextScale = isScaled ? initialScale : targetScale;
+                const nextTranslate = isScaled
+                    ? initialTranslate
+                    : getTranslateInBounds({
+                        x: initialTranslate.x +
+                            (SCREEN_WIDTH / 2 - touchX) * (targetScale / currentScale),
+                        y: initialTranslate.y +
+                            (SCREEN_HEIGHT / 2 - touchY) * (targetScale / currentScale),
+                    }, targetScale);
+                onZoom(!isScaled);
+                Animated.parallel([
+                    Animated.timing(translateValue.x, {
+                        toValue: nextTranslate.x,
+                        duration: 300,
+                        useNativeDriver: true,
+                    }),
+                    Animated.timing(translateValue.y, {
+                        toValue: nextTranslate.y,
+                        duration: 300,
+                        useNativeDriver: true,
+                    }),
+                    Animated.timing(scaleValue, {
+                        toValue: nextScale,
+                        duration: 300,
+                        useNativeDriver: true,
+                    }),
+                ], { stopTogether: false }).start(() => {
+                    currentScale = nextScale;
+                    currentTranslate = nextTranslate;
+                });
+                lastTapTS = null;
+            }
+            else {
+                lastTapTS = Date.now();
+            }
+        },
+        onMove: (event, gestureState) => {
+            const { dx, dy } = gestureState;
+            if (Math.abs(dx) >= meaningfulShift || Math.abs(dy) >= meaningfulShift) {
+                cancelLongPressHandle();
+            }
+            // Don't need to handle move because double tap in progress (was handled in onStart)
+            if (doubleTapToZoomEnabled && isDoubleTapPerformed) {
+                cancelLongPressHandle();
+                return;
+            }
+            if (numberInitialTouches === 1 &&
+                gestureState.numberActiveTouches === 2) {
+                numberInitialTouches = 2;
+                initialTouches = event.nativeEvent.touches;
+            }
+            const isTapGesture = numberInitialTouches == 1 && gestureState.numberActiveTouches === 1;
+            const isPinchGesture = numberInitialTouches === 2 && gestureState.numberActiveTouches === 2;
+            if (isPinchGesture) {
+                cancelLongPressHandle();
+                const initialDistance = getDistanceBetweenTouches(initialTouches);
+                const currentDistance = getDistanceBetweenTouches(event.nativeEvent.touches);
+                let nextScale = (currentDistance / initialDistance) * currentScale;
+                /**
+                 * In case image is scaling smaller than initial size ->
+                 * slow down this transition by applying OUT_BOUND_MULTIPLIER
+                 */
+                if (nextScale < initialScale) {
+                    nextScale =
+                        nextScale + (initialScale - nextScale) * OUT_BOUND_MULTIPLIER;
+                }
+                /**
+                 * In case image is scaling down -> move it in direction of initial position
+                 */
+                if (currentScale > initialScale && currentScale > nextScale) {
+                    const k = (currentScale - initialScale) / (currentScale - nextScale);
+                    const nextTranslateX = nextScale < initialScale
+                        ? initialTranslate.x
+                        : currentTranslate.x -
+                            (currentTranslate.x - initialTranslate.x) / k;
+                    const nextTranslateY = nextScale < initialScale
+                        ? initialTranslate.y
+                        : currentTranslate.y -
+                            (currentTranslate.y - initialTranslate.y) / k;
+                    translateValue.x.setValue(nextTranslateX);
+                    translateValue.y.setValue(nextTranslateY);
+                    tmpTranslate = { x: nextTranslateX, y: nextTranslateY };
+                }
+                scaleValue.setValue(nextScale);
+                tmpScale = nextScale;
+            }
+            if (isTapGesture && currentScale > initialScale) {
+                const { x, y } = currentTranslate;
+                const { dx, dy } = gestureState;
+                const [topBound, leftBound, bottomBound, rightBound] = getBounds(currentScale);
+                let nextTranslateX = x + dx;
+                let nextTranslateY = y + dy;
+                if (nextTranslateX > leftBound) {
+                    nextTranslateX =
+                        nextTranslateX -
+                            (nextTranslateX - leftBound) * OUT_BOUND_MULTIPLIER;
+                }
+                if (nextTranslateX < rightBound) {
+                    nextTranslateX =
+                        nextTranslateX -
+                            (nextTranslateX - rightBound) * OUT_BOUND_MULTIPLIER;
+                }
+                if (nextTranslateY > topBound) {
+                    nextTranslateY =
+                        nextTranslateY - (nextTranslateY - topBound) * OUT_BOUND_MULTIPLIER;
+                }
+                if (nextTranslateY < bottomBound) {
+                    nextTranslateY =
+                        nextTranslateY -
+                            (nextTranslateY - bottomBound) * OUT_BOUND_MULTIPLIER;
+                }
+                if (fitsScreenByWidth()) {
+                    nextTranslateX = x;
+                }
+                if (fitsScreenByHeight()) {
+                    nextTranslateY = y;
+                }
+                translateValue.x.setValue(nextTranslateX);
+                translateValue.y.setValue(nextTranslateY);
+                tmpTranslate = { x: nextTranslateX, y: nextTranslateY };
+            }
+        },
+        onRelease: () => {
+            cancelLongPressHandle();
+            if (isDoubleTapPerformed) {
+                isDoubleTapPerformed = false;
+            }
+            if (tmpScale > 0) {
+                if (tmpScale < initialScale || tmpScale > SCALE_MAX) {
+                    tmpScale = tmpScale < initialScale ? initialScale : SCALE_MAX;
+                    Animated.timing(scaleValue, {
+                        toValue: tmpScale,
+                        duration: 100,
+                        useNativeDriver: true,
+                    }).start();
+                }
+                currentScale = tmpScale;
+                tmpScale = 0;
+            }
+            if (tmpTranslate) {
+                const { x, y } = tmpTranslate;
+                const [topBound, leftBound, bottomBound, rightBound] = getBounds(currentScale);
+                let nextTranslateX = x;
+                let nextTranslateY = y;
+                if (!fitsScreenByWidth()) {
+                    if (nextTranslateX > leftBound) {
+                        nextTranslateX = leftBound;
+                    }
+                    else if (nextTranslateX < rightBound) {
+                        nextTranslateX = rightBound;
+                    }
+                }
+                if (!fitsScreenByHeight()) {
+                    if (nextTranslateY > topBound) {
+                        nextTranslateY = topBound;
+                    }
+                    else if (nextTranslateY < bottomBound) {
+                        nextTranslateY = bottomBound;
+                    }
+                }
+                Animated.parallel([
+                    Animated.timing(translateValue.x, {
+                        toValue: nextTranslateX,
+                        duration: 100,
+                        useNativeDriver: true,
+                    }),
+                    Animated.timing(translateValue.y, {
+                        toValue: nextTranslateY,
+                        duration: 100,
+                        useNativeDriver: true,
+                    }),
+                ]).start();
+                currentTranslate = { x: nextTranslateX, y: nextTranslateY };
+                tmpTranslate = null;
+            }
+        },
+    };
+    const panResponder = useMemo(() => createPanResponder(handlers), [handlers]);
+    return [panResponder.panHandlers, scaleValue, translateValue];
+};
+export default usePanResponder;