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');
@@ -1143,6 +1144,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 @@
 };
 
 let allPersonalDetails: OnyxTypes.PersonalDetailsList = {};
 Onyx.connect({
     key: ONYXKEYS.PERSONAL_DETAILS_LIST,
     callback: (value) => {
         allPersonalDetails = value ?? {};
@@ -871,7 +871,7 @@
 
 let allTransactions: NonNullable<OnyxCollection<OnyxTypes.Transaction>> = {};
 Onyx.connect({
     key: ONYXKEYS.COLLECTION.TRANSACTION,
     waitForCollectionCallback: true,
     callback: (value) => {
         if (!value) {
@@ -885,7 +885,7 @@
 
 let allTransactionDrafts: NonNullable<OnyxCollection<OnyxTypes.Transaction>> = {};
 Onyx.connect({
     key: ONYXKEYS.COLLECTION.TRANSACTION_DRAFT,
     waitForCollectionCallback: true,
     callback: (value) => {
         allTransactionDrafts = value ?? {};
@@ -894,7 +894,7 @@
 
 let allTransactionViolations: NonNullable<OnyxCollection<OnyxTypes.TransactionViolations>> = {};
 Onyx.connect({
     key: ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS,
     waitForCollectionCallback: true,
     callback: (value) => {
         if (!value) {
@@ -908,7 +908,7 @@
 
 let allPolicyTags: OnyxCollection<OnyxTypes.PolicyTagLists> = {};
 Onyx.connect({
     key: ONYXKEYS.COLLECTION.POLICY_TAGS,
     waitForCollectionCallback: true,
     callback: (value) => {
         if (!value) {
@@ -921,7 +921,7 @@
 
 let allReports: OnyxCollection<OnyxTypes.Report>;
 Onyx.connect({
     key: ONYXKEYS.COLLECTION.REPORT,
     waitForCollectionCallback: true,
     callback: (value) => {
         allReports = value;
@@ -930,7 +930,7 @@
 
 let allReportNameValuePairs: OnyxCollection<OnyxTypes.ReportNameValuePairs>;
 Onyx.connect({
     key: ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS,
     waitForCollectionCallback: true,
     callback: (value) => {
         allReportNameValuePairs = value;
@@ -940,7 +940,7 @@
 let userAccountID = -1;
 let currentUserEmail = '';
 Onyx.connect({
     key: ONYXKEYS.SESSION,
     callback: (value) => {
         currentUserEmail = value?.email ?? '';
         userAccountID = value?.accountID ?? CONST.DEFAULT_NUMBER_ID;
@@ -949,7 +949,7 @@
 
 let deprecatedCurrentUserPersonalDetails: OnyxEntry<OnyxTypes.PersonalDetails>;
 Onyx.connect({
     key: ONYXKEYS.PERSONAL_DETAILS_LIST,
     callback: (value) => {
         deprecatedCurrentUserPersonalDetails = value?.[userAccountID] ?? undefined;
     },
@@ -957,7 +957,7 @@
 
 let allReportActions: OnyxCollection<OnyxTypes.ReportActions>;
 Onyx.connect({
     key: ONYXKEYS.COLLECTION.REPORT_ACTIONS,
     waitForCollectionCallback: true,
     callback: (actions) => {
         if (!actions) {
@@ -1538,10 +1538,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

@@ -48,6 +48,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';
@@ -386,6 +387,7 @@ function IOURequestStepScan({
                 const transactionID = transaction?.transactionID ?? initialTransactionID;
                 const source = getPhotoSource(photo.path);
                 const filename = photo.path;
+
                 endSpan(CONST.TELEMETRY.SPAN_RECEIPT_CAPTURE);
 
                 const cameraFile = {
@@ -397,6 +399,14 @@ function IOURequestStepScan({
 
                 setMoneyRequestReceipt(transactionID, source, filename, !isEditing, 'image/jpeg');
 
+                // Generate thumbnail off the critical path — update Onyx when ready
+                generateThumbnail(source).then((thumbnailUri) => {
+                    if (!thumbnailUri) {
+                        return;
+                    }
+                    setMoneyRequestReceipt(transactionID, source, filename, !isEditing, 'image/jpeg', false, false, thumbnailUri);
+                });
+
                 if (isEditing) {
                     updateScanAndNavigate(cameraFile as FileObject, source);
                     return;

src/types/onyx/Transaction.ts

@@ -229,6 +229,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 */