Merge pull request Expensify#83795 from nkdengineer/fix/83709

fix crop image regression

Author: srikarparsi

src/components/ReceiptCropView/index.tsx

@@ -3,6 +3,7 @@ import type {LayoutChangeEvent} from 'react-native';
 import {View} from 'react-native';
 import {Gesture, GestureDetector, GestureHandlerRootView} from 'react-native-gesture-handler';
 import type {GestureUpdateEvent, PanGestureChangeEventPayload, PanGestureHandlerEventPayload} from 'react-native-gesture-handler';
+import ImageSize from 'react-native-image-size';
 import Animated, {useAnimatedStyle, useSharedValue} from 'react-native-reanimated';
 import Image from '@components/Image';
 import RESIZE_MODES from '@components/Image/resizeModes';
@@ -58,6 +59,7 @@ function ReceiptCropView({imageUri, onCropChange, initialCrop, isAuthTokenRequir
     const cropY = useSharedValue(0);
     const cropWidth = useSharedValue(0);
     const cropHeight = useSharedValue(0);
+    const isImageInitialized = useRef(false);
 
     // Track previous values to detect changes and recalculate crop on resize
     const prevDisplayValuesRef = useRef<{
@@ -71,6 +73,25 @@ function ReceiptCropView({imageUri, onCropChange, initialCrop, isAuthTokenRequir
 
     const isCropInitialized = imageSize.width > 0 && imageSize.height > 0 && containerSize.width > 0 && containerSize.height > 0;
 
+    // Use react-native-image-size to get actual original image dimensions (not downsampled display dimensions).
+    // On Android, expo-image's onLoad reports Glide-downsampled dimensions, which would make crop coordinates
+    // wrong for expo-image-manipulator (which operates on full-resolution images). See AvatarCropModal for the same pattern.
+    useEffect(() => {
+        if (!imageUri || isAuthTokenRequired) {
+            return;
+        }
+        ImageSize.getSize(imageUri).then(({width, height, rotation: originalRotation}) => {
+            // On Android, ImageSize returns rotation; when image is rotated 90/270°, swap width/height for layout.
+            if (originalRotation === 90 || originalRotation === 270) {
+                setImageSize({width: height, height: width});
+            } else {
+                setImageSize({width, height});
+            }
+
+            isImageInitialized.current = true;
+        });
+    }, [imageUri, isAuthTokenRequired]);
+
     // Calculate scale factors to convert display coordinates to image coordinates
     const {scaleX, scaleY, displayWidth, displayHeight, imageOffsetX, imageOffsetY} = useMemo(() => {
         if (!containerSize.width || !containerSize.height || !imageSize.width || !imageSize.height) {
@@ -244,7 +265,9 @@ function ReceiptCropView({imageUri, onCropChange, initialCrop, isAuthTokenRequir
             if (!hasImageDimensions) {
                 setHasImageDimensions(true);
             }
-            setImageSize({width, height});
+            if (!isImageInitialized.current) {
+                setImageSize({width, height});
+            }
         },
         [hasImageDimensions, imageSize.width, imageSize.height],
     );

src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx

@@ -17,6 +17,7 @@ import {openReport} from '@libs/actions/Report';
 import cropOrRotateImage from '@libs/cropOrRotateImage';
 import fetchImage from '@libs/fetchImage';
 import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID';
+import getPlatform from '@libs/getPlatform';
 import Navigation from '@libs/Navigation/Navigation';
 import {getThumbnailAndImageURIs} from '@libs/ReceiptUtils';
 import {getReportAction, isTrackExpenseAction} from '@libs/ReportActionsUtils';
@@ -50,6 +51,8 @@ function TransactionReceiptModalContent({navigation, route}: AttachmentModalScre
     const [session] = useOnyx(ONYXKEYS.SESSION);
     const [introSelected] = useOnyx(ONYXKEYS.NVP_INTRO_SELECTED);
     const policy = usePolicy(report?.policyID);
+    const platform = getPlatform();
+    const isNative = platform === CONST.PLATFORM.ANDROID || platform === CONST.PLATFORM.IOS;
 
     // If we have a merge transaction, we need to use the receipt from the merge transaction
     const [mergeTransaction] = useOnyx(`${ONYXKEYS.COLLECTION.MERGE_TRANSACTION}${getNonEmptyStringOnyxID(mergeTransactionID)}`);
@@ -503,19 +506,27 @@ function TransactionReceiptModalContent({navigation, route}: AttachmentModalScre
                     <Button
                         icon={expensifyIcons.Camera}
                         onPress={() => {
+                            const getDestinationRoute = () => {
+                                return isOdometerImage
+                                    ? ROUTES.ODOMETER_IMAGE.getRoute(action ?? CONST.IOU.ACTION.CREATE, iouType, transactionID, reportID, imageType)
+                                    : ROUTES.MONEY_REQUEST_STEP_SCAN.getRoute(
+                                          action ?? CONST.IOU.ACTION.EDIT,
+                                          iouType,
+                                          draftTransactionID ?? transaction?.transactionID,
+                                          report?.reportID,
+                                          Navigation.getActiveRoute(),
+                                      );
+                            };
+                            if (isNative) {
+                                Navigation.goBack();
+                                Navigation.setNavigationActionToMicrotaskQueue(() => {
+                                    Navigation.navigate(getDestinationRoute());
+                                });
+                                return;
+                            }
+
                             Navigation.dismissModal({
-                                callback: () =>
-                                    Navigation.navigate(
-                                        isOdometerImage
-                                            ? ROUTES.ODOMETER_IMAGE.getRoute(action ?? CONST.IOU.ACTION.CREATE, iouType, transactionID, reportID, imageType)
-                                            : ROUTES.MONEY_REQUEST_STEP_SCAN.getRoute(
-                                                  action ?? CONST.IOU.ACTION.EDIT,
-                                                  iouType,
-                                                  draftTransactionID ?? transaction?.transactionID,
-                                                  report?.reportID,
-                                                  Navigation.getActiveRoute(),
-                                              ),
-                                    ),
+                                callback: () => Navigation.navigate(getDestinationRoute()),
                             });
                         }}
                         text={translate('common.replace')}
@@ -556,6 +567,7 @@ function TransactionReceiptModalContent({navigation, route}: AttachmentModalScre
         draftTransactionID,
         transaction?.transactionID,
         report?.reportID,
+        isNative,
     ]);
 
     const customAttachmentContent = useMemo(() => {