6326: fix bug reported at #6518

src/components/ImageView/index.js

@@ -20,6 +20,7 @@ class ImageView extends PureComponent {
         this.canUseTouchScreen = canUseTouchScreen();
         this.state = {
             containerHeight: 0,
+            containerWidth: 0,
             isZoomed: false,
             isDragging: false,
             isMouseDown: false,
@@ -68,6 +69,7 @@ class ImageView extends PureComponent {
         const isScreenWiderThanImage = (this.props.windowWidth / width) > 1;
         const isScreenTallerThanImage = (this.props.windowHeight / height) > 1;
         const aspect = width / height;
+        let scale = this.state.zoomScale;
         if (aspect > 1 && !isScreenWiderThanImage) {
             // In case Width fit Screen width and Height not fit the Screen height
             const fitRate = this.props.windowWidth / width;
@@ -84,8 +86,13 @@ class ImageView extends PureComponent {
             imgRight = imgLeft + (fitRate * width);
         }
 
+        // In case image loading is delayed than onLayout callback of the root View caused internet speed
+        if (scale == 0) {
+            scale = Math.min(this.state.containerWidth / width, this.state.containerHeight / height);
+        }
+
         this.setState({
-            imgWidth: width, imgHeight: height, imageLeft: imgLeft, imageTop: imgTop, imageRight: imgRight, imageBottom: imgBottom,
+            imgWidth: width, zoomScale: scale, imgHeight: height, imageLeft: imgLeft, imageTop: imgTop, imageRight: imgRight, imageBottom: imgBottom,
         });
     }
 
@@ -168,6 +175,7 @@ class ImageView extends PureComponent {
                     const scale = imageHeight && imageWidth ? Math.min(width / imageWidth, height / imageHeight) : 0;
                     this.setState({
                         containerHeight: height,
+                        containerWidth: width,
                         zoomScale: scale,
                     });
                 }}
@@ -180,9 +188,9 @@ class ImageView extends PureComponent {
             >
                 <Pressable
                     style={{
-                        ...getZoomSizingStyle(this.state.isZoomed, this.state.imgWidth, this.state.imgHeight, this.state.zoomScale, this.state.containerHeight),
+                        ...getZoomSizingStyle(this.state.isZoomed, this.state.imgWidth, this.state.imgHeight, this.state.zoomScale, this.state.containerHeight, this.state.containerWidth),
                         ...getZoomCursorStyle(this.state.isZoomed, this.state.isDragging),
-                        ...this.state.isZoomed ? styles.pRelative : styles.pAbsolute,
+                        ...this.state.isZoomed && this.state.zoomScale > 1 ? styles.pRelative : styles.pAbsolute,
                         ...styles.flex1,
                     }}
                     onPressIn={(e) => {

src/styles/styles.js

@@ -2297,29 +2297,57 @@ function getZoomCursorStyle(isZoomed, isDragging) {
  * @param {Number} imgHeight
  * @param {Number} zoomScale
  * @param {Number} containerHeight
+ * @param {Number} containerWidth
  * @return {Object}
  */
-function getZoomSizingStyle(isZoomed, imgWidth, imgHeight, zoomScale, containerHeight) {
+function getZoomSizingStyle(isZoomed, imgWidth, imgHeight, zoomScale, containerHeight, containerWidth) {
     if (imgWidth === 0 || imgHeight === 0) {
         return {
             height: isZoomed ? '250%' : '100%',
             width: isZoomed ? '250%' : '100%',
         };
     }
+    const top = `${Math.max((containerHeight - imgHeight) / 2, 0)}px`;
+    const left = `${Math.max((containerWidth - imgWidth) / 2, 0)}px`;
+
+    // Return different size and offset style based on zoomScale and isZoom.
     if (isZoomed) {
+        // When both width and height are smaller than container(modal) size, set the height by multiplying zoomScale if it is zoomed in.
+        if (zoomScale > 1) {
+            return {
+                height: `${imgHeight * zoomScale}px`,
+                width: `${imgWidth * zoomScale}px`,
+            };
+        }
+
+        // If image height and width are bigger than container size, display image with original size because original size is bigger and position absolute.
+        return {
+            height: `${imgHeight}px`,
+            width: `${imgWidth}px`,
+            top,
+            left,
+        };
+    }
+
+    // If image is not zoomed in and image size is smaller than container size, display with original size based on offset and position absolute.
+    if (zoomScale > 1) {
         return {
-            height: `${(imgHeight * zoomScale)}px`,
-            width: `${(imgWidth * zoomScale)}px`,
+            height: `${imgHeight}px`,
+            width: `${imgWidth}px`,
+            top,
+            left,
         };
     }
 
-    const top = `${(containerHeight - imgHeight) / 2}px`;
-    const left = `calc(50% - ${imgWidth / 2}px)`;
+    // If image is bigger than container size, display full image in the screen with scaled size (fit by container size) and position absolute.
+    // top, left offset should be different when displaying long or wide image.
+    const scaledTop = imgHeight > imgWidth ? 0 : `${Math.max((containerHeight - (imgHeight * zoomScale)) / 2, 0)}px`;
+    const scaledLeft = imgWidth > imgHeight ? 0 : `${Math.max((containerWidth - (imgWidth * zoomScale)) / 2, 0)}px`;
     return {
-        height: `${imgHeight}px`,
-        width: `${imgWidth}px`,
-        top,
-        left,
+        height: `${imgHeight * zoomScale}px`,
+        width: `${imgWidth * zoomScale}px`,
+        top: scaledTop,
+        left: scaledLeft,
     };
 }