diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js
index de7aafa20c03..96fd95cc5224 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js
@@ -44,9 +44,6 @@ 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 3088a13a425b..9d15be907014 100644
--- a/src/components/ThumbnailImage.js
+++ b/src/components/ThumbnailImage.js
@@ -19,19 +19,11 @@ 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 {
@@ -39,25 +31,14 @@ class ThumbnailImage extends PureComponent {
super(props);
this.updateImageSize = this.updateImageSize.bind(this);
- const {thumbnailWidth, thumbnailHeight} = this.calculateThumbnailImageSize(props.imageWidth, props.imageHeight);
+
this.state = {
- thumbnailWidth,
- thumbnailHeight,
+ thumbnailWidth: 200,
+ thumbnailHeight: 200,
};
}
- /**
- * 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 {};
- }
-
+ updateImageSize({width, height}) {
// 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
@@ -73,17 +54,8 @@ class ThumbnailImage extends PureComponent {
} else {
thumbnailScreenHeight = Math.round(thumbnailScreenWidth * aspectRatio);
}
- return {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});
+ this.setState({thumbnailWidth: thumbnailScreenWidth, thumbnailHeight: Math.max(40, thumbnailScreenHeight)});
}
render() {
diff --git a/src/pages/home/report/ReportActionItemFragment.js b/src/pages/home/report/ReportActionItemFragment.js
index e70becf96f45..8cfcfe9aac73 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, View} from 'react-native';
+import {ActivityIndicator, ImageBackground, View} from 'react-native';
import PropTypes from 'prop-types';
import Str from 'expensify-common/lib/str';
import reportActionFragmentPropTypes from './reportActionFragmentPropTypes';
@@ -72,18 +72,28 @@ 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)
+ ? (
+
+
+
+ ) : (
-
- )
+ )}
+
);
}