feat: Add thumbnail support for receipts and improve image handling

src/libs/DebugUtils.ts

@@ -799,6 +799,7 @@ function validateReportActionDraftProperty(key: keyof ReportAction, value: strin
                 reservationList: 'string',
                 isTestReceipt: 'boolean',
                 isTestDriveReceipt: 'boolean',
+                thumbnail: 'string',
             });
         case 'childRecentReceiptTransactionIDs':
             return validateObject<ObjectElement<ReportAction, 'childRecentReceiptTransactionIDs'>>(value, {}, 'string');
@@ -1141,6 +1142,7 @@ function validateTransactionDraftProperty(key: keyof Transaction, value: string)
                 reservationList: 'array',
                 isTestReceipt: 'boolean',
                 isTestDriveReceipt: 'boolean',
+                thumbnail: 'string',
             });
         case 'taxRate':
             return validateObject<ObjectElement<Transaction, 'taxRate'>>(value, {

src/libs/ReceiptUtils.ts

@@ -62,9 +62,9 @@ function getThumbnailAndImageURIs(transaction: OnyxEntry<Transaction>, receiptPa
         return {image: ROUTES.ERECEIPT.getRoute(transaction.transactionID), transaction, filename};
     }
 
-    // For local files, we won't have a thumbnail yet
+    // For local files, use the pre-generated thumbnail if available for fast preview
     if ((isReceiptImage || isReceiptPDF) && typeof path === 'string' && (path.startsWith('blob:') || path.startsWith('file:'))) {
-        return {image: path, isLocalFile: true, filename};
+        return {thumbnail: transaction?.receipt?.thumbnail, image: path, isLocalFile: true, filename};
     }
 
     if (isReceiptImage) {

src/libs/actions/IOU/index.ts

@@ -771,7 +771,7 @@
     currency: string;
     created: string;
     merchant: string;
     receipt: OnyxEntry<Receipt>;
     category?: string;
     tag?: string;
     taxCode?: string;
@@ -870,7 +870,7 @@
     transactions: OnyxCollection<OnyxTypes.Transaction>;
     violations: OnyxCollection<OnyxTypes.TransactionViolations>;
     isSingleTransactionView: boolean | undefined;
     isChatReportArchived: boolean | undefined;
     isChatIOUReportArchived: boolean | undefined;
     allTransactionViolationsParam: OnyxCollection<OnyxTypes.TransactionViolations>;
     currentUserAccountID: number;
@@ -884,7 +884,7 @@
     iouReport: OnyxEntry<OnyxTypes.Report>;
     chatReport: OnyxEntry<OnyxTypes.Report>;
     isChatIOUReportArchived?: boolean | undefined;
     isSingleTransactionView?: boolean;
     transactionIDsPendingDeletion?: string[];
     selectedTransactionIDs?: string[];
     allTransactionViolationsParam: OnyxCollection<OnyxTypes.TransactionViolations>;
@@ -893,7 +893,7 @@
 
 type PayMoneyRequestFunctionParams = {
     paymentType: PaymentMethodType;
     chatReport: OnyxTypes.Report;
     iouReport: OnyxEntry<OnyxTypes.Report>;
     introSelected: OnyxEntry<OnyxTypes.IntroSelected>;
     iouReportCurrentNextStepDeprecated: OnyxEntry<OnyxTypes.ReportNextStepDeprecated>;
@@ -907,7 +907,7 @@
 };
 
 let allTransactions: NonNullable<OnyxCollection<OnyxTypes.Transaction>> = {};
 Onyx.connect({
     key: ONYXKEYS.COLLECTION.TRANSACTION,
     waitForCollectionCallback: true,
     callback: (value) => {
@@ -920,7 +920,7 @@
     },
 });
 
 let allTransactionDrafts: NonNullable<OnyxCollection<OnyxTypes.Transaction>> = {};
 Onyx.connect({
     key: ONYXKEYS.COLLECTION.TRANSACTION_DRAFT,
     waitForCollectionCallback: true,
@@ -929,7 +929,7 @@
     },
 });
 
 let allTransactionViolations: NonNullable<OnyxCollection<OnyxTypes.TransactionViolations>> = {};
 Onyx.connect({
     key: ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS,
     waitForCollectionCallback: true,
@@ -939,7 +939,7 @@
             return;
         }
 
         allTransactionViolations = value;
     },
 });
 
@@ -948,7 +948,7 @@
     key: ONYXKEYS.COLLECTION.POLICY_TAGS,
     waitForCollectionCallback: true,
     callback: (value) => {
         if (!value) {
             allPolicyTags = {};
             return;
         }
@@ -956,7 +956,7 @@
     },
 });
 
 let allReports: OnyxCollection<OnyxTypes.Report>;
 Onyx.connect({
     key: ONYXKEYS.COLLECTION.REPORT,
     waitForCollectionCallback: true,
@@ -1517,10 +1517,19 @@
     Onyx.merge(`${ONYXKEYS.COLLECTION.TRANSACTION_DRAFT}${transactionID}`, {reportID});
 }
 
-function setMoneyRequestReceipt(transactionID: string, source: string, filename: string, isDraft: boolean, type?: string, isTestReceipt = false, isTestDriveReceipt = false) {
+function setMoneyRequestReceipt(
+    transactionID: string,
+    source: string,
+    filename: string,
+    isDraft: boolean,
+    type?: string,
+    isTestReceipt = false,
+    isTestDriveReceipt = false,
+    thumbnail?: string,
+) {
     Onyx.merge(`${isDraft ? ONYXKEYS.COLLECTION.TRANSACTION_DRAFT : ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`, {
         // isTestReceipt = false and isTestDriveReceipt = false are being converted to null because we don't really need to store it in Onyx in those cases
-        receipt: {source, filename, type: type ?? '', isTestReceipt: isTestReceipt ? true : null, isTestDriveReceipt: isTestDriveReceipt ? true : null},
+        receipt: {source, filename, type: type ?? '', isTestReceipt: isTestReceipt ? true : null, isTestDriveReceipt: isTestDriveReceipt ? true : null, ...(thumbnail ? {thumbnail} : {})},
     });
 }
 

src/pages/iou/request/step/IOURequestStepScan/cropImageToAspectRatio.ts

@@ -1,3 +1,4 @@
+import {ImageManipulator, SaveFormat} from 'expo-image-manipulator';
 import ImageSize from 'react-native-image-size';
 import type {Orientation} from 'react-native-vision-camera';
 import cropOrRotateImage from '@libs/cropOrRotateImage';
@@ -78,5 +79,18 @@ function cropImageToAspectRatio(
         .catch(() => image);
 }
 
+/**
+ * Generate a low-resolution thumbnail from an image URI.
+ * Used on native to avoid decoding the full 12MP camera photo on the confirmation page.
+ */
+function generateThumbnail(sourceUri: string, maxWidth = 512): Promise<string | undefined> {
+    return ImageManipulator.manipulate(sourceUri)
+        .resize({width: maxWidth})
+        .renderAsync()
+        .then((image) => image.saveAsync({compress: 0.8, format: SaveFormat.JPEG}))
+        .then((result) => result.uri)
+        .catch(() => undefined);
+}
+
 export type {ImageObject};
-export {calculateCropRect, cropImageToAspectRatio};
+export {calculateCropRect, cropImageToAspectRatio, generateThumbnail};

src/pages/iou/request/step/IOURequestStepScan/index.native.tsx

@@ -47,6 +47,7 @@ import ROUTES from '@src/ROUTES';
 import type {FileObject} from '@src/types/utils/Attachment';
 import {getEmptyObject} from '@src/types/utils/EmptyObject';
 import CameraPermission from './CameraPermission';
+import {generateThumbnail} from './cropImageToAspectRatio';
 import NavigationAwareCamera from './NavigationAwareCamera/Camera';
 import ReceiptPreviews from './ReceiptPreviews';
 import type IOURequestStepScanProps from './types';
@@ -382,32 +383,35 @@ function IOURequestStepScan({
                 const transactionID = transaction?.transactionID ?? initialTransactionID;
                 const source = getPhotoSource(photo.path);
                 const filename = photo.path;
-                endSpan(CONST.TELEMETRY.SPAN_RECEIPT_CAPTURE);
 
-                const cameraFile = {
-                    uri: source,
-                    name: filename,
-                    type: 'image/jpeg',
-                    source,
-                };
+                return generateThumbnail(source).then((thumbnailUri) => {
+                    endSpan(CONST.TELEMETRY.SPAN_RECEIPT_CAPTURE);
 
-                setMoneyRequestReceipt(transactionID, source, filename, !isEditing, 'image/jpeg');
+                    const cameraFile = {
+                        uri: source,
+                        name: filename,
+                        type: 'image/jpeg',
+                        source,
+                    };
 
-                if (isEditing) {
-                    updateScanAndNavigate(cameraFile as FileObject, source);
-                    return;
-                }
+                    setMoneyRequestReceipt(transactionID, source, filename, !isEditing, 'image/jpeg', false, false, thumbnailUri);
 
-                const newReceiptFiles = [...receiptFiles, {file: cameraFile as FileObject, source, transactionID}];
-                setReceiptFiles(newReceiptFiles);
+                    if (isEditing) {
+                        updateScanAndNavigate(cameraFile as FileObject, source);
+                        return;
+                    }
 
-                if (isMultiScanEnabled) {
-                    setDidCapturePhoto(false);
-                    isCapturingPhoto.current = false;
-                    return;
-                }
+                    const newReceiptFiles = [...receiptFiles, {file: cameraFile as FileObject, source, transactionID}];
+                    setReceiptFiles(newReceiptFiles);
 
-                submitReceipts(newReceiptFiles);
+                    if (isMultiScanEnabled) {
+                        setDidCapturePhoto(false);
+                        isCapturingPhoto.current = false;
+                        return;
+                    }
+
+                    submitReceipts(newReceiptFiles);
+                });
             })
             .catch((error: string) => {
                 isCapturingPhoto.current = false;

src/types/onyx/Transaction.ts

@@ -228,6 +228,9 @@ type Receipt = {
 
     /** Receipt is Test Drive testing receipt */
     isTestDriveReceipt?: true;
+
+    /** Local thumbnail URI for fast preview on confirmation page */
+    thumbnail?: string;
 };
 
 /** Model of route */