diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js
index 96fd95cc5224..de7aafa20c03 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js
@@ -44,6 +44,9 @@ const ImageRenderer = (props) => {
Config.EXPENSIFY.URL_API_ROOT,
);
+ const imageWidth = htmlAttribs['data-expensify-width'] ? parseInt(htmlAttribs['data-expensify-width'], 10) : undefined;
+ const imageHeight = htmlAttribs['data-expensify-height'] ? parseInt(htmlAttribs['data-expensify-height'], 10) : undefined;
+
return (
{
previewSourceURL={previewSource}
style={styles.webViewStyles.tagStyles.img}
isAuthTokenRequired={isAttachment}
+ imageWidth={imageWidth}
+ imageHeight={imageHeight}
/>
)}
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 8cfcfe9aac73..e70becf96f45 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';
@@ -72,28 +72,18 @@ const ReportActionItemFragment = (props) => {
// If this is an attachment placeholder, return the placeholder component
if (props.isAttachment && props.loading) {
return (
-
- {Str.isImage(props.attachmentInfo.name)
- ? (
-
-
-
- ) : (
+ Str.isImage(props.attachmentInfo.name)
+ ? (
+ `} />
+ ) : (
+
- )}
-
+
+ )
);
}