fix image props for web

src/components/Image/imagePropTypes.js

@@ -1,20 +1,14 @@
 import PropTypes from 'prop-types';
 import stylePropTypes from '../../styles/stylePropTypes';
+import sourcePropTypes from './sourcePropTypes';
 import RESIZE_MODES from './resizeModes';
 
 const imagePropTypes = {
     /** Styles for the Image */
     style: stylePropTypes,
 
     /** The static asset or URI source of the image */
-    source: PropTypes.oneOfType([
-        PropTypes.number,
-        PropTypes.shape({
-            uri: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-            // eslint-disable-next-line react/forbid-prop-types
-            headers: PropTypes.object,
-        }),
-    ]).isRequired,
+    source: sourcePropTypes.isRequired,
 
     /** Should an auth token be included in the image request */
     isAuthTokenRequired: PropTypes.bool,

src/components/Image/index.native.js

@@ -18,9 +18,6 @@ function Image(props) {
     const {source, isAuthTokenRequired, session, ...rest} = props;
 
     let imageSource = source;
-    if (source && source.uri && typeof source.uri === 'number') {
-        imageSource = source.uri;
-    }
     if (typeof imageSource !== 'number' && isAuthTokenRequired) {
         const authToken = lodashGet(props, 'session.encryptedAuthToken', null);
         imageSource = {

src/components/Image/sourcePropTypes/index.js

@@ -0,0 +1,11 @@
+import PropTypes from 'prop-types';
+
+export default PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.shape({
+        uri: PropTypes.string.isRequired,
+        // eslint-disable-next-line react/forbid-prop-types
+        headers: PropTypes.object,
+    }),
+    PropTypes.string,
+]);

src/components/Image/sourcePropTypes/index.native.js

@@ -0,0 +1,10 @@
+import PropTypes from 'prop-types';
+
+export default PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.shape({
+        uri: PropTypes.string.isRequired,
+        // eslint-disable-next-line react/forbid-prop-types
+        headers: PropTypes.object,
+    }),
+]);

src/components/ReportActionItem/ReportActionItemImage.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import lodashGet from 'lodash/get';
 import styles from '../../styles/styles';
 import Image from '../Image';
 import ThumbnailImage from '../ThumbnailImage';
@@ -10,13 +11,14 @@ import {ShowContextMenuContext} from '../ShowContextMenuContext';
 import Navigation from '../../libs/Navigation/Navigation';
 import PressableWithoutFocus from '../Pressable/PressableWithoutFocus';
 import useLocalize from '../../hooks/useLocalize';
+import sourcePropTypes from '../Image/sourcePropTypes';
 
 const propTypes = {
     /** thumbnail URI for the image */
     thumbnail: PropTypes.string,
 
     /** URI for the image or local numeric reference for the image  */
-    image: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+    image: sourcePropTypes.isRequired,
 
     /** whether or not to enable the image preview modal */
     enablePreviewModal: PropTypes.bool,
@@ -37,7 +39,7 @@ function ReportActionItemImage({thumbnail, image, enablePreviewModal}) {
     const {translate} = useLocalize();
 
     if (thumbnail) {
-        const imageSource = tryResolveUrlFromApiRoot(image);
+        const imageSource = tryResolveUrlFromApiRoot(lodashGet(image, 'uri', image));
         const thumbnailSource = tryResolveUrlFromApiRoot(thumbnail);
         const thumbnailComponent = (
             <ThumbnailImage
@@ -72,7 +74,7 @@ function ReportActionItemImage({thumbnail, image, enablePreviewModal}) {
 
     return (
         <Image
-            source={{uri: image}}
+            source={image}
             style={[styles.w100, styles.h100]}
         />
     );

src/components/ReportActionItem/ReportActionItemImages.js

@@ -5,13 +5,14 @@ import _ from 'underscore';
 import styles from '../../styles/styles';
 import Text from '../Text';
 import ReportActionItemImage from './ReportActionItemImage';
+import sourcePropTypes from '../Image/sourcePropTypes';
 
 const propTypes = {
     /** array of image and thumbnail URIs */
     images: PropTypes.arrayOf(
         PropTypes.shape({
             thumbnail: PropTypes.string,
-            image: PropTypes.string,
+            image: sourcePropTypes,
         }),
     ).isRequired,
 

src/libs/ReceiptUtils.js

@@ -42,11 +42,11 @@ function getThumbnailAndImageURIs(path, filename) {
 
     // For local files, we won't have a thumbnail yet
     if (isReceiptImage && (path.startsWith('blob:') || path.startsWith('file:'))) {
-        return {thumbnail: null, image: path};
+        return {thumbnail: null, image: {uri: path}};
     }
 
     if (isReceiptImage) {
-        return {thumbnail: `${path}.1024.jpg`, image: path};
+        return {thumbnail: `${path}.1024.jpg`, image: {uri: path}};
     }
 
     const {fileExtension} = FileUtils.splitExtensionFromFileName(filename);