fix crop image regression

Author: nkdengineer

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';
@@ -71,6 +72,23 @@ 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) {
+            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});
+            }
+        });
+    }, [imageUri]);
+
     // 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) {
@@ -235,19 +253,12 @@ function ReceiptCropView({imageUri, onCropChange, initialCrop, isAuthTokenRequir
         [containerWidthSV, containerHeightSV],
     );
 
-    const onImageLoad = useCallback(
-        (event: {nativeEvent: {width: number; height: number}}) => {
-            const {width, height} = event.nativeEvent;
-            if (!width || !height || (imageSize.width === width && imageSize.height === height)) {
-                return;
-            }
-            if (!hasImageDimensions) {
-                setHasImageDimensions(true);
-            }
-            setImageSize({width, height});
-        },
-        [hasImageDimensions, imageSize.width, imageSize.height],
-    );
+    const onImageLoad = useCallback(() => {
+        if (hasImageDimensions) {
+            return;
+        }
+        setHasImageDimensions(true);
+    }, [hasImageDimensions]);
 
     /**
      * Clamp a value between min and max

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

@@ -11,6 +11,7 @@ import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import useOnyx from '@hooks/useOnyx';
 import usePolicy from '@hooks/usePolicy';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {detachReceipt, navigateToStartStepIfScanFileCannotBeRead, removeMoneyRequestOdometerImage, replaceReceipt, setMoneyRequestReceipt} from '@libs/actions/IOU';
 import {openReport} from '@libs/actions/Report';
@@ -28,7 +29,7 @@ import AttachmentModalContainer from '@pages/media/AttachmentModalScreen/Attachm
 import type {AttachmentModalScreenProps} from '@pages/media/AttachmentModalScreen/types';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import ROUTES from '@src/ROUTES';
+import ROUTES, {type Route} from '@src/ROUTES';
 import type SCREENS from '@src/SCREENS';
 import type {ReceiptSource} from '@src/types/onyx/Transaction';
 import type {FileObject} from '@src/types/utils/Attachment';
@@ -50,6 +51,7 @@ function TransactionReceiptModalContent({navigation, route}: AttachmentModalScre
     const [session] = useOnyx(ONYXKEYS.SESSION);
     const [introSelected] = useOnyx(ONYXKEYS.NVP_INTRO_SELECTED);
     const policy = usePolicy(report?.policyID);
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
 
     // 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 +505,23 @@ function TransactionReceiptModalContent({navigation, route}: AttachmentModalScre
                     <Button
                         icon={expensifyIcons.Camera}
                         onPress={() => {
+                            const destinationRoute: Route = 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 (shouldUseNarrowLayout) {
+                                Navigation.navigate(destinationRoute, {forceReplace: true});
+                                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(destinationRoute),
                             });
                         }}
                         text={translate('common.replace')}
@@ -556,6 +562,7 @@ function TransactionReceiptModalContent({navigation, route}: AttachmentModalScre
         draftTransactionID,
         transaction?.transactionID,
         report?.reportID,
+        shouldUseNarrowLayout,
     ]);
 
     const customAttachmentContent = useMemo(() => {