[TS migration] Migrate 'ReportActionItemReportPreview.js' component to TypeScript

src/components/ImageWithSizeCalculation.tsx

@@ -1,6 +1,6 @@
 import delay from 'lodash/delay';
 import React, {useEffect, useRef, useState} from 'react';
-import type {StyleProp, ViewStyle} from 'react-native';
+import type {ImageSourcePropType, StyleProp, ViewStyle} from 'react-native';
 import {View} from 'react-native';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Log from '@libs/Log';
@@ -19,7 +19,7 @@ type OnLoadNativeEvent = {
 
 type ImageWithSizeCalculationProps = {
     /** Url for image to display */
-    url: string | number;
+    url: string | ImageSourcePropType;
 
     /** Any additional styles to apply */
     style?: StyleProp<ViewStyle>;

src/components/ReportActionItem/ReportActionItemImage.tsx

@@ -2,6 +2,7 @@ import Str from 'expensify-common/lib/str';
 import React from 'react';
 import type {ReactElement} from 'react';
 import {View} from 'react-native';
+import type {ImageSourcePropType} from 'react-native';
 import AttachmentModal from '@components/AttachmentModal';
 import EReceiptThumbnail from '@components/EReceiptThumbnail';
 import Image from '@components/Image';
@@ -17,10 +18,10 @@ import type {Transaction} from '@src/types/onyx';
 
 type ReportActionItemImageProps = {
     /** thumbnail URI for the image */
-    thumbnail?: string | number;
+    thumbnail?: string | ImageSourcePropType | null;
 
     /** URI for the image or local numeric reference for the image  */
-    image: string | number;
+    image: string | ImageSourcePropType;
 
     /** whether or not to enable the image preview modal */
     enablePreviewModal?: boolean;

src/components/ReportActionItem/ReportActionItemImages.tsx

@@ -6,20 +6,13 @@ import Text from '@components/Text';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
+import type {ThumbnailAndImageURI} from '@libs/ReceiptUtils';
 import variables from '@styles/variables';
-import type {Transaction} from '@src/types/onyx';
 import ReportActionItemImage from './ReportActionItemImage';
 
-type Image = {
-    thumbnail: string | number;
-    image: string | number;
-    transaction: Transaction;
-    isLocalFile: boolean;
-};
-
 type ReportActionItemImagesProps = {
     /** array of image and thumbnail URIs */
-    images: Image[];
+    images: ThumbnailAndImageURI[];
 
     // We're not providing default values for size and total and disabling the ESLint rule
     // because we want them to default to the length of images, but we can't set default props
@@ -79,7 +72,7 @@ function ReportActionItemImages({images, size, total, isHovered = false}: Report
                 const borderStyle = shouldShowBorder ? styles.reportActionItemImageBorder : {};
                 return (
                     <View
-                        key={`${index}-${image}`}
+                        key={`${index}-${image as string}`}
                         style={[styles.reportActionItemImage, borderStyle, hoverStyle]}
                     >
                         <ReportActionItemImage