@gyjshow/react-native-image-viewing 1.0.0

package/dist/hooks/useDoubleTapToZoom.d.ts

@@ -0,0 +1,16 @@
+/**
+ * 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 { ScrollView, NativeTouchEvent, NativeSyntheticEvent } from "react-native";
+import { Dimensions } from "../@types";
+/**
+ * This is iOS only.
+ * Same functionality for Android implemented inside usePanResponder hook.
+ */
+declare function useDoubleTapToZoom(scrollViewRef: React.RefObject<ScrollView | null>, scaled: boolean, screen: Dimensions): (event: NativeSyntheticEvent<NativeTouchEvent>) => void;
+export default useDoubleTapToZoom;

package/dist/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/hooks/useImageDimensions.d.ts

@@ -0,0 +1,10 @@
+/**
+ * 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 "../@types";
+declare const useImageDimensions: (image: ImageSource) => Dimensions | null;
+export default useImageDimensions;

package/dist/hooks/useImageDimensions.js

@@ -0,0 +1,69 @@
+/**
+ * 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 "../utils";
+const CACHE_SIZE = 50;
+const imageDimensionsCache = createCache(CACHE_SIZE);
+const useImageDimensions = (image) => {
+    const [dimensions, setDimensions] = useState(null);
+    const getImageDimensions = (image) => {
+        return new Promise((resolve) => {
+            var _a;
+            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 {
+                    const uri = source.uri;
+                    if (!uri) {
+                        resolve({ width: 0, height: 0 });
+                        return;
+                    }
+                    Image.getSizeWithHeaders(uri, (_a = source.headers) !== null && _a !== void 0 ? _a : {}, (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/hooks/useImageIndexChange.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 { NativeSyntheticEvent, NativeScrollEvent } from "react-native";
+import { Dimensions } from "../@types";
+declare const useImageIndexChange: (imageIndex: number, screen: Dimensions) => readonly [number, (event: NativeSyntheticEvent<NativeScrollEvent>) => void];
+export default useImageIndexChange;

package/dist/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/hooks/useImagePrefetch.d.ts

@@ -0,0 +1,10 @@
+/**
+ * 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 "../@types";
+declare const useImagePrefetch: (images: ImageSource[]) => void;
+export default useImagePrefetch;

package/dist/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/hooks/usePanResponder.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, GestureResponderHandlers } from "react-native";
+import { Position } from "../@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;

package/dist/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 { useMemo, useEffect } from "react";
+import { Animated, Dimensions, } from "react-native";
+import { createPanResponder, getDistanceBetweenTouches, getImageTranslate, getImageDimensionsByTranslate, } from "../utils";
+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;

package/dist/hooks/useRequestClose.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+declare const useRequestClose: (onRequestClose: () => void) => readonly [number, () => void];
+export default useRequestClose;

package/dist/hooks/useRequestClose.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 useRequestClose = (onRequestClose) => {
+    const [opacity, setOpacity] = useState(1);
+    return [
+        opacity,
+        () => {
+            setOpacity(0);
+            onRequestClose();
+            setTimeout(() => setOpacity(1), 0);
+        },
+    ];
+};
+export default useRequestClose;

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 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.
+ *
+ */
+export { default } from "./ImageViewing";

package/dist/index.js

@@ -0,0 +1,8 @@
+/**
+ * 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.
+ *
+ */
+export { default } from "./ImageViewing";

package/dist/utils.d.ts

@@ -0,0 +1,46 @@
+/**
+ * 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, GestureResponderEvent, PanResponderGestureState, PanResponderInstance, NativeTouchEvent } from "react-native";
+import { Dimensions, Position } from "./@types";
+type CacheStorageItem = {
+    key: string;
+    value: any;
+};
+export declare const createCache: (cacheSize: number) => {
+    _storage: CacheStorageItem[];
+    get(key: string): any;
+    set(key: string, value: any): void;
+};
+export declare const splitArrayIntoBatches: (arr: any[], batchSize: number) => any[];
+export declare const getImageTransform: (image: Dimensions | null, screen: Dimensions) => readonly [] | readonly [{
+    readonly x: number;
+    readonly y: number;
+}, number];
+export declare const getImageStyles: (image: Dimensions | null, translate: Animated.ValueXY, scale?: Animated.Value) => {
+    width: number;
+    height: number;
+    transform?: undefined;
+} | {
+    width: number;
+    height: number;
+    transform: any[];
+};
+export declare const getImageTranslate: (image: Dimensions, screen: Dimensions) => Position;
+export declare const getImageDimensionsByTranslate: (translate: Position, screen: Dimensions) => Dimensions;
+export declare const getImageTranslateForScale: (currentTranslate: Position, targetScale: number, screen: Dimensions) => Position;
+type HandlerType = (event: GestureResponderEvent, state: PanResponderGestureState) => void;
+type PanResponderProps = {
+    onGrant: HandlerType;
+    onStart?: HandlerType;
+    onMove: HandlerType;
+    onRelease?: HandlerType;
+    onTerminate?: HandlerType;
+};
+export declare const createPanResponder: ({ onGrant, onStart, onMove, onRelease, onTerminate, }: PanResponderProps) => PanResponderInstance;
+export declare const getDistanceBetweenTouches: (touches: NativeTouchEvent[]) => number;
+export {};