@gyjshow/react-native-image-viewing 1.0.0

package/LICENSE

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

package/README.md

@@ -0,0 +1,101 @@
+# react-native-image-viewing
+
+> React Native modal component for viewing images as a sliding gallery.
+
+[![npm version](https://badge.fury.io/js/react-native-image-viewing.svg)](https://badge.fury.io/js/react-native-image-viewing)
+[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
+
+- 🔥Pinch zoom for both iOS and Android
+- 🔥Double tap to zoom for both iOS and Android
+- 🔥Supports swipe-to-close animation
+- 🔥Custom header and footer components
+- 🔥Uses VirtualizedList to optimize image loading and rendering
+
+Try with Expo: https://expo.io/@antonkalinin/react-native-image-viewing
+
+<p align="center">
+  <img src="https://github.com/jobtoday/react-native-image-viewing/blob/master/demo.gif?raw=true" height="480" />
+</p>
+
+## Installation
+
+```bash
+yarn add react-native-image-viewing
+```
+
+or
+
+```bash
+npm install --save react-native-image-viewing
+```
+
+## Usage
+
+```jsx
+import ImageView from "react-native-image-viewing";
+
+const images = [
+  {
+    uri: "https://images.unsplash.com/photo-1571501679680-de32f1e7aad4",
+  },
+  {
+    uri: "https://images.unsplash.com/photo-1573273787173-0eb81a833b34",
+  },
+  {
+    uri: "https://images.unsplash.com/photo-1569569970363-df7b6160d111",
+  },
+];
+
+const [visible, setIsVisible] = useState(false);
+
+<ImageView
+  images={images}
+  imageIndex={0}
+  visible={visible}
+  onRequestClose={() => setIsVisible(false)}
+/>
+```
+
+#### [See Example](https://github.com/jobtoday/react-native-image-viewing/blob/master/example/App.tsx#L62-L80)
+
+## Props
+
+| Prop name                | Description                                                                                         | Type                                                        | Required |
+| ------------------------ | --------------------------------------------------------------------------------------------------- | ----------------------------------------------------------- | -------- |
+| `images`                 | Array of images to display                                                                          | ImageSource[]                                               | true     |
+| `keyExtractor`           | Uniqely identifying each image    | (imageSrc: ImageSource, index: number) => string | false |
+| `imageIndex`             | Current index of image to display                                                                   | number                                                      | true     |
+| `visible`                | Is modal shown or not                                                                               | boolean                                                     | true     |
+| `onRequestClose`         | Function called to close the modal                                                                  | function                                                    | true     |
+| `onImageIndexChange`     | Function called when image index has been changed                                                   | function                                                    | false    |
+| `onLongPress`            | Function called when image long pressed                                                             | function (event: GestureResponderEvent, image: ImageSource) | false    |
+| `delayLongPress`         | Delay in ms, before onLongPress is called: default `800`                                            | number                                                      | false    |
+| `animationType`          | Animation modal presented with: default `fade`                                                      | `none`, `fade`, `slide`                                     | false    |
+| `presentationStyle`      | Modal presentation style: default: `fullScreen` **Android:** Use `overFullScreen` to hide StatusBar | `fullScreen`, `pageSheet`, `formSheet`, `overFullScreen`    | false    |
+| `backgroundColor`        | Background color of the modal in HEX (#000000EE)                                                    | string                                                      | false    |
+| `swipeToCloseEnabled`    | Close modal with swipe up or down: default `true`                                                   | boolean                                                     | false    |
+| `doubleTapToZoomEnabled` | Zoom image by double tap on it: default `true`                                                      | boolean                                                     | false    |
+| `HeaderComponent`        | Header component, gets current `imageIndex` as a prop                                               | component, function                                         | false    |
+| `FooterComponent`        | Footer component, gets current `imageIndex` as a prop                                               | component, function                                         | false    |
+
+- type ImageSource = ImageURISource | ImageRequireSource
+
+## Contributing
+
+To start contributing clone this repo and then run inside `react-native-image-viewing` folder:
+
+```bash
+yarn
+```
+
+Then go inside `example` folder and run:
+
+```bash
+yarn & yarn start
+```
+
+This will start packager for expo so you can change `/src/ImageViewing` and see changes in expo example app.
+
+## License
+
+[MIT](LICENSE)

package/dist/@types/index.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 { ImageURISource, ImageRequireSource } from "react-native";
+export type Dimensions = {
+    width: number;
+    height: number;
+};
+export type Position = {
+    x: number;
+    y: number;
+};
+export type ImageSource = ImageURISource | ImageRequireSource;

package/dist/@types/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 {};

package/dist/ImageViewing.d.ts

@@ -0,0 +1,33 @@
+/**
+ * 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, { ComponentType } from "react";
+import { ModalProps } from "react-native";
+import { ImageSource } from "./@types";
+type Props = {
+    images: ImageSource[];
+    keyExtractor?: (imageSrc: ImageSource, index: number) => string;
+    imageIndex: number;
+    visible: boolean;
+    onRequestClose: () => void;
+    onLongPress?: (image: ImageSource) => void;
+    onImageIndexChange?: (imageIndex: number) => void;
+    presentationStyle?: ModalProps["presentationStyle"];
+    animationType?: ModalProps["animationType"];
+    backgroundColor?: string;
+    swipeToCloseEnabled?: boolean;
+    doubleTapToZoomEnabled?: boolean;
+    delayLongPress?: number;
+    HeaderComponent?: ComponentType<{
+        imageIndex: number;
+    }>;
+    FooterComponent?: ComponentType<{
+        imageIndex: number;
+    }>;
+};
+declare const EnhancedImageViewing: (props: Props) => React.JSX.Element;
+export default EnhancedImageViewing;

package/dist/ImageViewing.js

@@ -0,0 +1,86 @@
+/**
+ * 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, { useCallback, useRef, useEffect } from "react";
+import { Animated, Dimensions, StyleSheet, View, VirtualizedList, Modal, } from "react-native";
+import ImageItem from "./components/ImageItem/ImageItem";
+import ImageDefaultHeader from "./components/ImageDefaultHeader";
+import StatusBarManager from "./components/StatusBarManager";
+import useAnimatedComponents from "./hooks/useAnimatedComponents";
+import useImageIndexChange from "./hooks/useImageIndexChange";
+import useRequestClose from "./hooks/useRequestClose";
+const DEFAULT_ANIMATION_TYPE = "fade";
+const DEFAULT_BG_COLOR = "#000";
+const DEFAULT_DELAY_LONG_PRESS = 800;
+const SCREEN = Dimensions.get("screen");
+const SCREEN_WIDTH = SCREEN.width;
+function ImageViewing({ images, keyExtractor, imageIndex, visible, onRequestClose, onLongPress = () => { }, onImageIndexChange, animationType = DEFAULT_ANIMATION_TYPE, backgroundColor = DEFAULT_BG_COLOR, presentationStyle, swipeToCloseEnabled, doubleTapToZoomEnabled, delayLongPress = DEFAULT_DELAY_LONG_PRESS, HeaderComponent, FooterComponent, }) {
+    const imageList = useRef(null);
+    const [opacity, onRequestCloseEnhanced] = useRequestClose(onRequestClose);
+    const [currentImageIndex, onScroll] = useImageIndexChange(imageIndex, SCREEN);
+    const [headerTransform, footerTransform, toggleBarsVisible] = useAnimatedComponents();
+    useEffect(() => {
+        if (onImageIndexChange) {
+            onImageIndexChange(currentImageIndex);
+        }
+    }, [currentImageIndex]);
+    const onZoom = useCallback((isScaled) => {
+        var _a;
+        // @ts-ignore
+        (_a = imageList === null || imageList === void 0 ? void 0 : imageList.current) === null || _a === void 0 ? void 0 : _a.setNativeProps({ scrollEnabled: !isScaled });
+        toggleBarsVisible(!isScaled);
+    }, [imageList]);
+    if (!visible) {
+        return null;
+    }
+    return (<Modal transparent={presentationStyle === "overFullScreen"} visible={visible} presentationStyle={presentationStyle} animationType={animationType} onRequestClose={onRequestCloseEnhanced} supportedOrientations={["portrait"]} hardwareAccelerated>
+      <StatusBarManager presentationStyle={presentationStyle}/>
+      <View style={[styles.container, { opacity, backgroundColor }]}>
+        <Animated.View style={[styles.header, { transform: headerTransform }]}>
+          {typeof HeaderComponent !== "undefined" ? (React.createElement(HeaderComponent, {
+            imageIndex: currentImageIndex,
+        })) : (<ImageDefaultHeader onRequestClose={onRequestCloseEnhanced}/>)}
+        </Animated.View>
+        <VirtualizedList ref={imageList} data={images} horizontal pagingEnabled windowSize={2} initialNumToRender={1} maxToRenderPerBatch={1} showsHorizontalScrollIndicator={false} showsVerticalScrollIndicator={false} initialScrollIndex={imageIndex} getItem={(_, index) => images[index]} getItemCount={() => images.length} getItemLayout={(_, index) => ({
+            length: SCREEN_WIDTH,
+            offset: SCREEN_WIDTH * index,
+            index,
+        })} renderItem={({ item: imageSrc }) => (<ImageItem onZoom={onZoom} imageSrc={imageSrc} onRequestClose={onRequestCloseEnhanced} onLongPress={onLongPress} delayLongPress={delayLongPress} swipeToCloseEnabled={swipeToCloseEnabled} doubleTapToZoomEnabled={doubleTapToZoomEnabled}/>)} onMomentumScrollEnd={onScroll} 
+    //@ts-ignore
+    keyExtractor={(imageSrc, index) => keyExtractor
+            ? keyExtractor(imageSrc, index)
+            : typeof imageSrc === "number"
+                ? `${imageSrc}`
+                : imageSrc.uri}/>
+        {typeof FooterComponent !== "undefined" && (<Animated.View style={[styles.footer, { transform: footerTransform }]}>
+            {React.createElement(FooterComponent, {
+                imageIndex: currentImageIndex,
+            })}
+          </Animated.View>)}
+      </View>
+    </Modal>);
+}
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: "#000",
+    },
+    header: {
+        position: "absolute",
+        width: "100%",
+        zIndex: 1,
+        top: 0,
+    },
+    footer: {
+        position: "absolute",
+        width: "100%",
+        zIndex: 1,
+        bottom: 0,
+    },
+});
+const EnhancedImageViewing = (props) => (<ImageViewing key={props.imageIndex} {...props}/>);
+export default EnhancedImageViewing;

package/dist/components/ImageDefaultHeader.d.ts

@@ -0,0 +1,13 @@
+/**
+ * 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";
+type Props = {
+    onRequestClose: () => void;
+};
+declare const ImageDefaultHeader: ({ onRequestClose }: Props) => React.JSX.Element;
+export default ImageDefaultHeader;

package/dist/components/ImageDefaultHeader.js

@@ -0,0 +1,38 @@
+/**
+ * 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 { SafeAreaView, Text, TouchableOpacity, StyleSheet } from "react-native";
+const HIT_SLOP = { top: 16, left: 16, bottom: 16, right: 16 };
+const ImageDefaultHeader = ({ onRequestClose }) => (<SafeAreaView style={styles.root}>
+    <TouchableOpacity style={styles.closeButton} onPress={onRequestClose} hitSlop={HIT_SLOP}>
+      <Text style={styles.closeText}>✕</Text>
+    </TouchableOpacity>
+  </SafeAreaView>);
+const styles = StyleSheet.create({
+    root: {
+        alignItems: "flex-end",
+    },
+    closeButton: {
+        marginRight: 8,
+        marginTop: 8,
+        width: 44,
+        height: 44,
+        alignItems: "center",
+        justifyContent: "center",
+        borderRadius: 22,
+        backgroundColor: "#00000077",
+    },
+    closeText: {
+        lineHeight: 22,
+        fontSize: 19,
+        textAlign: "center",
+        color: "#FFF",
+        includeFontPadding: false,
+    },
+});
+export default ImageDefaultHeader;

package/dist/components/ImageItem/ImageItem.android.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 React from "react";
+import { ImageSource } from "../../@types";
+type Props = {
+    imageSrc: ImageSource;
+    onRequestClose: () => void;
+    onZoom: (isZoomed: boolean) => void;
+    onLongPress: (image: ImageSource) => void;
+    delayLongPress: number;
+    swipeToCloseEnabled?: boolean;
+    doubleTapToZoomEnabled?: boolean;
+};
+declare const _default: React.MemoExoticComponent<({ imageSrc, onZoom, onRequestClose, onLongPress, delayLongPress, swipeToCloseEnabled, doubleTapToZoomEnabled, }: Props) => React.JSX.Element>;
+export default _default;

package/dist/components/ImageItem/ImageItem.android.js

@@ -0,0 +1,83 @@
+/**
+ * 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, { useCallback, useRef, useState } from "react";
+import { Animated, ScrollView, Dimensions, StyleSheet, } from "react-native";
+import useImageDimensions from "../../hooks/useImageDimensions";
+import usePanResponder from "../../hooks/usePanResponder";
+import { getImageStyles, getImageTransform } from "../../utils";
+import { ImageLoading } from "./ImageLoading";
+const SWIPE_CLOSE_OFFSET = 75;
+const SWIPE_CLOSE_VELOCITY = 1.75;
+const SCREEN = Dimensions.get("window");
+const SCREEN_WIDTH = SCREEN.width;
+const SCREEN_HEIGHT = SCREEN.height;
+const ImageItem = ({ imageSrc, onZoom, onRequestClose, onLongPress, delayLongPress, swipeToCloseEnabled = true, doubleTapToZoomEnabled = true, }) => {
+    const imageContainer = useRef(null);
+    const imageDimensions = useImageDimensions(imageSrc);
+    const [translate, scale] = getImageTransform(imageDimensions, SCREEN);
+    const scrollValueY = new Animated.Value(0);
+    const [isLoaded, setLoadEnd] = useState(false);
+    const onLoaded = useCallback(() => setLoadEnd(true), []);
+    const onZoomPerformed = useCallback((isZoomed) => {
+        onZoom(isZoomed);
+        if (imageContainer === null || imageContainer === void 0 ? void 0 : imageContainer.current) {
+            imageContainer.current.setNativeProps({
+                scrollEnabled: !isZoomed,
+            });
+        }
+    }, [imageContainer]);
+    const onLongPressHandler = useCallback(() => {
+        onLongPress(imageSrc);
+    }, [imageSrc, onLongPress]);
+    const [panHandlers, scaleValue, translateValue] = usePanResponder({
+        initialScale: scale || 1,
+        initialTranslate: translate || { x: 0, y: 0 },
+        onZoom: onZoomPerformed,
+        doubleTapToZoomEnabled,
+        onLongPress: onLongPressHandler,
+        delayLongPress,
+    });
+    const imagesStyles = getImageStyles(imageDimensions, translateValue, scaleValue);
+    const imageOpacity = scrollValueY.interpolate({
+        inputRange: [-SWIPE_CLOSE_OFFSET, 0, SWIPE_CLOSE_OFFSET],
+        outputRange: [0.7, 1, 0.7],
+    });
+    const imageStylesWithOpacity = { ...imagesStyles, opacity: imageOpacity };
+    const onScrollEndDrag = ({ nativeEvent, }) => {
+        var _a, _b, _c, _d;
+        const velocityY = (_b = (_a = nativeEvent === null || nativeEvent === void 0 ? void 0 : nativeEvent.velocity) === null || _a === void 0 ? void 0 : _a.y) !== null && _b !== void 0 ? _b : 0;
+        const offsetY = (_d = (_c = nativeEvent === null || nativeEvent === void 0 ? void 0 : nativeEvent.contentOffset) === null || _c === void 0 ? void 0 : _c.y) !== null && _d !== void 0 ? _d : 0;
+        if ((Math.abs(velocityY) > SWIPE_CLOSE_VELOCITY &&
+            offsetY > SWIPE_CLOSE_OFFSET) ||
+            offsetY > SCREEN_HEIGHT / 2) {
+            onRequestClose();
+        }
+    };
+    const onScroll = ({ nativeEvent, }) => {
+        var _a, _b;
+        const offsetY = (_b = (_a = nativeEvent === null || nativeEvent === void 0 ? void 0 : nativeEvent.contentOffset) === null || _a === void 0 ? void 0 : _a.y) !== null && _b !== void 0 ? _b : 0;
+        scrollValueY.setValue(offsetY);
+    };
+    return (<ScrollView ref={imageContainer} style={styles.listItem} pagingEnabled nestedScrollEnabled showsHorizontalScrollIndicator={false} showsVerticalScrollIndicator={false} contentContainerStyle={styles.imageScrollContainer} scrollEnabled={swipeToCloseEnabled} {...(swipeToCloseEnabled && {
+        onScroll,
+        onScrollEndDrag,
+    })}>
+      <Animated.Image {...panHandlers} source={imageSrc} style={imageStylesWithOpacity} onLoad={onLoaded}/>
+      {(!isLoaded || !imageDimensions) && <ImageLoading />}
+    </ScrollView>);
+};
+const styles = StyleSheet.create({
+    listItem: {
+        width: SCREEN_WIDTH,
+        height: SCREEN_HEIGHT,
+    },
+    imageScrollContainer: {
+        height: SCREEN_HEIGHT * 2,
+    },
+});
+export default React.memo(ImageItem);

package/dist/components/ImageItem/ImageItem.ios.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 React from "react";
+import { ImageSource } from "../../@types";
+type Props = {
+    imageSrc: ImageSource;
+    onRequestClose: () => void;
+    onZoom: (scaled: boolean) => void;
+    onLongPress: (image: ImageSource) => void;
+    delayLongPress: number;
+    swipeToCloseEnabled?: boolean;
+    doubleTapToZoomEnabled?: boolean;
+};
+declare const _default: React.MemoExoticComponent<({ imageSrc, onZoom, onRequestClose, onLongPress, delayLongPress, swipeToCloseEnabled, doubleTapToZoomEnabled, }: Props) => React.JSX.Element>;
+export default _default;

package/dist/components/ImageItem/ImageItem.ios.js

@@ -0,0 +1,79 @@
+/**
+ * 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, { useCallback, useRef, useState } from "react";
+import { Animated, Dimensions, ScrollView, StyleSheet, View, TouchableWithoutFeedback, } from "react-native";
+import useDoubleTapToZoom from "../../hooks/useDoubleTapToZoom";
+import useImageDimensions from "../../hooks/useImageDimensions";
+import { getImageStyles, getImageTransform } from "../../utils";
+import { ImageLoading } from "./ImageLoading";
+const SWIPE_CLOSE_OFFSET = 75;
+const SWIPE_CLOSE_VELOCITY = 1.55;
+const SCREEN = Dimensions.get("screen");
+const SCREEN_WIDTH = SCREEN.width;
+const SCREEN_HEIGHT = SCREEN.height;
+const ImageItem = ({ imageSrc, onZoom, onRequestClose, onLongPress, delayLongPress, swipeToCloseEnabled = true, doubleTapToZoomEnabled = true, }) => {
+    const scrollViewRef = useRef(null);
+    const [loaded, setLoaded] = useState(false);
+    const [scaled, setScaled] = useState(false);
+    const imageDimensions = useImageDimensions(imageSrc);
+    const handleDoubleTap = useDoubleTapToZoom(scrollViewRef, scaled, SCREEN);
+    const [translate, scale] = getImageTransform(imageDimensions, SCREEN);
+    const scrollValueY = new Animated.Value(0);
+    const scaleValue = new Animated.Value(scale || 1);
+    const translateValue = new Animated.ValueXY(translate);
+    const maxScale = scale && scale > 0 ? Math.max(1 / scale, 1) : 1;
+    const imageOpacity = scrollValueY.interpolate({
+        inputRange: [-SWIPE_CLOSE_OFFSET, 0, SWIPE_CLOSE_OFFSET],
+        outputRange: [0.5, 1, 0.5],
+    });
+    const imagesStyles = getImageStyles(imageDimensions, translateValue, scaleValue);
+    const imageStylesWithOpacity = { ...imagesStyles, opacity: imageOpacity };
+    const onScrollEndDrag = useCallback(({ nativeEvent }) => {
+        var _a, _b;
+        const velocityY = (_b = (_a = nativeEvent === null || nativeEvent === void 0 ? void 0 : nativeEvent.velocity) === null || _a === void 0 ? void 0 : _a.y) !== null && _b !== void 0 ? _b : 0;
+        const scaled = (nativeEvent === null || nativeEvent === void 0 ? void 0 : nativeEvent.zoomScale) > 1;
+        onZoom(scaled);
+        setScaled(scaled);
+        if (!scaled &&
+            swipeToCloseEnabled &&
+            Math.abs(velocityY) > SWIPE_CLOSE_VELOCITY) {
+            onRequestClose();
+        }
+    }, [scaled]);
+    const onScroll = ({ nativeEvent, }) => {
+        var _a, _b;
+        const offsetY = (_b = (_a = nativeEvent === null || nativeEvent === void 0 ? void 0 : nativeEvent.contentOffset) === null || _a === void 0 ? void 0 : _a.y) !== null && _b !== void 0 ? _b : 0;
+        if ((nativeEvent === null || nativeEvent === void 0 ? void 0 : nativeEvent.zoomScale) > 1) {
+            return;
+        }
+        scrollValueY.setValue(offsetY);
+    };
+    const onLongPressHandler = useCallback((event) => {
+        onLongPress(imageSrc);
+    }, [imageSrc, onLongPress]);
+    return (<View>
+      <ScrollView ref={scrollViewRef} style={styles.listItem} pinchGestureEnabled showsHorizontalScrollIndicator={false} showsVerticalScrollIndicator={false} maximumZoomScale={maxScale} contentContainerStyle={styles.imageScrollContainer} scrollEnabled={swipeToCloseEnabled} onScrollEndDrag={onScrollEndDrag} scrollEventThrottle={1} {...(swipeToCloseEnabled && {
+        onScroll,
+    })}>
+        {(!loaded || !imageDimensions) && <ImageLoading />}
+        <TouchableWithoutFeedback onPress={doubleTapToZoomEnabled ? handleDoubleTap : undefined} onLongPress={onLongPressHandler} delayLongPress={delayLongPress}>
+          <Animated.Image source={imageSrc} style={imageStylesWithOpacity} onLoad={() => setLoaded(true)}/>
+        </TouchableWithoutFeedback>
+      </ScrollView>
+    </View>);
+};
+const styles = StyleSheet.create({
+    listItem: {
+        width: SCREEN_WIDTH,
+        height: SCREEN_HEIGHT,
+    },
+    imageScrollContainer: {
+        height: SCREEN_HEIGHT,
+    },
+});
+export default React.memo(ImageItem);

package/dist/components/ImageItem/ImageLoading.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.
+ *
+ */
+import React from "react";
+export declare const ImageLoading: () => React.JSX.Element;

package/dist/components/ImageItem/ImageLoading.js

@@ -0,0 +1,30 @@
+/**
+ * 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 { 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 = () => (<View style={styles.loading}>
+    <ActivityIndicator size="small" color="#FFF"/>
+  </View>);
+const styles = StyleSheet.create({
+    listItem: {
+        width: SCREEN_WIDTH,
+        height: SCREEN_HEIGHT,
+    },
+    loading: {
+        width: SCREEN_WIDTH,
+        height: SCREEN_HEIGHT,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    imageScrollContainer: {
+        height: SCREEN_HEIGHT,
+    },
+});

package/dist/components/StatusBarManager.d.ts

@@ -0,0 +1,5 @@
+import { ModalProps } from "react-native";
+declare const StatusBarManager: ({ presentationStyle, }: {
+    presentationStyle?: ModalProps["presentationStyle"];
+}) => null;
+export default StatusBarManager;

package/dist/components/StatusBarManager.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/hooks/useAnimatedComponents.d.ts

@@ -0,0 +1,18 @@
+/**
+ * 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;

package/dist/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;