From 73afc16f124e5d2174da5ba73308f5fc8a3e3974 Mon Sep 17 00:00:00 2001
From: Han MingYun <railway17@outlook.com>
Date: Tue, 30 Nov 2021 20:57:57 +0800
Subject: [PATCH] 6326: fix bug reported at #6518

---
 src/components/ImageView/index.js | 14 +++++++++---
 src/styles/styles.js              | 36 ++++++++++++++++++++++---------
 2 files changed, 37 insertions(+), 13 deletions(-)

diff --git a/src/components/ImageView/index.js b/src/components/ImageView/index.js
index a2115383619d..a23e53646322 100644
--- a/src/components/ImageView/index.js
+++ b/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) => {
diff --git a/src/styles/styles.js b/src/styles/styles.js
index cd91b7eab3ff..865795044fb9 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -2297,29 +2297,45 @@ 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) {
+        if (zoomScale > 1) {
+            return {
+                height: `${imgHeight * zoomScale}px`,
+                width: `${imgWidth * zoomScale}px`,
+            };
+        }
         return {
-            height: `${(imgHeight * zoomScale)}px`,
-            width: `${(imgWidth * zoomScale)}px`,
+            height: `${imgHeight}px`,
+            width: `${imgWidth}px`,
+            top,
+            left,
+        };
+    }
+    if (zoomScale > 1) {
+        return {
+            height: `${imgHeight}px`,
+            width: `${imgWidth}px`,
+            top,
+            left,
         };
     }
-
-    const top = `${(containerHeight - imgHeight) / 2}px`;
-    const left = `calc(50% - ${imgWidth / 2}px)`;
     return {
-        height: `${imgHeight}px`,
-        width: `${imgWidth}px`,
-        top,
-        left,
+        height: `${imgHeight * zoomScale}px`,
+        width: `${imgWidth * zoomScale}px`,
     };
 }