diff --git a/src/components/Image/imagePropTypes.js b/src/components/Image/imagePropTypes.js index 3e9293bd2437..46ec83384d62 100644 --- a/src/components/Image/imagePropTypes.js +++ b/src/components/Image/imagePropTypes.js @@ -10,7 +10,7 @@ const imagePropTypes = { source: PropTypes.oneOfType([ PropTypes.number, PropTypes.shape({ - uri: PropTypes.string.isRequired, + uri: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, // eslint-disable-next-line react/forbid-prop-types headers: PropTypes.object, }), diff --git a/src/components/Image/index.native.js b/src/components/Image/index.native.js index 0713fa6c7fe2..9d9ad600b1d4 100644 --- a/src/components/Image/index.native.js +++ b/src/components/Image/index.native.js @@ -18,7 +18,10 @@ function Image(props) { const {source, isAuthTokenRequired, session, ...rest} = props; let imageSource = source; - if (typeof source !== 'number' && isAuthTokenRequired) { + if (source && source.uri && typeof source.uri === 'number') { + imageSource = source.uri; + } + if (typeof imageSource !== 'number' && isAuthTokenRequired) { const authToken = lodashGet(props, 'session.encryptedAuthToken', null); imageSource = { ...source, diff --git a/src/components/ReportActionItem/MoneyRequestPreview.js b/src/components/ReportActionItem/MoneyRequestPreview.js index 5c834a53a00e..0c03f446939c 100644 --- a/src/components/ReportActionItem/MoneyRequestPreview.js +++ b/src/components/ReportActionItem/MoneyRequestPreview.js @@ -223,7 +223,7 @@ function MoneyRequestPreview(props) { {hasReceipt && ( )} diff --git a/src/components/ReportActionItem/ReportActionItemImage.js b/src/components/ReportActionItem/ReportActionItemImage.js index 089df6cb4a6f..5f8444af0b21 100644 --- a/src/components/ReportActionItem/ReportActionItemImage.js +++ b/src/components/ReportActionItem/ReportActionItemImage.js @@ -15,8 +15,8 @@ const propTypes = { /** thumbnail URI for the image */ thumbnail: PropTypes.string, - /** URI for the image */ - image: PropTypes.string.isRequired, + /** URI for the image or local numeric reference for the image */ + image: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, /** whether or not to enable the image preview modal */ enablePreviewModal: PropTypes.bool, diff --git a/src/components/ReportActionItem/ReportPreview.js b/src/components/ReportActionItem/ReportPreview.js index e962d4ea757b..dbf690b4982c 100644 --- a/src/components/ReportActionItem/ReportPreview.js +++ b/src/components/ReportActionItem/ReportPreview.js @@ -179,7 +179,7 @@ function ReportPreview(props) { {hasReceipts && ( ReceiptUtils.getThumbnailAndImageURIs(receipt.source, filename))} + images={_.map(lastThreeTransactionsWithReceipts, ({receipt, filename}) => ReceiptUtils.getThumbnailAndImageURIs(receipt.source, filename || ''))} size={3} total={transactionsWithReceipts.length} isHovered={props.isHovered || isScanning}