🍒 Cherry pick PR #6535 to staging 🍒

android/app/build.gradle

@@ -149,8 +149,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001011706
-        versionName "1.1.17-6"
+        versionCode 1001011707
+        versionName "1.1.17-7"
     }
     splits {
         abi {

ios/NewExpensify/Info.plist

@@ -31,7 +31,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.1.17.6</string>
+	<string>1.1.17.7</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSApplicationQueriesSchemes</key>

ios/NewExpensifyTests/Info.plist

@@ -19,6 +19,6 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.1.17.6</string>
+	<string>1.1.17.7</string>
 </dict>
 </plist>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.1.17-6",
+  "version": "1.1.17-7",
   "author": "Expensify, Inc.",
   "homepage": "https://new.expensify.com",
   "description": "New Expensify is the next generation of Expensify: a reimagination of payments based atop a foundation of chat.",

src/components/ImageView/index.js

@@ -21,6 +21,7 @@ class ImageView extends PureComponent {
         this.canUseTouchScreen = canUseTouchScreen();
         this.state = {
             containerHeight: 0,
+            containerWidth: 0,
             isZoomed: false,
             isDragging: false,
             isMouseDown: false,
@@ -85,9 +86,16 @@ class ImageView extends PureComponent {
             imgRight = imgLeft + (fitRate * width);
         }
 
-        this.setState({
-            imgWidth: width, imgHeight: height, imageLeft: imgLeft, imageTop: imgTop, imageRight: imgRight, imageBottom: imgBottom,
-        });
+        const newZoomScale = Math.min(this.state.containerWidth / width, this.state.containerHeight / height);
+        this.setState(prevState => ({
+            imgWidth: width,
+            zoomScale: prevState.zoomScale === 0 ? newZoomScale : prevState.zoomScale,
+            imgHeight: height,
+            imageLeft: imgLeft,
+            imageTop: imgTop,
+            imageRight: imgRight,
+            imageBottom: imgBottom,
+        }));
     }
 
     /**
@@ -169,6 +177,7 @@ class ImageView extends PureComponent {
                     const scale = imageHeight && imageWidth ? Math.min(width / imageWidth, height / imageHeight) : 0;
                     this.setState({
                         containerHeight: height,
+                        containerWidth: width,
                         zoomScale: scale,
                     });
                 }}
@@ -181,9 +190,10 @@ class ImageView extends PureComponent {
             >
                 <Pressable
                     style={{
-                        ...StyleUtils.getZoomSizingStyle(this.state.isZoomed, this.state.imgWidth, this.state.imgHeight, this.state.zoomScale, this.state.containerHeight),
+                        ...StyleUtils.getZoomSizingStyle(this.state.isZoomed, this.state.imgWidth, this.state.imgHeight, this.state.zoomScale,
+                            this.state.containerHeight, this.state.containerWidth),
                         ...StyleUtils.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/StyleUtils.js

@@ -88,29 +88,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,
     };
 }