Feature/fix display image android

.gitignore

@@ -1,4 +1,5 @@
 node_modules/
-dist/
+#dist/
 .expo
-.vscode
+.vscode
+.idea

.prettierignore

@@ -0,0 +1,3 @@
+node_modules
+.expo
+yarn.lock

.prettierrc

@@ -0,0 +1,11 @@
+{
+  "trailingComma": "es5",
+  "semi": true,
+  "singleQuote": true,
+  "quoteProps": "consistent",
+  "bracketSpacing": true,
+  "bracketSameLine": false,
+  "arrowParens": "always",
+  "tabWidth": 2,
+  "singleAttributePerLine": false
+}

README.md

@@ -61,9 +61,9 @@ const [visible, setIsVisible] = useState(false);
 ## 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 |
+| `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     |
@@ -77,6 +77,12 @@ const [visible, setIsVisible] = useState(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    |
+| `onPress`                | Function called when image is single pressed                                                        | function (image: ImageSource)                               | false    |
+| `doubleTapDelay`         | Delay in ms, to handle multiple taps: default `300`                                                 | number                                                      | false    |    
+| `withBlurBackground`     | Add a blur background: default `true`                                                               | boolean                                                     | false    |    
+| `blurRadius`             | The blur radius of the blur filter added to the image: default `10`                                 | number                                                      | false    |    
+| `blurOverlayColor`       | A string that represent a color. You should use a transparency color.                               | string                                                      | false    |  
+| `imageProps`             | An object that represent expo-image props to passed to every image                                  | ImageProps                                                      | false    |  
 
 - type ImageSource = ImageURISource | ImageRequireSource
 

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;

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 {};

dist/ImageViewing.d.ts

@@ -0,0 +1,42 @@
+/**
+ * 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 { ImageProps } from 'expo-image';
+import { ComponentType } from 'react';
+import { ModalProps } from 'react-native';
+import { ImageSource } from './@types';
+type Orientations = 'portrait' | 'portrait-upside-down' | 'landscape' | 'landscape-left' | 'landscape-right';
+type Props = {
+    images: ImageSource[];
+    keyExtractor?: (imageSrc: ImageSource, index: number) => string;
+    imageIndex: number;
+    visible: boolean;
+    onRequestClose: () => void;
+    onPress?: (image: ImageSource) => 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;
+    }>;
+    doubleTapDelay?: number;
+    withBlurBackground?: boolean;
+    blurRadius?: number;
+    blurOverlayColor?: string;
+    imageProps?: ImageProps;
+    supportedOrientations?: Orientations[];
+};
+declare const EnhancedImageViewing: (props: Props) => JSX.Element;
+export default EnhancedImageViewing;

dist/ImageViewing.js

@@ -0,0 +1,136 @@
+/**
+ * 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 { Image } from 'expo-image';
+import React, { useCallback, useEffect, useRef, useState, useTransition, } from 'react';
+import { Animated, Modal, StyleSheet, View, VirtualizedList, useWindowDimensions, } from 'react-native';
+import ImageDefaultHeader from './components/ImageDefaultHeader';
+import ImageItem from './components/ImageItem/ImageItem';
+import StatusBarManager from './components/StatusBarManager';
+import useAnimatedComponents from './hooks/useAnimatedComponents';
+import useRequestClose from './hooks/useRequestClose';
+const DEFAULT_ANIMATION_TYPE = 'fade';
+const DEFAULT_BG_COLOR = '#000';
+const DEFAULT_DELAY_LONG_PRESS = 800;
+const DEFAULT_DOUBLE_TAP_DELAY = 300;
+function ImageViewing({ images, keyExtractor, imageIndex, visible, onRequestClose, onPress = () => { }, onLongPress = () => { }, onImageIndexChange, animationType = DEFAULT_ANIMATION_TYPE, backgroundColor = DEFAULT_BG_COLOR, presentationStyle, swipeToCloseEnabled, doubleTapToZoomEnabled, delayLongPress = DEFAULT_DELAY_LONG_PRESS, HeaderComponent, FooterComponent, doubleTapDelay = DEFAULT_DOUBLE_TAP_DELAY, withBlurBackground = true, blurRadius = 10, blurOverlayColor, imageProps, supportedOrientations = ['portrait'], }) {
+    const imageList = useRef(null);
+    const [currentIndex, setCurrentIndex] = useState(0);
+    const [isRotating, startRotation] = useTransition();
+    const { width: windowWidth, height: windowHeight } = useWindowDimensions();
+    const [opacity, onRequestCloseEnhanced] = useRequestClose(onRequestClose);
+    const [headerTransform, footerTransform, toggleBarsVisible] = useAnimatedComponents();
+    const onZoom = useCallback((isScaled) => {
+        var _a;
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        (_a = imageList === null || imageList === void 0 ? void 0 : imageList.current) === null || _a === void 0 ? void 0 : _a.setNativeProps({ scrollEnabled: !isScaled });
+        toggleBarsVisible(!isScaled);
+    }, [toggleBarsVisible, imageList]);
+    // Set default index when visible change
+    useEffect(() => {
+        if (visible) {
+            setCurrentIndex(imageIndex);
+        }
+    }, [visible, imageIndex]);
+    // When windowWidth change, reset list to currentIndex
+    useEffect(() => {
+        if (imageList.current) {
+            startRotation(() => {
+                var _a;
+                // @ts-ignore
+                (_a = imageList.current) === null || _a === void 0 ? void 0 : _a.scrollToIndex({
+                    index: currentIndex,
+                    animated: false,
+                });
+            });
+        }
+    }, [windowWidth, imageList]);
+    useEffect(() => {
+        onImageIndexChange === null || onImageIndexChange === void 0 ? void 0 : onImageIndexChange(currentIndex);
+    }, [onImageIndexChange, currentIndex]);
+    const onViewableItemsChanged = useCallback(({ viewableItems, changed, }) => {
+        var _a;
+        if (isRotating)
+            return;
+        const index = (_a = viewableItems[0].index) !== null && _a !== void 0 ? _a : 0;
+        setCurrentIndex(index);
+    }, []);
+    const viewabilityConfigCallbackPairs = useRef([
+        {
+            onViewableItemsChanged,
+        },
+    ]);
+    if (!visible) {
+        return null;
+    }
+    return (<Modal transparent={presentationStyle === 'overFullScreen'} visible={visible} presentationStyle={presentationStyle} animationType={animationType} onRequestClose={onRequestCloseEnhanced} supportedOrientations={supportedOrientations} hardwareAccelerated>
+      <StatusBarManager presentationStyle={presentationStyle}/>
+      <View style={[styles.container, { opacity, backgroundColor }]}>
+        <Animated.View style={[styles.header, { transform: headerTransform }]}>
+          {typeof HeaderComponent !== 'undefined' ? (React.createElement(HeaderComponent, {
+            imageIndex: currentIndex,
+        })) : (<ImageDefaultHeader onRequestClose={onRequestCloseEnhanced}/>)}
+        </Animated.View>
+        <VirtualizedList ref={imageList} data={images} horizontal pagingEnabled windowSize={2} initialNumToRender={1} maxToRenderPerBatch={1} showsHorizontalScrollIndicator={false} showsVerticalScrollIndicator={false} initialScrollIndex={imageIndex} getItemCount={() => images.length} getItem={(data, index) => {
+            return data[index];
+        }} getItemLayout={(_, index) => ({
+            length: windowWidth,
+            offset: windowWidth * index,
+            index,
+        })} renderItem={({ item: imageSrc }) => {
+            return (<>
+                {withBlurBackground && (<Image {...imageProps} source={imageSrc} style={styles.absolute} blurRadius={blurRadius}/>)}
+                <View style={withBlurBackground && blurOverlayColor
+                    ? { backgroundColor: blurOverlayColor }
+                    : {}}>
+                  <ImageItem onZoom={onZoom} imageSrc={imageSrc} onRequestClose={onRequestCloseEnhanced} onPress={onPress} onLongPress={onLongPress} delayLongPress={delayLongPress} swipeToCloseEnabled={swipeToCloseEnabled} doubleTapToZoomEnabled={doubleTapToZoomEnabled} doubleTapDelay={doubleTapDelay} imageProps={imageProps} windowSize={{ width: windowWidth, height: windowHeight }}/>
+                </View>
+              </>);
+        }} viewabilityConfig={{
+            itemVisiblePercentThreshold: 100,
+        }} viewabilityConfigCallbackPairs={viewabilityConfigCallbackPairs.current} keyExtractor={(imageSrc, index) => {
+            var _a, _b;
+            return ((_a = keyExtractor === null || keyExtractor === void 0 ? void 0 : keyExtractor(imageSrc, index)) !== null && _a !== void 0 ? _a : typeof imageSrc === 'number')
+                ? imageSrc.toString()
+                : (_b = imageSrc === null || imageSrc === void 0 ? void 0 : imageSrc.uri) !== null && _b !== void 0 ? _b : index.toString();
+        }}/>
+        {typeof FooterComponent !== 'undefined' && (<Animated.View style={[styles.footer, { transform: footerTransform }]}>
+            {React.createElement(FooterComponent, {
+                imageIndex: currentIndex,
+            })}
+          </Animated.View>)}
+      </View>
+    </Modal>);
+}
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: '#000',
+    },
+    absolute: {
+        position: 'absolute',
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0,
+    },
+    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;

dist/components/ImageDefaultHeader.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.
+ *
+ */
+type Props = {
+    onRequestClose: () => void;
+};
+declare const ImageDefaultHeader: ({ onRequestClose }: Props) => JSX.Element;
+export default ImageDefaultHeader;

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;

dist/components/ImageItem/ImageItem.android.d.ts

@@ -0,0 +1,28 @@
+/**
+ * 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 { ImageProps } from 'react-native';
+import { ImageSource } from '../../@types';
+type Props = {
+    imageSrc: ImageSource;
+    onRequestClose: () => void;
+    onZoom: (isZoomed: boolean) => void;
+    onPress: (image: ImageSource) => void;
+    onLongPress: (image: ImageSource) => void;
+    delayLongPress: number;
+    swipeToCloseEnabled?: boolean;
+    doubleTapToZoomEnabled?: boolean;
+    doubleTapDelay: number;
+    imageProps?: ImageProps;
+    windowSize: {
+        width: number;
+        height: number;
+    };
+};
+declare const _default: React.MemoExoticComponent<({ imageSrc, onZoom, onRequestClose, onPress, onLongPress, delayLongPress, swipeToCloseEnabled, doubleTapToZoomEnabled, doubleTapDelay, imageProps, windowSize, }: Props) => JSX.Element>;
+export default _default;