From 789927cdcf9c4bdac776efafd3ea9fcc12bdd3fc Mon Sep 17 00:00:00 2001
From: Chirag Chandrakant Salian <chirag@expensify.com>
Date: Tue, 7 Jun 2022 16:28:06 -0700
Subject: [PATCH] Merge pull request #9346 from allroundexperts/fix-8590

Fix resizes on image upload regression issue

(cherry picked from commit b629b9de3026073420bc1cefbd4b58b1f254bd07)
---
 .../HTMLRenderers/ImageRenderer.js            |  2 +
 src/components/ThumbnailImage.js              | 38 ++++++++++++++++---
 .../home/report/ReportActionItemFragment.js   |  6 +--
 3 files changed, 38 insertions(+), 8 deletions(-)

diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js
index 9733a8ed29bf..f3e9009a72ca 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js
@@ -72,6 +72,8 @@ const ImageRenderer = (props) => {
                         previewSourceURL={previewSource}
                         style={styles.webViewStyles.tagStyles.img}
                         isAuthTokenRequired={isAttachment}
+                        imageWidth={imageWidth}
+                        imageHeight={imageHeight}
                     />
                 </PressableWithoutFocus>
             )}
diff --git a/src/components/ThumbnailImage.js b/src/components/ThumbnailImage.js
index 9d15be907014..3088a13a425b 100644
--- a/src/components/ThumbnailImage.js
+++ b/src/components/ThumbnailImage.js
@@ -19,11 +19,19 @@ const propTypes = {
     /** Do the urls require an authToken? */
     isAuthTokenRequired: PropTypes.bool.isRequired,
 
+    /** Width of the thumbnail image */
+    imageWidth: PropTypes.number,
+
+    /** Height of the thumbnail image */
+    imageHeight: PropTypes.number,
+
     ...windowDimensionsPropTypes,
 };
 
 const defaultProps = {
     style: {},
+    imageWidth: 200,
+    imageHeight: 200,
 };
 
 class ThumbnailImage extends PureComponent {
@@ -31,14 +39,25 @@ class ThumbnailImage extends PureComponent {
         super(props);
 
         this.updateImageSize = this.updateImageSize.bind(this);
-
+        const {thumbnailWidth, thumbnailHeight} = this.calculateThumbnailImageSize(props.imageWidth, props.imageHeight);
         this.state = {
-            thumbnailWidth: 200,
-            thumbnailHeight: 200,
+            thumbnailWidth,
+            thumbnailHeight,
         };
     }
 
-    updateImageSize({width, height}) {
+    /**
+     * Compute the thumbnails width and height given original image dimensions.
+     *
+     * @param {Number} width - Width of the original image.
+     * @param {Number} height - Height of the original image.
+     * @returns {Object} - Object containing thumbnails width and height.
+     */
+    calculateThumbnailImageSize(width, height) {
+        if (!width || !height) {
+            return {};
+        }
+
         // Width of the thumbnail works better as a constant than it does
         // a percentage of the screen width since it is relative to each screen
         // Note: Clamp minimum width 40px to support touch device
@@ -54,8 +73,17 @@ class ThumbnailImage extends PureComponent {
         } else {
             thumbnailScreenHeight = Math.round(thumbnailScreenWidth * aspectRatio);
         }
+        return {thumbnailWidth: thumbnailScreenWidth, thumbnailHeight: Math.max(40, thumbnailScreenHeight)};
+    }
 
-        this.setState({thumbnailWidth: thumbnailScreenWidth, thumbnailHeight: Math.max(40, thumbnailScreenHeight)});
+    /**
+     * Update the state with the computed thumbnail sizes.
+     *
+     * @param {{ width: number, height: number }} Params - width and height of the original image.
+     */
+    updateImageSize({width, height}) {
+        const {thumbnailWidth, thumbnailHeight} = this.calculateThumbnailImageSize(width, height);
+        this.setState({thumbnailWidth, thumbnailHeight});
     }
 
     render() {
diff --git a/src/pages/home/report/ReportActionItemFragment.js b/src/pages/home/report/ReportActionItemFragment.js
index 9d9171cda4ee..afab5787fb75 100644
--- a/src/pages/home/report/ReportActionItemFragment.js
+++ b/src/pages/home/report/ReportActionItemFragment.js
@@ -1,5 +1,5 @@
 import React, {memo} from 'react';
-import {ActivityIndicator, ImageBackground, View} from 'react-native';
+import {ActivityIndicator, View} from 'react-native';
 import PropTypes from 'prop-types';
 import Str from 'expensify-common/lib/str';
 import reportActionFragmentPropTypes from './reportActionFragmentPropTypes';
@@ -82,8 +82,8 @@ const ReportActionItemFragment = (props) => {
                                     color={themeColors.textSupporting}
                                     style={[styles.flex1]}
                                 />
-                            )}
-                    </View>
+                            </View>
+                        )
                 );
             }