From 6c542dfb460ffdab656d6c71af30a24e50da05ef Mon Sep 17 00:00:00 2001
From: nkdengineer <nkdengineer@outlook.com>
Date: Tue, 20 Jan 2026 22:21:58 +0700
Subject: [PATCH 01/39] feat: add crop receipt

---
 contributingGuides/PROPOSAL_TEMPLATE.md       |  54 ++
 src/components/ReceiptCropView/index.tsx      | 460 ++++++++++++++++++
 src/languages/en.ts                           |   1 +
 .../AttachmentModalBaseContent/index.tsx      |  14 +-
 .../AttachmentModalBaseContent/types.ts       |   6 +
 .../routes/TransactionReceiptModalContent.tsx | 223 ++++++++-
 6 files changed, 751 insertions(+), 7 deletions(-)
 create mode 100644 src/components/ReceiptCropView/index.tsx

diff --git a/contributingGuides/PROPOSAL_TEMPLATE.md b/contributingGuides/PROPOSAL_TEMPLATE.md
index 8c9fa7968fe2..2e110587b3fd 100644
--- a/contributingGuides/PROPOSAL_TEMPLATE.md
+++ b/contributingGuides/PROPOSAL_TEMPLATE.md
@@ -2,13 +2,67 @@
 
 ### Please re-state the problem that we are trying to solve in this issue.
 
+Users viewing receipts in the Transaction Receipt Modal can currently rotate receipts but cannot crop them. When receipts contain unwanted areas (like table surfaces, other items, or excessive whitespace), users have no way to remove these areas before saving. This results in lower quality receipt images that may affect OCR accuracy and visual clarity.
+
 ### What is the root cause of that problem?
 
+The root cause is that the receipt modal UI only exposes rotation functionality through the header's rotate button. There is no crop interface that allows users to:
+1. Visually select the area they want to keep
+2. Interactively adjust crop boundaries
+3. Preview the cropped result before saving
+
+The underlying `cropOrRotateImage` utility already supports cropping operations (it accepts crop actions with originX, originY, width, and height), but this functionality is not exposed in the UI.
+
 ### What changes do you think we should make in order to solve the problem?
 <!-- DO NOT POST CODE DIFFS -->
 
+1. **Add action buttons footer**: Create a footer section below the receipt image with three buttons: "Rotate", "Crop", and "Replace". These buttons should be visible when viewing receipts (similar to how the rotate button currently appears in the header, but moved to a footer for better UX).
+
+2. **Implement crop mode state**: When the "Crop" button is clicked, enter a crop mode that:
+   - Hides the three action buttons (Rotate, Crop, Replace)
+   - Shows two buttons instead: "Cancel" (to exit crop mode) and "Save" (to apply the crop)
+   - Displays a draggable border overlay around the receipt image
+
+3. **Create draggable crop border component**: Build a `ReceiptCropView` component that:
+   - Renders a rectangular border with four corner handles (small circular indicators)
+   - Allows dragging each corner independently to adjust the crop area
+   - Maintains the crop rectangle bounds within the image boundaries
+   - Provides visual feedback (e.g., green border color) to indicate the active crop area
+   - Calculates the crop coordinates (originX, originY, width, height) relative to the original image dimensions
+
+4. **Integrate crop functionality**: 
+   - When "Save" is clicked in crop mode, calculate the crop parameters based on the current border position
+   - Use the existing `cropOrRotateImage` function with the crop action
+   - Update the receipt using the same pattern as the rotate functionality (either `setMoneyRequestReceipt` for draft transactions or `replaceReceipt` for saved transactions)
+   - Exit crop mode and return to normal view after successful crop
+
+5. **Update header behavior**: 
+   - Remove the rotate button from the header (it will be in the footer)
+   - Keep Download and Delete in the three-dots menu in the header as specified
+   - Ensure the header remains clean with only essential actions
+
+6. **Handle edge cases**:
+   - Disable crop mode for e-receipts (similar to how rotate is disabled)
+   - Ensure crop mode is only available for image files (not PDFs or other formats)
+   - Prevent crop when receipt is being scanned or has missing smartscan fields
+   - Handle image loading states appropriately
+
+The implementation will follow the existing patterns in the codebase:
+- Use React Native Gesture Handler for drag interactions (similar to `AvatarCropModal`)
+- Leverage the existing `cropOrRotateImage` utility
+- Follow the same transaction update patterns used by the rotate feature
+- Maintain consistency with the current modal structure and styling
+
 ### What alternative solutions did you explore? (Optional)
 
+1. **Separate crop modal**: Considered opening a dedicated crop modal (like `AvatarCropModal`), but this would require an extra navigation step and break the flow. Inline cropping provides a smoother UX.
+
+2. **Fixed aspect ratio cropping**: Considered enforcing a fixed aspect ratio, but receipts vary significantly in dimensions, so free-form cropping is more flexible.
+
+3. **Crop in header menu**: Considered adding crop to the three-dots menu, but having it as a primary action button in the footer makes it more discoverable and accessible.
+
+4. **Using existing AvatarCropModal**: The `AvatarCropModal` component uses a circular mask and zoom slider, which is optimized for avatars. For receipts, we need a rectangular crop with corner handles, so a new component is more appropriate.
+
 **Reminder:** Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.
 
 <!---
diff --git a/src/components/ReceiptCropView/index.tsx b/src/components/ReceiptCropView/index.tsx
new file mode 100644
index 000000000000..841dccea33b1
--- /dev/null
+++ b/src/components/ReceiptCropView/index.tsx
@@ -0,0 +1,460 @@
+import React, {useCallback, useEffect, useMemo, useState} from 'react';
+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 Animated, {useAnimatedStyle, useSharedValue} from 'react-native-reanimated';
+import Image from '@components/Image';
+import RESIZE_MODES from '@components/Image/resizeModes';
+import LoadingIndicator from '@components/LoadingIndicator';
+import useThemeStyles from '@hooks/useThemeStyles';
+import ControlSelection from '@libs/ControlSelection';
+import type {Dimensions} from '@src/types/utils/Layout';
+
+type CropRect = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+
+type ReceiptCropViewProps = {
+    /** URI of the image to crop */
+    imageUri: string;
+
+    /** Callback when crop rectangle changes */
+    onCropChange?: (crop: CropRect) => void;
+
+    /** Initial crop rectangle (optional) */
+    initialCrop?: CropRect;
+
+    isAuthTokenRequired?: boolean;
+};
+
+type CornerPosition = 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
+
+const CORNER_SIZE = 12;
+const BORDER_WIDTH = 2;
+
+function ReceiptCropView({imageUri, onCropChange, initialCrop, isAuthTokenRequired}: ReceiptCropViewProps) {
+    const styles = useThemeStyles();
+
+    // Image dimensions
+    const [imageSize, setImageSize] = useState<Dimensions>({width: 0, height: 0});
+    const [hasImageDimensions, setHasImageDimensions] = useState(false);
+
+    // Container dimensions (using shared values for worklet access)
+    const containerWidthSV = useSharedValue(0);
+    const containerHeightSV = useSharedValue(0);
+    const displayWidthSV = useSharedValue(0);
+    const displayHeightSV = useSharedValue(0);
+    const imageOffsetXSV = useSharedValue(0);
+    const imageOffsetYSV = useSharedValue(0);
+    const [containerSize, setContainerSize] = useState<Dimensions>({width: 0, height: 0});
+
+    // Crop rectangle in display coordinates (relative to container)
+    const cropX = useSharedValue(0);
+    const cropY = useSharedValue(0);
+    const cropWidth = useSharedValue(0);
+    const cropHeight = useSharedValue(0);
+
+    const isCropInitialized = imageSize.width > 0 && imageSize.height > 0 && containerSize.width > 0 && containerSize.height > 0;
+
+    // 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) {
+            return {scaleX: 1, scaleY: 1, displayWidth: 0, displayHeight: 0, imageOffsetX: 0, imageOffsetY: 0};
+        }
+
+        // Calculate how the image is scaled to fit the container
+        const imageAspectRatio = imageSize.width / imageSize.height;
+        const containerAspectRatio = containerSize.width / containerSize.height;
+
+        let calculatedDisplayWidth: number;
+        let calculatedDisplayHeight: number;
+
+        if (imageAspectRatio > containerAspectRatio) {
+            // Image is wider - fit to width
+            calculatedDisplayWidth = containerSize.width;
+            calculatedDisplayHeight = containerSize.width / imageAspectRatio;
+        } else {
+            // Image is taller - fit to height
+            calculatedDisplayHeight = containerSize.height;
+            calculatedDisplayWidth = containerSize.height * imageAspectRatio;
+        }
+
+        // Calculate the image's offset within the container (centered)
+        const calculatedImageOffsetX = (containerSize.width - calculatedDisplayWidth) / 2;
+        const calculatedImageOffsetY = (containerSize.height - calculatedDisplayHeight) / 2;
+
+        // Calculate scale factors to convert display coordinates to image coordinates
+        const calculatedScaleX = imageSize.width / calculatedDisplayWidth;
+        const calculatedScaleY = imageSize.height / calculatedDisplayHeight;
+
+        // Update shared values for worklet access
+        displayWidthSV.set(calculatedDisplayWidth);
+        displayHeightSV.set(calculatedDisplayHeight);
+        imageOffsetXSV.set(calculatedImageOffsetX);
+        imageOffsetYSV.set(calculatedImageOffsetY);
+
+        return {
+            scaleX: calculatedScaleX,
+            scaleY: calculatedScaleY,
+            displayWidth: calculatedDisplayWidth,
+            displayHeight: calculatedDisplayHeight,
+            imageOffsetX: calculatedImageOffsetX,
+            imageOffsetY: calculatedImageOffsetY,
+        };
+    }, [containerSize.width, containerSize.height, imageSize.width, imageSize.height, displayWidthSV, displayHeightSV, imageOffsetXSV, imageOffsetYSV]);
+
+    // Initialize crop rectangle when dimensions are available
+    useEffect(() => {
+        if (!displayWidth || !displayHeight || !scaleX || !scaleY) {
+            return;
+        }
+
+        // Only initialize if crop values are still at 0 (not yet initialized)
+        if (cropWidth.get() === 0 && cropHeight.get() === 0) {
+            if (initialCrop) {
+                // Convert image coordinates to display coordinates and add image offset
+                cropX.set(imageOffsetX + initialCrop.x / scaleX);
+                cropY.set(imageOffsetY + initialCrop.y / scaleY);
+                cropWidth.set(initialCrop.width / scaleX);
+                cropHeight.set(initialCrop.height / scaleY);
+            } else {
+                // Default: crop the entire image area (no padding)
+                // Crop rectangle is relative to the image position (centered in container)
+                cropX.set(imageOffsetX);
+                cropY.set(imageOffsetY);
+                cropWidth.set(displayWidth);
+                cropHeight.set(displayHeight);
+            }
+        }
+    }, [displayWidth, displayHeight, scaleX, scaleY, imageOffsetX, imageOffsetY, initialCrop, cropX, cropY, cropWidth, cropHeight]);
+
+    const onContainerLayout = useCallback(
+        (event: LayoutChangeEvent) => {
+            const {width, height} = event.nativeEvent.layout;
+            setContainerSize({width, height});
+            containerWidthSV.set(width);
+            containerHeightSV.set(height);
+        },
+        [containerWidthSV, containerHeightSV],
+    );
+
+    const onImageLoad = useCallback(
+        (event: {nativeEvent: {width: number; height: number}}) => {
+            const {width, height} = event.nativeEvent;
+            // Image component provides dimensions after load - use these as primary source
+            if (width && height && (!hasImageDimensions || imageSize.width !== width || imageSize.height !== height)) {
+                setImageSize({width, height});
+                setHasImageDimensions(true);
+            }
+        },
+        [hasImageDimensions, imageSize.width, imageSize.height],
+    );
+
+    /**
+     * Clamp a value between min and max
+     */
+    const clamp = useCallback((value: number, min: number, max: number) => {
+        'worklet';
+
+        return Math.max(min, Math.min(max, value));
+    }, []);
+
+    /**
+     * Create gesture handler for a corner
+     */
+    const createCornerGesture = useCallback(
+        (corner: CornerPosition) => {
+            return Gesture.Pan().onChange((event: GestureUpdateEvent<PanGestureHandlerEventPayload & PanGestureChangeEventPayload>) => {
+                'worklet';
+
+                const currentX = cropX.get();
+                const currentY = cropY.get();
+                const currentWidth = cropWidth.get();
+                const currentHeight = cropHeight.get();
+
+                let newX = currentX;
+                let newY = currentY;
+                let newWidth = currentWidth;
+                let newHeight = currentHeight;
+
+                const minSize = CORNER_SIZE * 2;
+                const imgDisplayWidth = displayWidthSV.get();
+                const imgDisplayHeight = displayHeightSV.get();
+                const imageLeft = imageOffsetXSV.get();
+                const imageRight = imageLeft + imgDisplayWidth;
+                const imageTop = imageOffsetYSV.get();
+                const imageBottom = imageTop + imgDisplayHeight;
+
+                switch (corner) {
+                    case 'topLeft':
+                        newX = clamp(currentX + event.changeX, imageLeft, currentX + currentWidth - minSize);
+                        newY = clamp(currentY + event.changeY, imageTop, currentY + currentHeight - minSize);
+                        newWidth = currentWidth - (newX - currentX);
+                        newHeight = currentHeight - (newY - currentY);
+                        break;
+                    case 'topRight':
+                        newY = clamp(currentY + event.changeY, imageTop, currentY + currentHeight - minSize);
+                        newWidth = clamp(currentWidth + event.changeX, minSize, imageRight - currentX);
+                        newHeight = currentHeight - (newY - currentY);
+                        break;
+                    case 'bottomLeft':
+                        newX = clamp(currentX + event.changeX, imageLeft, currentX + currentWidth - minSize);
+                        newWidth = currentWidth - (newX - currentX);
+                        newHeight = clamp(currentHeight + event.changeY, minSize, imageBottom - currentY);
+                        break;
+                    case 'bottomRight':
+                        newWidth = clamp(currentWidth + event.changeX, minSize, imageRight - currentX);
+                        newHeight = clamp(currentHeight + event.changeY, minSize, imageBottom - currentY);
+                        break;
+                    default:
+                        break;
+                }
+
+                // Ensure crop rectangle stays within image bounds
+                if (newX < imageLeft) {
+                    const diff = imageLeft - newX;
+                    newX = imageLeft;
+                    newWidth -= diff;
+                }
+                if (newX + newWidth > imageRight) {
+                    newWidth = imageRight - newX;
+                }
+                if (newY < imageTop) {
+                    const diff = imageTop - newY;
+                    newY = imageTop;
+                    newHeight -= diff;
+                }
+                if (newY + newHeight > imageBottom) {
+                    newHeight = imageBottom - newY;
+                }
+
+                cropX.set(newX);
+                cropY.set(newY);
+                cropWidth.set(newWidth);
+                cropHeight.set(newHeight);
+
+                const crop: CropRect = {
+                    x: (newX - imageOffsetX) * scaleX,
+                    y: (newY - imageOffsetY) * scaleY,
+                    width: newWidth * scaleX,
+                    height: newHeight * scaleY,
+                };
+
+                onCropChange?.(crop);
+            });
+        },
+        [cropX, cropY, cropWidth, cropHeight, displayWidthSV, displayHeightSV, imageOffsetXSV, imageOffsetYSV, imageOffsetX, scaleX, imageOffsetY, scaleY, onCropChange, clamp],
+    );
+
+    // Animated styles for crop border
+    const borderStyle = useAnimatedStyle(() => {
+        return {
+            position: 'absolute',
+            left: cropX.get(),
+            top: cropY.get(),
+            width: cropWidth.get(),
+            height: cropHeight.get(),
+            borderWidth: BORDER_WIDTH,
+            borderColor: '#00D970', // Green color as shown in the design
+        };
+    });
+
+    // Animated styles for corner handles
+    const topLeftCornerStyle = useAnimatedStyle(() => ({
+        position: 'absolute',
+        left: cropX.get() - CORNER_SIZE / 2,
+        top: cropY.get() - CORNER_SIZE / 2,
+        width: CORNER_SIZE,
+        height: CORNER_SIZE,
+        borderRadius: CORNER_SIZE / 2,
+        backgroundColor: '#00D970',
+        borderWidth: 2,
+        borderColor: '#FFFFFF',
+    }));
+
+    const topRightCornerStyle = useAnimatedStyle(() => ({
+        position: 'absolute',
+        left: cropX.get() + cropWidth.get() - CORNER_SIZE / 2,
+        top: cropY.get() - CORNER_SIZE / 2,
+        width: CORNER_SIZE,
+        height: CORNER_SIZE,
+        borderRadius: CORNER_SIZE / 2,
+        backgroundColor: '#00D970',
+        borderWidth: 2,
+        borderColor: '#FFFFFF',
+    }));
+
+    const bottomLeftCornerStyle = useAnimatedStyle(() => ({
+        position: 'absolute',
+        left: cropX.get() - CORNER_SIZE / 2,
+        top: cropY.get() + cropHeight.get() - CORNER_SIZE / 2,
+        width: CORNER_SIZE,
+        height: CORNER_SIZE,
+        borderRadius: CORNER_SIZE / 2,
+        backgroundColor: '#00D970',
+        borderWidth: 2,
+        borderColor: '#FFFFFF',
+    }));
+
+    const bottomRightCornerStyle = useAnimatedStyle(() => ({
+        position: 'absolute',
+        left: cropX.get() + cropWidth.get() - CORNER_SIZE / 2,
+        top: cropY.get() + cropHeight.get() - CORNER_SIZE / 2,
+        width: CORNER_SIZE,
+        height: CORNER_SIZE,
+        borderRadius: CORNER_SIZE / 2,
+        backgroundColor: '#00D970',
+        borderWidth: 2,
+        borderColor: '#FFFFFF',
+    }));
+
+    // Overlay styles to darken areas outside the crop rectangle (only within image bounds)
+    const overlayTopStyle = useAnimatedStyle(() => {
+        'worklet';
+
+        const imageLeft = imageOffsetXSV.get();
+        const imageTop = imageOffsetYSV.get();
+        const imgDisplayWidth = displayWidthSV.get();
+        const cropTop = cropY.get();
+
+        return {
+            position: 'absolute',
+            left: imageLeft,
+            top: imageTop,
+            width: imgDisplayWidth,
+            height: Math.max(0, cropTop - imageTop),
+            backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        };
+    });
+
+    const overlayBottomStyle = useAnimatedStyle(() => {
+        'worklet';
+
+        const imageLeft = imageOffsetXSV.get();
+        const imageTop = imageOffsetYSV.get();
+        const imgDisplayWidth = displayWidthSV.get();
+        const imgDisplayHeight = displayHeightSV.get();
+        const cropBottom = cropY.get() + cropHeight.get();
+        const imageBottom = imageTop + imgDisplayHeight;
+
+        return {
+            position: 'absolute',
+            left: imageLeft,
+            top: cropBottom,
+            width: imgDisplayWidth,
+            height: Math.max(0, imageBottom - cropBottom),
+            backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        };
+    });
+
+    const overlayLeftStyle = useAnimatedStyle(() => {
+        'worklet';
+
+        const imageLeft = imageOffsetXSV.get();
+        const cropLeft = cropX.get();
+        const cropTop = cropY.get();
+        const cropHeightValue = cropHeight.get();
+
+        return {
+            position: 'absolute',
+            left: imageLeft,
+            top: cropTop,
+            width: Math.max(0, cropLeft - imageLeft),
+            height: cropHeightValue,
+            backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        };
+    });
+
+    const overlayRightStyle = useAnimatedStyle(() => {
+        'worklet';
+
+        const imageLeft = imageOffsetXSV.get();
+        const imgDisplayWidth = displayWidthSV.get();
+        const cropRight = cropX.get() + cropWidth.get();
+        const imageRight = imageLeft + imgDisplayWidth;
+        const cropTop = cropY.get();
+        const cropHeightValue = cropHeight.get();
+
+        return {
+            position: 'absolute',
+            left: cropRight,
+            top: cropTop,
+            width: Math.max(0, imageRight - cropRight),
+            height: cropHeightValue,
+            backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        };
+    });
+
+    return (
+        <GestureHandlerRootView style={[styles.flex1, styles.w100, styles.mv5]}>
+            <Animated.View
+                style={[styles.flex1, styles.alignItemsCenter, styles.justifyContentCenter, styles.w100]}
+                onLayout={onContainerLayout}
+                ref={(el) => ControlSelection.blockElement(el as HTMLElement | null)}
+            >
+                <View style={[styles.flex1, styles.w100]}>
+                    <Image
+                        source={{uri: imageUri}}
+                        resizeMode={RESIZE_MODES.contain}
+                        style={[styles.h100, styles.w100]}
+                        onLoad={onImageLoad}
+                        isAuthTokenRequired={isAuthTokenRequired}
+                    />
+                </View>
+
+                {/* Crop border - only show if crop rectangle is initialized */}
+                {isCropInitialized && (
+                    <>
+                        {/* Overlay to darken areas outside crop rectangle */}
+                        <Animated.View
+                            style={overlayTopStyle}
+                            pointerEvents="none"
+                        />
+                        <Animated.View
+                            style={overlayBottomStyle}
+                            pointerEvents="none"
+                        />
+                        <Animated.View
+                            style={overlayLeftStyle}
+                            pointerEvents="none"
+                        />
+                        <Animated.View
+                            style={overlayRightStyle}
+                            pointerEvents="none"
+                        />
+
+                        {/* Crop border */}
+                        <Animated.View
+                            style={borderStyle}
+                            pointerEvents="none"
+                        />
+
+                        {/* Corner handles */}
+                        <GestureDetector gesture={createCornerGesture('topLeft')}>
+                            <Animated.View style={topLeftCornerStyle} />
+                        </GestureDetector>
+                        <GestureDetector gesture={createCornerGesture('topRight')}>
+                            <Animated.View style={topRightCornerStyle} />
+                        </GestureDetector>
+                        <GestureDetector gesture={createCornerGesture('bottomLeft')}>
+                            <Animated.View style={bottomLeftCornerStyle} />
+                        </GestureDetector>
+                        <GestureDetector gesture={createCornerGesture('bottomRight')}>
+                            <Animated.View style={bottomRightCornerStyle} />
+                        </GestureDetector>
+                    </>
+                )}
+                {!hasImageDimensions && <LoadingIndicator style={[styles.opacity1, styles.bgTransparent]} />}
+            </Animated.View>
+        </GestureHandlerRootView>
+    );
+}
+
+ReceiptCropView.displayName = 'ReceiptCropView';
+
+export default ReceiptCropView;
+export type {CropRect};
diff --git a/src/languages/en.ts b/src/languages/en.ts
index a7eafd113b55..6c270f185dd8 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -1061,6 +1061,7 @@ const translations = {
         deleteConfirmation: 'Are you sure you want to delete this receipt?',
         addReceipt: 'Add receipt',
         scanFailed: "The receipt couldn't be scanned, as it's missing a merchant, date, or amount.",
+        crop: 'Crop',
     },
     quickAction: {
         scanReceipt: 'Scan receipt',
diff --git a/src/pages/media/AttachmentModalScreen/AttachmentModalBaseContent/index.tsx b/src/pages/media/AttachmentModalScreen/AttachmentModalBaseContent/index.tsx
index 899199915951..9b50c5d9c9fa 100644
--- a/src/pages/media/AttachmentModalScreen/AttachmentModalBaseContent/index.tsx
+++ b/src/pages/media/AttachmentModalScreen/AttachmentModalBaseContent/index.tsx
@@ -66,6 +66,8 @@ function AttachmentModalBaseContent({
     onCarouselAttachmentChange = () => {},
     transaction: transactionProp,
     shouldCloseOnSwipeDown = false,
+    footerActionButtons,
+    customAttachmentContent,
 }: AttachmentModalBaseContentProps) {
     const styles = useThemeStyles();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
@@ -329,8 +331,18 @@ function AttachmentModalBaseContent({
                         onLinkPress={onClose}
                     />
                 )}
-                {shouldDisplayContent && Content}
+                {shouldDisplayContent && (customAttachmentContent ?? Content)}
             </View>
+            {!!footerActionButtons && (
+                <LayoutAnimationConfig skipEntering>
+                    <Animated.View
+                        style={bottomSafeAreaPaddingStyle}
+                        entering={FadeIn}
+                    >
+                        {footerActionButtons}
+                    </Animated.View>
+                </LayoutAnimationConfig>
+            )}
             {/* If we have an onConfirm method show a confirmation button */}
             {!!onConfirm && !isConfirmButtonDisabled && (
                 <LayoutAnimationConfig skipEntering>
diff --git a/src/pages/media/AttachmentModalScreen/AttachmentModalBaseContent/types.ts b/src/pages/media/AttachmentModalScreen/AttachmentModalBaseContent/types.ts
index 15d2c2bddf21..fafbbc096eaa 100644
--- a/src/pages/media/AttachmentModalScreen/AttachmentModalBaseContent/types.ts
+++ b/src/pages/media/AttachmentModalScreen/AttachmentModalBaseContent/types.ts
@@ -133,6 +133,12 @@ type AttachmentModalBaseContentProps = {
 
     /** Allows users to swipe down to close the modal */
     shouldCloseOnSwipeDown?: boolean;
+
+    /** Footer action buttons to display below the image */
+    footerActionButtons?: React.ReactNode;
+
+    /** Custom content to render instead of the default attachment view (e.g., crop view) */
+    customAttachmentContent?: React.ReactNode;
 };
 
 export type {
diff --git a/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx b/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx
index accf772c046a..8bb8377256ff 100644
--- a/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx
+++ b/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx
@@ -1,14 +1,19 @@
 import {Str} from 'expensify-common';
 import React, {useCallback, useEffect, useMemo, useState} from 'react';
+import {View} from 'react-native';
+import Button from '@components/Button';
 import ConfirmModal from '@components/ConfirmModal';
 // eslint-disable-next-line no-restricted-imports
 import * as Expensicons from '@components/Icon/Expensicons';
+import ReceiptCropView from '@components/ReceiptCropView';
+import type {CropRect} from '@components/ReceiptCropView';
 import useAllTransactions from '@hooks/useAllTransactions';
 import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import useOnyx from '@hooks/useOnyx';
 import usePolicy from '@hooks/usePolicy';
+import useThemeStyles from '@hooks/useThemeStyles';
 import {detachReceipt, navigateToStartStepIfScanFileCannotBeRead, replaceReceipt, setMoneyRequestReceipt} from '@libs/actions/IOU';
 import {openReport} from '@libs/actions/Report';
 import cropOrRotateImage from '@libs/cropOrRotateImage';
@@ -94,6 +99,10 @@ function TransactionReceiptModalContent({navigation, route}: AttachmentModalScre
 
     const [isDeleteReceiptConfirmModalVisible, setIsDeleteReceiptConfirmModalVisible] = useState(false);
     const [isRotating, setIsRotating] = useState(false);
+    const [isCropping, setIsCropping] = useState(false);
+    const [isCropSaving, setIsCropSaving] = useState(false);
+    const [cropRect, setCropRect] = useState<CropRect | null>(null);
+    const styles = useThemeStyles();
 
     useEffect(() => {
         if ((!!report && !!transaction) || isDraftTransaction) {
@@ -246,6 +255,106 @@ function TransactionReceiptModalContent({navigation, route}: AttachmentModalScre
         [shouldShowReplaceReceiptButton, transaction, isEReceipt, receiptFilename],
     );
 
+    const shouldShowCropReceiptButton = useMemo(
+        () =>
+            shouldShowReplaceReceiptButton &&
+            transaction &&
+            hasReceiptSource(transaction) &&
+            !isEReceipt &&
+            !transaction?.receipt?.isTestDriveReceipt &&
+            (receiptFilename ? Str.isImage(receiptFilename) : false),
+        [shouldShowReplaceReceiptButton, transaction, isEReceipt, receiptFilename],
+    );
+
+    /**
+     * Enter crop mode
+     */
+    const enterCropMode = useCallback(() => {
+        setIsCropping(true);
+        setCropRect(null);
+    }, []);
+
+    /**
+     * Exit crop mode without saving
+     */
+    const exitCropMode = useCallback(() => {
+        setIsCropping(false);
+        setCropRect(null);
+    }, []);
+
+    /**
+     * Handle crop rectangle changes
+     */
+    const handleCropChange = useCallback((crop: CropRect) => {
+        setCropRect(crop);
+    }, []);
+
+    /**
+     * Save the cropped image
+     */
+    const saveCrop = useCallback(() => {
+        if (!transaction?.transactionID || !sourceUri || !isImage || !cropRect) {
+            return;
+        }
+
+        const receiptType = transaction?.receipt?.type ?? CONST.IMAGE_FILE_FORMAT.JPEG;
+
+        setIsCropSaving(true);
+        cropOrRotateImage(
+            sourceUri as string,
+            [
+                {
+                    crop: {
+                        originX: cropRect.x,
+                        originY: cropRect.y,
+                        width: cropRect.width,
+                        height: cropRect.height,
+                    },
+                },
+            ],
+            {
+                compress: 1,
+                name: receiptFilename,
+                type: receiptType,
+            },
+        )
+            .then((croppedImage) => {
+                if (!croppedImage) {
+                    setIsCropSaving(false);
+                    return;
+                }
+
+                // Both web and native return objects with uri property
+                const imageUriResult = 'uri' in croppedImage && croppedImage.uri ? croppedImage.uri : undefined;
+                if (!imageUriResult) {
+                    setIsCropSaving(false);
+                    return;
+                }
+
+                const file = croppedImage as File;
+                const croppedFilename = file.name ?? receiptFilename;
+
+                if (isDraftTransaction) {
+                    // Update the transaction immediately so the modal displays the cropped image right away
+                    setMoneyRequestReceipt(transaction.transactionID, imageUriResult, croppedFilename, isDraftTransaction, receiptType);
+                } else {
+                    replaceReceipt({
+                        transactionID: transaction.transactionID,
+                        file,
+                        source: imageUriResult,
+                        transactionPolicyCategories: policyCategories,
+                        transactionPolicy: policy,
+                    });
+                }
+                setIsCropSaving(false);
+                setIsCropping(false);
+                setCropRect(null);
+            })
+            .catch(() => {
+                setIsCropSaving(false);
+            });
+    }, [transaction?.transactionID, isDraftTransaction, sourceUri, isImage, cropRect, receiptFilename, policyCategories, transaction?.receipt?.type, policy]);
+
     const threeDotsMenuItems: ThreeDotsMenuItemFactory = useCallback(
         ({file, source: innerSource, isLocalSource}) => {
             const menuItems = [];
@@ -332,6 +441,109 @@ function TransactionReceiptModalContent({navigation, route}: AttachmentModalScre
         [deleteReceiptAndClose, isDeleteReceiptConfirmModalVisible, translate],
     );
 
+    // Footer action buttons
+    const footerActionButtons = useMemo(() => {
+        if (isCropping) {
+            // Show Cancel and Save buttons in crop mode
+            return (
+                <View style={[styles.flexRow, styles.gap4, styles.ph5, styles.pb5, styles.justifyContentCenter]}>
+                    <Button
+                        onPress={exitCropMode}
+                        text={translate('common.cancel')}
+                    />
+                    <Button
+                        success
+                        onPress={saveCrop}
+                        text={translate('common.save')}
+                        isLoading={isCropSaving}
+                        isDisabled={!cropRect || isCropSaving}
+                    />
+                </View>
+            );
+        }
+
+        // Show Rotate, Crop, Replace buttons in normal mode
+        if (!shouldShowRotateReceiptButton && !shouldShowCropReceiptButton && !shouldShowReplaceReceiptButton) {
+            return null;
+        }
+
+        return (
+            <View style={[styles.flexRow, styles.gap4, styles.ph5, styles.pb5, styles.justifyContentCenter]}>
+                {!!shouldShowRotateReceiptButton && (
+                    <Button
+                        icon={Expensicons.Rotate}
+                        onPress={rotateReceipt}
+                        text={translate('common.rotate')}
+                        isLoading={isRotating}
+                        isDisabled={isRotating}
+                    />
+                )}
+                {!!shouldShowCropReceiptButton && (
+                    <Button
+                        icon={Expensicons.ImageCropSquareMask}
+                        onPress={enterCropMode}
+                        text={translate('receipt.crop')}
+                    />
+                )}
+                {!!shouldShowReplaceReceiptButton && (
+                    <Button
+                        icon={expensifyIcons.Camera}
+                        onPress={() => {
+                            Navigation.dismissModal({
+                                callback: () =>
+                                    Navigation.navigate(
+                                        ROUTES.MONEY_REQUEST_STEP_SCAN.getRoute(
+                                            action ?? CONST.IOU.ACTION.EDIT,
+                                            iouType,
+                                            draftTransactionID ?? transaction?.transactionID,
+                                            report?.reportID,
+                                            Navigation.getActiveRoute(),
+                                        ),
+                                    ),
+                            });
+                        }}
+                        text={translate('common.replace')}
+                    />
+                )}
+            </View>
+        );
+    }, [
+        isCropping,
+        exitCropMode,
+        saveCrop,
+        cropRect,
+        isCropSaving,
+        translate,
+        shouldShowRotateReceiptButton,
+        shouldShowCropReceiptButton,
+        shouldShowReplaceReceiptButton,
+        rotateReceipt,
+        isRotating,
+        enterCropMode,
+        expensifyIcons.Camera,
+        action,
+        iouType,
+        draftTransactionID,
+        transaction?.transactionID,
+        report?.reportID,
+        styles,
+    ]);
+
+    // Custom attachment content for crop mode
+    const customAttachmentContent = useMemo(() => {
+        if (!isCropping || !source) {
+            return null;
+        }
+
+        return (
+            <ReceiptCropView
+                imageUri={source as string}
+                onCropChange={handleCropChange}
+                isAuthTokenRequired={isAuthTokenRequired}
+            />
+        );
+    }, [isCropping, source, handleCropChange, isAuthTokenRequired]);
+
     const contentProps = useMemo<AttachmentModalBaseContentProps>(
         () => ({
             source,
@@ -344,12 +556,12 @@ function TransactionReceiptModalContent({navigation, route}: AttachmentModalScre
             isLoading: !transaction && reportMetadata?.isLoadingInitialReportActions,
             shouldShowNotFoundPage,
             shouldShowCarousel: false,
-            shouldShowRotateButton: shouldShowRotateReceiptButton,
-            onRotateButtonPress: rotateReceipt,
-            isRotating,
+            shouldShowRotateButton: false, // Remove rotate button from header
             onDownloadAttachment: allowDownload ? undefined : onDownloadAttachment,
             transaction,
             shouldMinimizeMenuButton: false,
+            footerActionButtons,
+            customAttachmentContent,
         }),
         [
             allowDownload,
@@ -361,12 +573,11 @@ function TransactionReceiptModalContent({navigation, route}: AttachmentModalScre
             report,
             reportMetadata?.isLoadingInitialReportActions,
             shouldShowNotFoundPage,
-            shouldShowRotateReceiptButton,
-            rotateReceipt,
-            isRotating,
             source,
             threeDotsMenuItems,
             transaction,
+            footerActionButtons,
+            customAttachmentContent,
         ],
     );
 

From 8e912abe2f0c7e6d8d8338ccc576d9bfb2551daf Mon Sep 17 00:00:00 2001
From: nkdengineer <nkdengineer@outlook.com>
Date: Wed, 21 Jan 2026 21:09:20 +0700
Subject: [PATCH 02/39] refactor crop view style

---
 src/components/ReceiptCropView/index.tsx      | 105 ++++++++----------
 .../AttachmentModalBaseContent/index.tsx      |   3 +-
 .../AttachmentModalBaseContent/types.ts       |   5 +-
 .../routes/TransactionReceiptModalContent.tsx |  24 +---
 src/styles/variables.ts                       |   2 +
 5 files changed, 61 insertions(+), 78 deletions(-)

diff --git a/src/components/ReceiptCropView/index.tsx b/src/components/ReceiptCropView/index.tsx
index 841dccea33b1..729056fe81b2 100644
--- a/src/components/ReceiptCropView/index.tsx
+++ b/src/components/ReceiptCropView/index.tsx
@@ -7,8 +7,10 @@ import Animated, {useAnimatedStyle, useSharedValue} from 'react-native-reanimate
 import Image from '@components/Image';
 import RESIZE_MODES from '@components/Image/resizeModes';
 import LoadingIndicator from '@components/LoadingIndicator';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import ControlSelection from '@libs/ControlSelection';
+import variables from '@styles/variables';
 import type {Dimensions} from '@src/types/utils/Layout';
 
 type CropRect = {
@@ -33,11 +35,9 @@ type ReceiptCropViewProps = {
 
 type CornerPosition = 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
 
-const CORNER_SIZE = 12;
-const BORDER_WIDTH = 2;
-
 function ReceiptCropView({imageUri, onCropChange, initialCrop, isAuthTokenRequired}: ReceiptCropViewProps) {
     const styles = useThemeStyles();
+    const theme = useTheme();
 
     // Image dimensions
     const [imageSize, setImageSize] = useState<Dimensions>({width: 0, height: 0});
@@ -168,7 +168,7 @@ function ReceiptCropView({imageUri, onCropChange, initialCrop, isAuthTokenRequir
      */
     const createCornerGesture = useCallback(
         (corner: CornerPosition) => {
-            return Gesture.Pan().onChange((event: GestureUpdateEvent<PanGestureHandlerEventPayload & PanGestureChangeEventPayload>) => {
+            return Gesture.Pan().runOnJS(true).onChange((event: GestureUpdateEvent<PanGestureHandlerEventPayload & PanGestureChangeEventPayload>) => {
                 'worklet';
 
                 const currentX = cropX.get();
@@ -181,7 +181,7 @@ function ReceiptCropView({imageUri, onCropChange, initialCrop, isAuthTokenRequir
                 let newWidth = currentWidth;
                 let newHeight = currentHeight;
 
-                const minSize = CORNER_SIZE * 2;
+                const minSize = variables.cornerHandleSize * 2;
                 const imgDisplayWidth = displayWidthSV.get();
                 const imgDisplayHeight = displayHeightSV.get();
                 const imageLeft = imageOffsetXSV.get();
@@ -250,69 +250,66 @@ function ReceiptCropView({imageUri, onCropChange, initialCrop, isAuthTokenRequir
         [cropX, cropY, cropWidth, cropHeight, displayWidthSV, displayHeightSV, imageOffsetXSV, imageOffsetYSV, imageOffsetX, scaleX, imageOffsetY, scaleY, onCropChange, clamp],
     );
 
-    // Animated styles for crop border
     const borderStyle = useAnimatedStyle(() => {
         return {
-            position: 'absolute',
+            ...styles.pAbsolute,
             left: cropX.get(),
             top: cropY.get(),
             width: cropWidth.get(),
             height: cropHeight.get(),
-            borderWidth: BORDER_WIDTH,
-            borderColor: '#00D970', // Green color as shown in the design
+            borderWidth: variables.cropBorderWidth,
+            borderColor: theme.success,
         };
     });
 
-    // Animated styles for corner handles
     const topLeftCornerStyle = useAnimatedStyle(() => ({
-        position: 'absolute',
-        left: cropX.get() - CORNER_SIZE / 2,
-        top: cropY.get() - CORNER_SIZE / 2,
-        width: CORNER_SIZE,
-        height: CORNER_SIZE,
-        borderRadius: CORNER_SIZE / 2,
-        backgroundColor: '#00D970',
+        ...styles.pAbsolute,
+        left: cropX.get() - variables.cornerHandleSize / 2,
+        top: cropY.get() - variables.cornerHandleSize / 2,
+        width: variables.cornerHandleSize,
+        height: variables.cornerHandleSize,
+        borderRadius: variables.cornerHandleSize / 2,
+        backgroundColor: theme.success,
         borderWidth: 2,
-        borderColor: '#FFFFFF',
+        borderColor: theme.white,
     }));
 
     const topRightCornerStyle = useAnimatedStyle(() => ({
-        position: 'absolute',
-        left: cropX.get() + cropWidth.get() - CORNER_SIZE / 2,
-        top: cropY.get() - CORNER_SIZE / 2,
-        width: CORNER_SIZE,
-        height: CORNER_SIZE,
-        borderRadius: CORNER_SIZE / 2,
-        backgroundColor: '#00D970',
+        ...styles.pAbsolute,
+        left: cropX.get() + cropWidth.get() - variables.cornerHandleSize / 2,
+        top: cropY.get() - variables.cornerHandleSize / 2,
+        width: variables.cornerHandleSize,
+        height: variables.cornerHandleSize,
+        borderRadius: variables.cornerHandleSize / 2,
+        backgroundColor: theme.success,
         borderWidth: 2,
-        borderColor: '#FFFFFF',
+        borderColor: theme.white,
     }));
 
     const bottomLeftCornerStyle = useAnimatedStyle(() => ({
-        position: 'absolute',
-        left: cropX.get() - CORNER_SIZE / 2,
-        top: cropY.get() + cropHeight.get() - CORNER_SIZE / 2,
-        width: CORNER_SIZE,
-        height: CORNER_SIZE,
-        borderRadius: CORNER_SIZE / 2,
-        backgroundColor: '#00D970',
+        ...styles.pAbsolute,
+        left: cropX.get() - variables.cornerHandleSize / 2,
+        top: cropY.get() + cropHeight.get() - variables.cornerHandleSize / 2,
+        width: variables.cornerHandleSize,
+        height: variables.cornerHandleSize,
+        borderRadius: variables.cornerHandleSize / 2,
+        backgroundColor: theme.success,
         borderWidth: 2,
-        borderColor: '#FFFFFF',
+        borderColor: theme.white,
     }));
 
     const bottomRightCornerStyle = useAnimatedStyle(() => ({
-        position: 'absolute',
-        left: cropX.get() + cropWidth.get() - CORNER_SIZE / 2,
-        top: cropY.get() + cropHeight.get() - CORNER_SIZE / 2,
-        width: CORNER_SIZE,
-        height: CORNER_SIZE,
-        borderRadius: CORNER_SIZE / 2,
-        backgroundColor: '#00D970',
+        ...styles.pAbsolute,
+        left: cropX.get() + cropWidth.get() - variables.cornerHandleSize / 2,
+        top: cropY.get() + cropHeight.get() - variables.cornerHandleSize / 2,
+        width: variables.cornerHandleSize,
+        height: variables.cornerHandleSize,
+        borderRadius: variables.cornerHandleSize / 2,
+        backgroundColor: theme.success,
         borderWidth: 2,
-        borderColor: '#FFFFFF',
+        borderColor: theme.white,
     }));
 
-    // Overlay styles to darken areas outside the crop rectangle (only within image bounds)
     const overlayTopStyle = useAnimatedStyle(() => {
         'worklet';
 
@@ -322,12 +319,12 @@ function ReceiptCropView({imageUri, onCropChange, initialCrop, isAuthTokenRequir
         const cropTop = cropY.get();
 
         return {
-            position: 'absolute',
+            ...styles.pAbsolute,
             left: imageLeft,
             top: imageTop,
             width: imgDisplayWidth,
             height: Math.max(0, cropTop - imageTop),
-            backgroundColor: 'rgba(0, 0, 0, 0.5)',
+            backgroundColor: theme.transparentWhite,
         };
     });
 
@@ -342,12 +339,12 @@ function ReceiptCropView({imageUri, onCropChange, initialCrop, isAuthTokenRequir
         const imageBottom = imageTop + imgDisplayHeight;
 
         return {
-            position: 'absolute',
+            ...styles.pAbsolute,
             left: imageLeft,
             top: cropBottom,
             width: imgDisplayWidth,
             height: Math.max(0, imageBottom - cropBottom),
-            backgroundColor: 'rgba(0, 0, 0, 0.5)',
+            backgroundColor: theme.transparentWhite,
         };
     });
 
@@ -360,12 +357,12 @@ function ReceiptCropView({imageUri, onCropChange, initialCrop, isAuthTokenRequir
         const cropHeightValue = cropHeight.get();
 
         return {
-            position: 'absolute',
+            ...styles.pAbsolute,
             left: imageLeft,
             top: cropTop,
             width: Math.max(0, cropLeft - imageLeft),
             height: cropHeightValue,
-            backgroundColor: 'rgba(0, 0, 0, 0.5)',
+            backgroundColor: theme.transparentWhite,
         };
     });
 
@@ -380,17 +377,17 @@ function ReceiptCropView({imageUri, onCropChange, initialCrop, isAuthTokenRequir
         const cropHeightValue = cropHeight.get();
 
         return {
-            position: 'absolute',
+            ...styles.pAbsolute,
             left: cropRight,
             top: cropTop,
             width: Math.max(0, imageRight - cropRight),
             height: cropHeightValue,
-            backgroundColor: 'rgba(0, 0, 0, 0.5)',
+            backgroundColor: theme.transparentWhite,
         };
     });
 
     return (
-        <GestureHandlerRootView style={[styles.flex1, styles.w100, styles.mv5]}>
+        <GestureHandlerRootView style={[styles.flex1, styles.w100, styles.mv3]}>
             <Animated.View
                 style={[styles.flex1, styles.alignItemsCenter, styles.justifyContentCenter, styles.w100]}
                 onLayout={onContainerLayout}
@@ -406,10 +403,8 @@ function ReceiptCropView({imageUri, onCropChange, initialCrop, isAuthTokenRequir
                     />
                 </View>
 
-                {/* Crop border - only show if crop rectangle is initialized */}
                 {isCropInitialized && (
                     <>
-                        {/* Overlay to darken areas outside crop rectangle */}
                         <Animated.View
                             style={overlayTopStyle}
                             pointerEvents="none"
@@ -427,13 +422,11 @@ function ReceiptCropView({imageUri, onCropChange, initialCrop, isAuthTokenRequir
                             pointerEvents="none"
                         />
 
-                        {/* Crop border */}
                         <Animated.View
                             style={borderStyle}
                             pointerEvents="none"
                         />
 
-                        {/* Corner handles */}
                         <GestureDetector gesture={createCornerGesture('topLeft')}>
                             <Animated.View style={topLeftCornerStyle} />
                         </GestureDetector>
diff --git a/src/pages/media/AttachmentModalScreen/AttachmentModalBaseContent/index.tsx b/src/pages/media/AttachmentModalScreen/AttachmentModalBaseContent/index.tsx
index 9b50c5d9c9fa..974cb53c29c5 100644
--- a/src/pages/media/AttachmentModalScreen/AttachmentModalBaseContent/index.tsx
+++ b/src/pages/media/AttachmentModalScreen/AttachmentModalBaseContent/index.tsx
@@ -68,6 +68,7 @@ function AttachmentModalBaseContent({
     shouldCloseOnSwipeDown = false,
     footerActionButtons,
     customAttachmentContent,
+    attachmentViewContainerStyles,
 }: AttachmentModalBaseContentProps) {
     const styles = useThemeStyles();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
@@ -318,7 +319,7 @@ function AttachmentModalBaseContent({
                 shouldOverlayDots
                 subTitleLink={currentAttachmentLink ?? ''}
             />
-            <View style={styles.imageModalImageCenterContainer}>
+            <View style={[styles.imageModalImageCenterContainer, attachmentViewContainerStyles]}>
                 {isLoading && <FullScreenLoadingIndicator testID="attachment-loading-spinner" />}
                 {shouldShowNotFoundPage && !isLoading && (
                     <BlockingView
diff --git a/src/pages/media/AttachmentModalScreen/AttachmentModalBaseContent/types.ts b/src/pages/media/AttachmentModalScreen/AttachmentModalBaseContent/types.ts
index fafbbc096eaa..94d737d12ce9 100644
--- a/src/pages/media/AttachmentModalScreen/AttachmentModalBaseContent/types.ts
+++ b/src/pages/media/AttachmentModalScreen/AttachmentModalBaseContent/types.ts
@@ -1,5 +1,5 @@
 import type {RefObject} from 'react';
-import type {View} from 'react-native';
+import type {StyleProp, View, ViewStyle} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';
 import type {Attachment} from '@components/Attachments/types';
@@ -139,6 +139,9 @@ type AttachmentModalBaseContentProps = {
 
     /** Custom content to render instead of the default attachment view (e.g., crop view) */
     customAttachmentContent?: React.ReactNode;
+
+    /** Extra styles to pass for the attachment view container */
+    attachmentViewContainerStyles?: StyleProp<ViewStyle>;
 };
 
 export type {
diff --git a/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx b/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx
index 8bb8377256ff..a9b0bcccf116 100644
--- a/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx
+++ b/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx
@@ -335,7 +335,6 @@ function TransactionReceiptModalContent({navigation, route}: AttachmentModalScre
                 const croppedFilename = file.name ?? receiptFilename;
 
                 if (isDraftTransaction) {
-                    // Update the transaction immediately so the modal displays the cropped image right away
                     setMoneyRequestReceipt(transaction.transactionID, imageUriResult, croppedFilename, isDraftTransaction, receiptType);
                 } else {
                     replaceReceipt({
@@ -441,15 +440,14 @@ function TransactionReceiptModalContent({navigation, route}: AttachmentModalScre
         [deleteReceiptAndClose, isDeleteReceiptConfirmModalVisible, translate],
     );
 
-    // Footer action buttons
     const footerActionButtons = useMemo(() => {
         if (isCropping) {
-            // Show Cancel and Save buttons in crop mode
             return (
                 <View style={[styles.flexRow, styles.gap4, styles.ph5, styles.pb5, styles.justifyContentCenter]}>
                     <Button
                         onPress={exitCropMode}
                         text={translate('common.cancel')}
+                        icon={Expensicons.Close}
                     />
                     <Button
                         success
@@ -457,12 +455,12 @@ function TransactionReceiptModalContent({navigation, route}: AttachmentModalScre
                         text={translate('common.save')}
                         isLoading={isCropSaving}
                         isDisabled={!cropRect || isCropSaving}
+                        icon={Expensicons.Checkmark}
                     />
                 </View>
             );
         }
 
-        // Show Rotate, Crop, Replace buttons in normal mode
         if (!shouldShowRotateReceiptButton && !shouldShowCropReceiptButton && !shouldShowReplaceReceiptButton) {
             return null;
         }
@@ -562,23 +560,9 @@ function TransactionReceiptModalContent({navigation, route}: AttachmentModalScre
             shouldMinimizeMenuButton: false,
             footerActionButtons,
             customAttachmentContent,
+            attachmentViewContainerStyles: [styles.mv3, styles.ph2],
         }),
-        [
-            allowDownload,
-            headerTitle,
-            isAuthTokenRequired,
-            isTrackExpenseActionValue,
-            onDownloadAttachment,
-            originalFileName,
-            report,
-            reportMetadata?.isLoadingInitialReportActions,
-            shouldShowNotFoundPage,
-            source,
-            threeDotsMenuItems,
-            transaction,
-            footerActionButtons,
-            customAttachmentContent,
-        ],
+        [source, originalFileName, report, headerTitle, threeDotsMenuItems, isAuthTokenRequired, isTrackExpenseActionValue, transaction, reportMetadata?.isLoadingInitialReportActions, shouldShowNotFoundPage, allowDownload, onDownloadAttachment, footerActionButtons, customAttachmentContent, styles.mv3, styles.ph2],
     );
 
     return (
diff --git a/src/styles/variables.ts b/src/styles/variables.ts
index 4c509891322d..60450e1afa1d 100644
--- a/src/styles/variables.ts
+++ b/src/styles/variables.ts
@@ -144,8 +144,10 @@ export default {
     checkboxLabelActiveOpacity: 0.7,
     checkboxLabelHoverOpacity: 1,
     avatarChatSpacing: 12,
+    cornerHandleSize: 12,
     chatInputSpacing: 52, // 40 + avatarChatSpacing
     borderTopWidth: 1,
+    cropBorderWidth: 2,
     emptyLHNIconWidth: 24, // iconSizeSmall + 4*2 horizontal margin
     emptyLHNIconHeight: 16,
     emptySelectionListIconWidth: 120,

From 9affa18860da4a2e59a98ab0f7c2595301eac233 Mon Sep 17 00:00:00 2001
From: nkdengineer <nkdengineer@outlook.com>
Date: Wed, 21 Jan 2026 21:14:07 +0700
Subject: [PATCH 03/39] update translation

---
 src/languages/de.ts      | 1 +
 src/languages/es.ts      | 1 +
 src/languages/fr.ts      | 1 +
 src/languages/it.ts      | 1 +
 src/languages/ja.ts      | 1 +
 src/languages/nl.ts      | 1 +
 src/languages/pl.ts      | 1 +
 src/languages/pt-BR.ts   | 1 +
 src/languages/zh-hans.ts | 1 +
 9 files changed, 9 insertions(+)

diff --git a/src/languages/de.ts b/src/languages/de.ts
index addc4c2ab3ac..b4388d6645cd 100644
--- a/src/languages/de.ts
+++ b/src/languages/de.ts
@@ -1065,6 +1065,7 @@ const translations: TranslationDeepObject<typeof en> = {
         deleteConfirmation: 'Sind Sie sicher, dass Sie diesen Beleg löschen möchten?',
         addReceipt: 'Beleg hinzufügen',
         scanFailed: 'Die Quittung konnte nicht gescannt werden, da der Händler, das Datum oder der Betrag fehlt.',
+        crop: 'Zuschneiden',
     },
     quickAction: {
         scanReceipt: 'Beleg scannen',
diff --git a/src/languages/es.ts b/src/languages/es.ts
index fcb04c9aaec0..06b95d61d3dc 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -804,6 +804,7 @@ const translations: TranslationDeepObject<typeof en> = {
         deleteConfirmation: '¿Estás seguro de que quieres borrar este recibo?',
         addReceipt: 'Añadir recibo',
         scanFailed: 'El recibo no pudo ser escaneado, ya que falta el comerciante, la fecha o el monto.',
+        crop: 'Recortar',
     },
     quickAction: {
         scanReceipt: 'Escanear recibo',
diff --git a/src/languages/fr.ts b/src/languages/fr.ts
index 74da4330dfe6..054d8112f778 100644
--- a/src/languages/fr.ts
+++ b/src/languages/fr.ts
@@ -1066,6 +1066,7 @@ const translations: TranslationDeepObject<typeof en> = {
         deleteConfirmation: 'Voulez-vous vraiment supprimer ce reçu ?',
         addReceipt: 'Ajouter un reçu',
         scanFailed: 'Le reçu n’a pas pu être scanné, car il manque un commerçant, une date ou un montant.',
+        crop: 'Recadrer',
     },
     quickAction: {
         scanReceipt: 'Scanner le reçu',
diff --git a/src/languages/it.ts b/src/languages/it.ts
index 3f8298ef71ec..d48ab0b7a6bd 100644
--- a/src/languages/it.ts
+++ b/src/languages/it.ts
@@ -1062,6 +1062,7 @@ const translations: TranslationDeepObject<typeof en> = {
         deleteConfirmation: 'Sei sicuro di voler eliminare questa ricevuta?',
         addReceipt: 'Aggiungi ricevuta',
         scanFailed: 'Impossibile acquisire la ricevuta perché mancano l’esercente, la data o l’importo.',
+        crop: 'Ritaglia',
     },
     quickAction: {
         scanReceipt: 'Scansiona ricevuta',
diff --git a/src/languages/ja.ts b/src/languages/ja.ts
index 4cf69368bde3..787b10d8dfa3 100644
--- a/src/languages/ja.ts
+++ b/src/languages/ja.ts
@@ -1062,6 +1062,7 @@ const translations: TranslationDeepObject<typeof en> = {
         deleteConfirmation: 'この領収書を削除してもよろしいですか？',
         addReceipt: '領収書を追加',
         scanFailed: 'この領収書は、店舗名、日付、または金額が欠けているためスキャンできませんでした。',
+        crop: 'トリミング',
     },
     quickAction: {
         scanReceipt: 'レシートをスキャン',
diff --git a/src/languages/nl.ts b/src/languages/nl.ts
index 66dd298b8cf7..93dbb726fbc6 100644
--- a/src/languages/nl.ts
+++ b/src/languages/nl.ts
@@ -1062,6 +1062,7 @@ const translations: TranslationDeepObject<typeof en> = {
         deleteConfirmation: 'Weet je zeker dat je deze bon wilt verwijderen?',
         addReceipt: 'Bon toevoegen',
         scanFailed: 'De bon kon niet worden gescand, omdat er een handelaar, datum of bedrag ontbreekt.',
+        crop: 'Bijsnijden',
     },
     quickAction: {
         scanReceipt: 'Bon scannen',
diff --git a/src/languages/pl.ts b/src/languages/pl.ts
index 6fe3f906cc61..405b4200aa04 100644
--- a/src/languages/pl.ts
+++ b/src/languages/pl.ts
@@ -1062,6 +1062,7 @@ const translations: TranslationDeepObject<typeof en> = {
         deleteConfirmation: 'Czy na pewno chcesz usunąć ten paragon?',
         addReceipt: 'Dodaj paragon',
         scanFailed: 'Nie można było zeskanować paragonu, ponieważ brakuje na nim sprzedawcy, daty lub kwoty.',
+        crop: 'Przytnij',
     },
     quickAction: {
         scanReceipt: 'Zeskanuj paragon',
diff --git a/src/languages/pt-BR.ts b/src/languages/pt-BR.ts
index 6270d4f51442..2e25fdbfc4ec 100644
--- a/src/languages/pt-BR.ts
+++ b/src/languages/pt-BR.ts
@@ -1061,6 +1061,7 @@ const translations: TranslationDeepObject<typeof en> = {
         deleteConfirmation: 'Tem certeza de que deseja excluir este recibo?',
         addReceipt: 'Adicionar recibo',
         scanFailed: 'O recibo não pôde ser escaneado, pois está faltando o comerciante, a data ou o valor.',
+        crop: 'Cortar',
     },
     quickAction: {
         scanReceipt: 'Escanear recibo',
diff --git a/src/languages/zh-hans.ts b/src/languages/zh-hans.ts
index c9fa349a5410..78010a2221e7 100644
--- a/src/languages/zh-hans.ts
+++ b/src/languages/zh-hans.ts
@@ -1047,6 +1047,7 @@ const translations: TranslationDeepObject<typeof en> = {
         deleteConfirmation: '您确定要删除此收据吗？',
         addReceipt: '添加收据',
         scanFailed: '无法扫描该收据，因为缺少商家、日期或金额。',
+        crop: '裁剪',
     },
     quickAction: {
         scanReceipt: '扫描收据',

From 7bf66311dc5c0cfde755b18703ad8fa8acef49e2 Mon Sep 17 00:00:00 2001
From: nkdengineer <nkdengineer@outlook.com>
Date: Wed, 21 Jan 2026 21:15:39 +0700
Subject: [PATCH 04/39] remove template change

---
 contributingGuides/PROPOSAL_TEMPLATE.md | 54 -------------------------
 1 file changed, 54 deletions(-)

diff --git a/contributingGuides/PROPOSAL_TEMPLATE.md b/contributingGuides/PROPOSAL_TEMPLATE.md
index 2e110587b3fd..8c9fa7968fe2 100644
--- a/contributingGuides/PROPOSAL_TEMPLATE.md
+++ b/contributingGuides/PROPOSAL_TEMPLATE.md
@@ -2,67 +2,13 @@
 
 ### Please re-state the problem that we are trying to solve in this issue.
 
-Users viewing receipts in the Transaction Receipt Modal can currently rotate receipts but cannot crop them. When receipts contain unwanted areas (like table surfaces, other items, or excessive whitespace), users have no way to remove these areas before saving. This results in lower quality receipt images that may affect OCR accuracy and visual clarity.
-
 ### What is the root cause of that problem?
 
-The root cause is that the receipt modal UI only exposes rotation functionality through the header's rotate button. There is no crop interface that allows users to:
-1. Visually select the area they want to keep
-2. Interactively adjust crop boundaries
-3. Preview the cropped result before saving
-
-The underlying `cropOrRotateImage` utility already supports cropping operations (it accepts crop actions with originX, originY, width, and height), but this functionality is not exposed in the UI.
-
 ### What changes do you think we should make in order to solve the problem?
 <!-- DO NOT POST CODE DIFFS -->
 
-1. **Add action buttons footer**: Create a footer section below the receipt image with three buttons: "Rotate", "Crop", and "Replace". These buttons should be visible when viewing receipts (similar to how the rotate button currently appears in the header, but moved to a footer for better UX).
-
-2. **Implement crop mode state**: When the "Crop" button is clicked, enter a crop mode that:
-   - Hides the three action buttons (Rotate, Crop, Replace)
-   - Shows two buttons instead: "Cancel" (to exit crop mode) and "Save" (to apply the crop)
-   - Displays a draggable border overlay around the receipt image
-
-3. **Create draggable crop border component**: Build a `ReceiptCropView` component that:
-   - Renders a rectangular border with four corner handles (small circular indicators)
-   - Allows dragging each corner independently to adjust the crop area
-   - Maintains the crop rectangle bounds within the image boundaries
-   - Provides visual feedback (e.g., green border color) to indicate the active crop area
-   - Calculates the crop coordinates (originX, originY, width, height) relative to the original image dimensions
-
-4. **Integrate crop functionality**: 
-   - When "Save" is clicked in crop mode, calculate the crop parameters based on the current border position
-   - Use the existing `cropOrRotateImage` function with the crop action
-   - Update the receipt using the same pattern as the rotate functionality (either `setMoneyRequestReceipt` for draft transactions or `replaceReceipt` for saved transactions)
-   - Exit crop mode and return to normal view after successful crop
-
-5. **Update header behavior**: 
-   - Remove the rotate button from the header (it will be in the footer)
-   - Keep Download and Delete in the three-dots menu in the header as specified
-   - Ensure the header remains clean with only essential actions
-
-6. **Handle edge cases**:
-   - Disable crop mode for e-receipts (similar to how rotate is disabled)
-   - Ensure crop mode is only available for image files (not PDFs or other formats)
-   - Prevent crop when receipt is being scanned or has missing smartscan fields
-   - Handle image loading states appropriately
-
-The implementation will follow the existing patterns in the codebase:
-- Use React Native Gesture Handler for drag interactions (similar to `AvatarCropModal`)
-- Leverage the existing `cropOrRotateImage` utility
-- Follow the same transaction update patterns used by the rotate feature
-- Maintain consistency with the current modal structure and styling
-
 ### What alternative solutions did you explore? (Optional)
 
-1. **Separate crop modal**: Considered opening a dedicated crop modal (like `AvatarCropModal`), but this would require an extra navigation step and break the flow. Inline cropping provides a smoother UX.
-
-2. **Fixed aspect ratio cropping**: Considered enforcing a fixed aspect ratio, but receipts vary significantly in dimensions, so free-form cropping is more flexible.
-
-3. **Crop in header menu**: Considered adding crop to the three-dots menu, but having it as a primary action button in the footer makes it more discoverable and accessible.
-
-4. **Using existing AvatarCropModal**: The `AvatarCropModal` component uses a circular mask and zoom slider, which is optimized for avatars. For receipts, we need a rectangular crop with corner handles, so a new component is more appropriate.
-
 **Reminder:** Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.
 
 <!---

From 13e3e2980ba0900953b2ca97040befa6db80eba3 Mon Sep 17 00:00:00 2001
From: nkdengineer <nkdengineer@outlook.com>
Date: Wed, 21 Jan 2026 21:21:59 +0700
Subject: [PATCH 05/39] remove unnecessary comment

---
 .../routes/TransactionReceiptModalContent.tsx | 21 +------------------
 1 file changed, 1 insertion(+), 20 deletions(-)

diff --git a/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx b/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx
index a9b0bcccf116..f6fbcc5042b2 100644
--- a/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx
+++ b/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx
@@ -193,9 +193,6 @@ function TransactionReceiptModalContent({navigation, route}: AttachmentModalScre
 
     const allowDownload = !isEReceipt;
 
-    /**
-     * Rotate the receipt image 90 degrees and save it automatically.
-     */
     const rotateReceipt = useCallback(() => {
         if (!transaction?.transactionID || !sourceUri || !isImage) {
             return;
@@ -215,7 +212,6 @@ function TransactionReceiptModalContent({navigation, route}: AttachmentModalScre
                     return;
                 }
 
-                // Both web and native return objects with uri property
                 const imageUriResult = 'uri' in rotatedImage && rotatedImage.uri ? rotatedImage.uri : undefined;
                 if (!imageUriResult) {
                     setIsRotating(false);
@@ -226,7 +222,6 @@ function TransactionReceiptModalContent({navigation, route}: AttachmentModalScre
                 const rotatedFilename = file.name ?? receiptFilename;
 
                 if (isDraftTransaction) {
-                    // Update the transaction immediately so the modal displays the rotated image right away
                     setMoneyRequestReceipt(transaction.transactionID, imageUriResult, rotatedFilename, isDraftTransaction, receiptType);
                 } else {
                     replaceReceipt({
@@ -266,32 +261,20 @@ function TransactionReceiptModalContent({navigation, route}: AttachmentModalScre
         [shouldShowReplaceReceiptButton, transaction, isEReceipt, receiptFilename],
     );
 
-    /**
-     * Enter crop mode
-     */
     const enterCropMode = useCallback(() => {
         setIsCropping(true);
         setCropRect(null);
     }, []);
 
-    /**
-     * Exit crop mode without saving
-     */
     const exitCropMode = useCallback(() => {
         setIsCropping(false);
         setCropRect(null);
     }, []);
 
-    /**
-     * Handle crop rectangle changes
-     */
     const handleCropChange = useCallback((crop: CropRect) => {
         setCropRect(crop);
     }, []);
 
-    /**
-     * Save the cropped image
-     */
     const saveCrop = useCallback(() => {
         if (!transaction?.transactionID || !sourceUri || !isImage || !cropRect) {
             return;
@@ -324,7 +307,6 @@ function TransactionReceiptModalContent({navigation, route}: AttachmentModalScre
                     return;
                 }
 
-                // Both web and native return objects with uri property
                 const imageUriResult = 'uri' in croppedImage && croppedImage.uri ? croppedImage.uri : undefined;
                 if (!imageUriResult) {
                     setIsCropSaving(false);
@@ -527,7 +509,6 @@ function TransactionReceiptModalContent({navigation, route}: AttachmentModalScre
         styles,
     ]);
 
-    // Custom attachment content for crop mode
     const customAttachmentContent = useMemo(() => {
         if (!isCropping || !source) {
             return null;
@@ -554,7 +535,7 @@ function TransactionReceiptModalContent({navigation, route}: AttachmentModalScre
             isLoading: !transaction && reportMetadata?.isLoadingInitialReportActions,
             shouldShowNotFoundPage,
             shouldShowCarousel: false,
-            shouldShowRotateButton: false, // Remove rotate button from header
+            shouldShowRotateButton: false,
             onDownloadAttachment: allowDownload ? undefined : onDownloadAttachment,
             transaction,
             shouldMinimizeMenuButton: false,

From e5c34b37367c222225ce1d24d9c7d81a6585f035 Mon Sep 17 00:00:00 2001
From: nkdengineer <nkdengineer@outlook.com>
Date: Wed, 21 Jan 2026 21:26:32 +0700
Subject: [PATCH 06/39] fix prettier

---
 src/components/ReceiptCropView/index.tsx      | 158 +++++++++---------
 .../routes/TransactionReceiptModalContent.tsx |  19 ++-
 2 files changed, 98 insertions(+), 79 deletions(-)

diff --git a/src/components/ReceiptCropView/index.tsx b/src/components/ReceiptCropView/index.tsx
index 729056fe81b2..1e962c470a94 100644
--- a/src/components/ReceiptCropView/index.tsx
+++ b/src/components/ReceiptCropView/index.tsx
@@ -168,84 +168,86 @@ function ReceiptCropView({imageUri, onCropChange, initialCrop, isAuthTokenRequir
      */
     const createCornerGesture = useCallback(
         (corner: CornerPosition) => {
-            return Gesture.Pan().runOnJS(true).onChange((event: GestureUpdateEvent<PanGestureHandlerEventPayload & PanGestureChangeEventPayload>) => {
-                'worklet';
-
-                const currentX = cropX.get();
-                const currentY = cropY.get();
-                const currentWidth = cropWidth.get();
-                const currentHeight = cropHeight.get();
-
-                let newX = currentX;
-                let newY = currentY;
-                let newWidth = currentWidth;
-                let newHeight = currentHeight;
-
-                const minSize = variables.cornerHandleSize * 2;
-                const imgDisplayWidth = displayWidthSV.get();
-                const imgDisplayHeight = displayHeightSV.get();
-                const imageLeft = imageOffsetXSV.get();
-                const imageRight = imageLeft + imgDisplayWidth;
-                const imageTop = imageOffsetYSV.get();
-                const imageBottom = imageTop + imgDisplayHeight;
-
-                switch (corner) {
-                    case 'topLeft':
-                        newX = clamp(currentX + event.changeX, imageLeft, currentX + currentWidth - minSize);
-                        newY = clamp(currentY + event.changeY, imageTop, currentY + currentHeight - minSize);
-                        newWidth = currentWidth - (newX - currentX);
-                        newHeight = currentHeight - (newY - currentY);
-                        break;
-                    case 'topRight':
-                        newY = clamp(currentY + event.changeY, imageTop, currentY + currentHeight - minSize);
-                        newWidth = clamp(currentWidth + event.changeX, minSize, imageRight - currentX);
-                        newHeight = currentHeight - (newY - currentY);
-                        break;
-                    case 'bottomLeft':
-                        newX = clamp(currentX + event.changeX, imageLeft, currentX + currentWidth - minSize);
-                        newWidth = currentWidth - (newX - currentX);
-                        newHeight = clamp(currentHeight + event.changeY, minSize, imageBottom - currentY);
-                        break;
-                    case 'bottomRight':
-                        newWidth = clamp(currentWidth + event.changeX, minSize, imageRight - currentX);
-                        newHeight = clamp(currentHeight + event.changeY, minSize, imageBottom - currentY);
-                        break;
-                    default:
-                        break;
-                }
-
-                // Ensure crop rectangle stays within image bounds
-                if (newX < imageLeft) {
-                    const diff = imageLeft - newX;
-                    newX = imageLeft;
-                    newWidth -= diff;
-                }
-                if (newX + newWidth > imageRight) {
-                    newWidth = imageRight - newX;
-                }
-                if (newY < imageTop) {
-                    const diff = imageTop - newY;
-                    newY = imageTop;
-                    newHeight -= diff;
-                }
-                if (newY + newHeight > imageBottom) {
-                    newHeight = imageBottom - newY;
-                }
-
-                cropX.set(newX);
-                cropY.set(newY);
-                cropWidth.set(newWidth);
-                cropHeight.set(newHeight);
-
-                const crop: CropRect = {
-                    x: (newX - imageOffsetX) * scaleX,
-                    y: (newY - imageOffsetY) * scaleY,
-                    width: newWidth * scaleX,
-                    height: newHeight * scaleY,
-                };
-
-                onCropChange?.(crop);
-            });
+            return Gesture.Pan()
+                .runOnJS(true)
+                .onChange((event: GestureUpdateEvent<PanGestureHandlerEventPayload & PanGestureChangeEventPayload>) => {
+                    'worklet';
+
+                    const currentX = cropX.get();
+                    const currentY = cropY.get();
+                    const currentWidth = cropWidth.get();
+                    const currentHeight = cropHeight.get();
+
+                    let newX = currentX;
+                    let newY = currentY;
+                    let newWidth = currentWidth;
+                    let newHeight = currentHeight;
+
+                    const minSize = variables.cornerHandleSize * 2;
+                    const imgDisplayWidth = displayWidthSV.get();
+                    const imgDisplayHeight = displayHeightSV.get();
+                    const imageLeft = imageOffsetXSV.get();
+                    const imageRight = imageLeft + imgDisplayWidth;
+                    const imageTop = imageOffsetYSV.get();
+                    const imageBottom = imageTop + imgDisplayHeight;
+
+                    switch (corner) {
+                        case 'topLeft':
+                            newX = clamp(currentX + event.changeX, imageLeft, currentX + currentWidth - minSize);
+                            newY = clamp(currentY + event.changeY, imageTop, currentY + currentHeight - minSize);
+                            newWidth = currentWidth - (newX - currentX);
+                            newHeight = currentHeight - (newY - currentY);
+                            break;
+                        case 'topRight':
+                            newY = clamp(currentY + event.changeY, imageTop, currentY + currentHeight - minSize);
+                            newWidth = clamp(currentWidth + event.changeX, minSize, imageRight - currentX);
+                            newHeight = currentHeight - (newY - currentY);
+                            break;
+                        case 'bottomLeft':
+                            newX = clamp(currentX + event.changeX, imageLeft, currentX + currentWidth - minSize);
+                            newWidth = currentWidth - (newX - currentX);
+                            newHeight = clamp(currentHeight + event.changeY, minSize, imageBottom - currentY);
+                            break;
+                        case 'bottomRight':
+                            newWidth = clamp(currentWidth + event.changeX, minSize, imageRight - currentX);
+                            newHeight = clamp(currentHeight + event.changeY, minSize, imageBottom - currentY);
+                            break;
+                        default:
+                            break;
+                    }
+
+                    // Ensure crop rectangle stays within image bounds
+                    if (newX < imageLeft) {
+                        const diff = imageLeft - newX;
+                        newX = imageLeft;
+                        newWidth -= diff;
+                    }
+                    if (newX + newWidth > imageRight) {
+                        newWidth = imageRight - newX;
+                    }
+                    if (newY < imageTop) {
+                        const diff = imageTop - newY;
+                        newY = imageTop;
+                        newHeight -= diff;
+                    }
+                    if (newY + newHeight > imageBottom) {
+                        newHeight = imageBottom - newY;
+                    }
+
+                    cropX.set(newX);
+                    cropY.set(newY);
+                    cropWidth.set(newWidth);
+                    cropHeight.set(newHeight);
+
+                    const crop: CropRect = {
+                        x: (newX - imageOffsetX) * scaleX,
+                        y: (newY - imageOffsetY) * scaleY,
+                        width: newWidth * scaleX,
+                        height: newHeight * scaleY,
+                    };
+
+                    onCropChange?.(crop);
+                });
         },
         [cropX, cropY, cropWidth, cropHeight, displayWidthSV, displayHeightSV, imageOffsetXSV, imageOffsetYSV, imageOffsetX, scaleX, imageOffsetY, scaleY, onCropChange, clamp],
     );
diff --git a/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx b/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx
index f6fbcc5042b2..5816ac74f3b1 100644
--- a/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx
+++ b/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx
@@ -543,7 +543,24 @@ function TransactionReceiptModalContent({navigation, route}: AttachmentModalScre
             customAttachmentContent,
             attachmentViewContainerStyles: [styles.mv3, styles.ph2],
         }),
-        [source, originalFileName, report, headerTitle, threeDotsMenuItems, isAuthTokenRequired, isTrackExpenseActionValue, transaction, reportMetadata?.isLoadingInitialReportActions, shouldShowNotFoundPage, allowDownload, onDownloadAttachment, footerActionButtons, customAttachmentContent, styles.mv3, styles.ph2],
+        [
+            source,
+            originalFileName,
+            report,
+            headerTitle,
+            threeDotsMenuItems,
+            isAuthTokenRequired,
+            isTrackExpenseActionValue,
+            transaction,
+            reportMetadata?.isLoadingInitialReportActions,
+            shouldShowNotFoundPage,
+            allowDownload,
+            onDownloadAttachment,
+            footerActionButtons,
+            customAttachmentContent,
+            styles.mv3,
+            styles.ph2,
+        ],
     );
 
     return (

From 23f09cade77b0a07f8f1cfbfec447cdeedcc5992 Mon Sep 17 00:00:00 2001
From: nkdengineer <nkdengineer@outlook.com>
Date: Wed, 21 Jan 2026 21:45:44 +0700
Subject: [PATCH 07/39] update crop icon

---
 assets/images/crop.svg                                          | 1 +
 src/components/Icon/Expensicons.ts                              | 2 ++
 src/components/Icon/chunks/expensify-icons.chunk.ts             | 2 ++
 .../routes/TransactionReceiptModalContent.tsx                   | 2 +-
 4 files changed, 6 insertions(+), 1 deletion(-)
 create mode 100644 assets/images/crop.svg

diff --git a/assets/images/crop.svg b/assets/images/crop.svg
new file mode 100644
index 000000000000..8531488b111e
--- /dev/null
+++ b/assets/images/crop.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" viewBox="0 0 20 20"><defs><clipPath id="clippath"><path d="M0 0h20v20H0z" class="st0"/></clipPath><style>.st0{fill:none}.st1{clip-path:url(#clippath)}</style></defs><g class="st1"><path d="M4.5 0A1.5 1.5 0 0 1 6 1.5V3h11v11h1.5a1.5 1.5 0 0 1 0 3H17v1.5a1.5 1.5 0 0 1-3 0V6H1.5a1.5 1.5 0 0 1 0-3H3V1.5A1.5 1.5 0 0 1 4.5 0"/><path d="M6 14h6v3H3V8h3z"/></g></svg>
\ No newline at end of file
diff --git a/src/components/Icon/Expensicons.ts b/src/components/Icon/Expensicons.ts
index f41804d1e3ac..62cdc205334a 100644
--- a/src/components/Icon/Expensicons.ts
+++ b/src/components/Icon/Expensicons.ts
@@ -37,6 +37,7 @@ import Copy from '@assets/images/copy.svg';
 import CreditCardExclamation from '@assets/images/credit-card-exclamation.svg';
 import CreditCardHourglass from '@assets/images/credit-card-hourglass.svg';
 import CreditCard from '@assets/images/creditcard.svg';
+import Crop from '@assets/images/crop.svg';
 import DocumentMerge from '@assets/images/document-merge.svg';
 import Document from '@assets/images/document.svg';
 import DotIndicatorUnfilled from '@assets/images/dot-indicator-unfilled.svg';
@@ -224,6 +225,7 @@ export {
     Inbox,
     ImageCropCircleMask,
     ImageCropSquareMask,
+    Crop,
     Info,
     Invoice,
     InvoiceGeneric,
diff --git a/src/components/Icon/chunks/expensify-icons.chunk.ts b/src/components/Icon/chunks/expensify-icons.chunk.ts
index e51dac50bbc5..11312c944bb4 100644
--- a/src/components/Icon/chunks/expensify-icons.chunk.ts
+++ b/src/components/Icon/chunks/expensify-icons.chunk.ts
@@ -63,6 +63,7 @@ import Copy from '@assets/images/copy.svg';
 import CreditCardExclamation from '@assets/images/credit-card-exclamation.svg';
 import CreditCardHourglass from '@assets/images/credit-card-hourglass.svg';
 import CreditCard from '@assets/images/creditcard.svg';
+import Crop from '@assets/images/crop.svg';
 import Crosshair from '@assets/images/crosshair.svg';
 import DocumentMerge from '@assets/images/document-merge.svg';
 import Document from '@assets/images/document.svg';
@@ -338,6 +339,7 @@ const Expensicons = {
     Inbox,
     ImageCropCircleMask,
     ImageCropSquareMask,
+    Crop,
     Info,
     Invoice,
     InvoiceGeneric,
diff --git a/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx b/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx
index 5816ac74f3b1..42b79c2fb6cd 100644
--- a/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx
+++ b/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx
@@ -460,7 +460,7 @@ function TransactionReceiptModalContent({navigation, route}: AttachmentModalScre
                 )}
                 {!!shouldShowCropReceiptButton && (
                     <Button
-                        icon={Expensicons.ImageCropSquareMask}
+                        icon={Expensicons.Crop}
                         onPress={enterCropMode}
                         text={translate('receipt.crop')}
                     />

From 83f971015b50f5341d00a94c2f9b0c1bc1f65577 Mon Sep 17 00:00:00 2001
From: nkdengineer <nkdengineer@outlook.com>
Date: Thu, 22 Jan 2026 22:28:03 +0700
Subject: [PATCH 08/39] update cursor style and corner style

---
 src/components/ReceiptCropView/index.tsx      | 450 ++++++++++++++----
 .../routes/TransactionReceiptModalContent.tsx |   4 +-
 src/styles/utils/cursor/index.native.ts       |   8 +
 src/styles/utils/cursor/index.ts              |  24 +
 src/styles/utils/cursor/types.ts              |  10 +-
 src/styles/utils/index.ts                     | 153 ++++++
 src/styles/variables.ts                       |   4 +-
 7 files changed, 553 insertions(+), 100 deletions(-)

diff --git a/src/components/ReceiptCropView/index.tsx b/src/components/ReceiptCropView/index.tsx
index 1e962c470a94..e50bad908eff 100644
--- a/src/components/ReceiptCropView/index.tsx
+++ b/src/components/ReceiptCropView/index.tsx
@@ -1,4 +1,4 @@
-import React, {useCallback, useEffect, useMemo, useState} from 'react';
+import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import type {LayoutChangeEvent} from 'react-native';
 import {View} from 'react-native';
 import {Gesture, GestureDetector, GestureHandlerRootView} from 'react-native-gesture-handler';
@@ -7,7 +7,7 @@ import Animated, {useAnimatedStyle, useSharedValue} from 'react-native-reanimate
 import Image from '@components/Image';
 import RESIZE_MODES from '@components/Image/resizeModes';
 import LoadingIndicator from '@components/LoadingIndicator';
-import useTheme from '@hooks/useTheme';
+import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
 import ControlSelection from '@libs/ControlSelection';
 import variables from '@styles/variables';
@@ -34,10 +34,11 @@ type ReceiptCropViewProps = {
 };
 
 type CornerPosition = 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
+type EdgePosition = 'top' | 'bottom' | 'left' | 'right';
 
 function ReceiptCropView({imageUri, onCropChange, initialCrop, isAuthTokenRequired}: ReceiptCropViewProps) {
     const styles = useThemeStyles();
-    const theme = useTheme();
+    const StyleUtils = useStyleUtils();
 
     // Image dimensions
     const [imageSize, setImageSize] = useState<Dimensions>({width: 0, height: 0});
@@ -58,6 +59,16 @@ function ReceiptCropView({imageUri, onCropChange, initialCrop, isAuthTokenRequir
     const cropWidth = useSharedValue(0);
     const cropHeight = useSharedValue(0);
 
+    // Track previous values to detect changes and recalculate crop on resize
+    const prevDisplayValuesRef = useRef<{
+        displayWidth: number;
+        displayHeight: number;
+        scaleX: number;
+        scaleY: number;
+        imageOffsetX: number;
+        imageOffsetY: number;
+    } | null>(null);
+
     const isCropInitialized = imageSize.width > 0 && imageSize.height > 0 && containerSize.width > 0 && containerSize.height > 0;
 
     // Calculate scale factors to convert display coordinates to image coordinates
@@ -129,9 +140,91 @@ function ReceiptCropView({imageUri, onCropChange, initialCrop, isAuthTokenRequir
                 cropWidth.set(displayWidth);
                 cropHeight.set(displayHeight);
             }
+            // Store initial values
+            prevDisplayValuesRef.current = {
+                displayWidth,
+                displayHeight,
+                scaleX,
+                scaleY,
+                imageOffsetX,
+                imageOffsetY,
+            };
         }
     }, [displayWidth, displayHeight, scaleX, scaleY, imageOffsetX, imageOffsetY, initialCrop, cropX, cropY, cropWidth, cropHeight]);
 
+    // Update crop rectangle when container/image dimensions change (e.g., window resize)
+    useEffect(() => {
+        if (!displayWidth || !displayHeight || !scaleX || !scaleY) {
+            return;
+        }
+
+        // Only update if crop is already initialized and dimensions have changed
+        if (cropWidth.get() === 0 && cropHeight.get() === 0) {
+            return;
+        }
+
+        const prev = prevDisplayValuesRef.current;
+        if (!prev) {
+            return;
+        }
+
+        // Check if dimensions actually changed
+        const hasChanged =
+            prev.displayWidth !== displayWidth ||
+            prev.displayHeight !== displayHeight ||
+            prev.scaleX !== scaleX ||
+            prev.scaleY !== scaleY ||
+            prev.imageOffsetX !== imageOffsetX ||
+            prev.imageOffsetY !== imageOffsetY;
+
+        if (!hasChanged) {
+            return;
+        }
+
+        // Get current crop rectangle in display coordinates
+        const currentCropX = cropX.get();
+        const currentCropY = cropY.get();
+        const currentCropWidth = cropWidth.get();
+        const currentCropHeight = cropHeight.get();
+
+        // Convert current crop from old display coordinates to image coordinates
+        const imageX = (currentCropX - prev.imageOffsetX) * prev.scaleX;
+        const imageY = (currentCropY - prev.imageOffsetY) * prev.scaleY;
+        const imageWidth = currentCropWidth * prev.scaleX;
+        const imageHeight = currentCropHeight * prev.scaleY;
+
+        // Convert back to new display coordinates
+        const newCropX = imageOffsetX + imageX / scaleX;
+        const newCropY = imageOffsetY + imageY / scaleY;
+        const newCropWidth = imageWidth / scaleX;
+        const newCropHeight = imageHeight / scaleY;
+
+        // Update crop rectangle
+        cropX.set(newCropX);
+        cropY.set(newCropY);
+        cropWidth.set(newCropWidth);
+        cropHeight.set(newCropHeight);
+
+        // Update stored values
+        prevDisplayValuesRef.current = {
+            displayWidth,
+            displayHeight,
+            scaleX,
+            scaleY,
+            imageOffsetX,
+            imageOffsetY,
+        };
+
+        // Notify parent of the updated crop (in image coordinates)
+        const crop: CropRect = {
+            x: imageX,
+            y: imageY,
+            width: imageWidth,
+            height: imageHeight,
+        };
+        onCropChange?.(crop);
+    }, [displayWidth, displayHeight, scaleX, scaleY, imageOffsetX, imageOffsetY, cropX, cropY, cropWidth, cropHeight, onCropChange]);
+
     const onContainerLayout = useCallback(
         (event: LayoutChangeEvent) => {
             const {width, height} = event.nativeEvent.layout;
@@ -163,6 +256,89 @@ function ReceiptCropView({imageUri, onCropChange, initialCrop, isAuthTokenRequir
         return Math.max(min, Math.min(max, value));
     }, []);
 
+    /**
+     * Create gesture handler for an edge
+     */
+    const createEdgeGesture = useCallback(
+        (edge: EdgePosition) => {
+            return Gesture.Pan()
+                .runOnJS(true)
+                .onChange((event: GestureUpdateEvent<PanGestureHandlerEventPayload & PanGestureChangeEventPayload>) => {
+                    'worklet';
+
+                    const currentX = cropX.get();
+                    const currentY = cropY.get();
+                    const currentWidth = cropWidth.get();
+                    const currentHeight = cropHeight.get();
+
+                    let newX = currentX;
+                    let newY = currentY;
+                    let newWidth = currentWidth;
+                    let newHeight = currentHeight;
+
+                    const minSize = variables.cornerHandleSize * 2;
+                    const imgDisplayWidth = displayWidthSV.get();
+                    const imgDisplayHeight = displayHeightSV.get();
+                    const imageLeft = imageOffsetXSV.get();
+                    const imageRight = imageLeft + imgDisplayWidth;
+                    const imageTop = imageOffsetYSV.get();
+                    const imageBottom = imageTop + imgDisplayHeight;
+
+                    switch (edge) {
+                        case 'top':
+                            newY = clamp(currentY + event.changeY, imageTop, currentY + currentHeight - minSize);
+                            newHeight = currentHeight - (newY - currentY);
+                            break;
+                        case 'bottom':
+                            newHeight = clamp(currentHeight + event.changeY, minSize, imageBottom - currentY);
+                            break;
+                        case 'left':
+                            newX = clamp(currentX + event.changeX, imageLeft, currentX + currentWidth - minSize);
+                            newWidth = currentWidth - (newX - currentX);
+                            break;
+                        case 'right':
+                            newWidth = clamp(currentWidth + event.changeX, minSize, imageRight - currentX);
+                            break;
+                        default:
+                            break;
+                    }
+
+                    // Ensure crop rectangle stays within image bounds
+                    if (newX < imageLeft) {
+                        const diff = imageLeft - newX;
+                        newX = imageLeft;
+                        newWidth -= diff;
+                    }
+                    if (newX + newWidth > imageRight) {
+                        newWidth = imageRight - newX;
+                    }
+                    if (newY < imageTop) {
+                        const diff = imageTop - newY;
+                        newY = imageTop;
+                        newHeight -= diff;
+                    }
+                    if (newY + newHeight > imageBottom) {
+                        newHeight = imageBottom - newY;
+                    }
+
+                    cropX.set(newX);
+                    cropY.set(newY);
+                    cropWidth.set(newWidth);
+                    cropHeight.set(newHeight);
+
+                    const crop: CropRect = {
+                        x: (newX - imageOffsetX) * scaleX,
+                        y: (newY - imageOffsetY) * scaleY,
+                        width: newWidth * scaleX,
+                        height: newHeight * scaleY,
+                    };
+
+                    onCropChange?.(crop);
+                });
+        },
+        [cropX, cropY, cropWidth, cropHeight, displayWidthSV, displayHeightSV, imageOffsetXSV, imageOffsetYSV, imageOffsetX, scaleX, imageOffsetY, scaleY, onCropChange, clamp],
+    );
+
     /**
      * Create gesture handler for a corner
      */
@@ -253,64 +429,128 @@ function ReceiptCropView({imageUri, onCropChange, initialCrop, isAuthTokenRequir
     );
 
     const borderStyle = useAnimatedStyle(() => {
-        return {
-            ...styles.pAbsolute,
-            left: cropX.get(),
-            top: cropY.get(),
-            width: cropWidth.get(),
-            height: cropHeight.get(),
-            borderWidth: variables.cropBorderWidth,
-            borderColor: theme.success,
-        };
+        'worklet';
+
+        return StyleUtils.getCropViewStyles({
+            cropX: cropX.get(),
+            cropY: cropY.get(),
+            cropWidth: cropWidth.get(),
+            cropHeight: cropHeight.get(),
+        }).border;
+    });
+
+    const topLeftCornerStyle = useAnimatedStyle(() => {
+        'worklet';
+
+        return StyleUtils.getCropViewStyles({
+            cropX: cropX.get(),
+            cropY: cropY.get(),
+            cropWidth: cropWidth.get(),
+            cropHeight: cropHeight.get(),
+        }).cornerTopLeft;
+    });
+
+    const topLeftCornerVisualStyle = useAnimatedStyle(() => {
+        'worklet';
+
+        return StyleUtils.getCropViewStyles().cornerVisual;
+    });
+
+    const topRightCornerStyle = useAnimatedStyle(() => {
+        'worklet';
+
+        return StyleUtils.getCropViewStyles({
+            cropX: cropX.get(),
+            cropY: cropY.get(),
+            cropWidth: cropWidth.get(),
+            cropHeight: cropHeight.get(),
+        }).cornerTopRight;
+    });
+
+    const topRightCornerVisualStyle = useAnimatedStyle(() => {
+        'worklet';
+
+        return StyleUtils.getCropViewStyles().cornerVisual;
+    });
+
+    const bottomLeftCornerStyle = useAnimatedStyle(() => {
+        'worklet';
+
+        return StyleUtils.getCropViewStyles({
+            cropX: cropX.get(),
+            cropY: cropY.get(),
+            cropWidth: cropWidth.get(),
+            cropHeight: cropHeight.get(),
+        }).cornerBottomLeft;
     });
 
-    const topLeftCornerStyle = useAnimatedStyle(() => ({
-        ...styles.pAbsolute,
-        left: cropX.get() - variables.cornerHandleSize / 2,
-        top: cropY.get() - variables.cornerHandleSize / 2,
-        width: variables.cornerHandleSize,
-        height: variables.cornerHandleSize,
-        borderRadius: variables.cornerHandleSize / 2,
-        backgroundColor: theme.success,
-        borderWidth: 2,
-        borderColor: theme.white,
-    }));
-
-    const topRightCornerStyle = useAnimatedStyle(() => ({
-        ...styles.pAbsolute,
-        left: cropX.get() + cropWidth.get() - variables.cornerHandleSize / 2,
-        top: cropY.get() - variables.cornerHandleSize / 2,
-        width: variables.cornerHandleSize,
-        height: variables.cornerHandleSize,
-        borderRadius: variables.cornerHandleSize / 2,
-        backgroundColor: theme.success,
-        borderWidth: 2,
-        borderColor: theme.white,
-    }));
-
-    const bottomLeftCornerStyle = useAnimatedStyle(() => ({
-        ...styles.pAbsolute,
-        left: cropX.get() - variables.cornerHandleSize / 2,
-        top: cropY.get() + cropHeight.get() - variables.cornerHandleSize / 2,
-        width: variables.cornerHandleSize,
-        height: variables.cornerHandleSize,
-        borderRadius: variables.cornerHandleSize / 2,
-        backgroundColor: theme.success,
-        borderWidth: 2,
-        borderColor: theme.white,
-    }));
-
-    const bottomRightCornerStyle = useAnimatedStyle(() => ({
-        ...styles.pAbsolute,
-        left: cropX.get() + cropWidth.get() - variables.cornerHandleSize / 2,
-        top: cropY.get() + cropHeight.get() - variables.cornerHandleSize / 2,
-        width: variables.cornerHandleSize,
-        height: variables.cornerHandleSize,
-        borderRadius: variables.cornerHandleSize / 2,
-        backgroundColor: theme.success,
-        borderWidth: 2,
-        borderColor: theme.white,
-    }));
+    const bottomLeftCornerVisualStyle = useAnimatedStyle(() => {
+        'worklet';
+
+        return StyleUtils.getCropViewStyles().cornerVisual;
+    });
+
+    const bottomRightCornerStyle = useAnimatedStyle(() => {
+        'worklet';
+
+        return StyleUtils.getCropViewStyles({
+            cropX: cropX.get(),
+            cropY: cropY.get(),
+            cropWidth: cropWidth.get(),
+            cropHeight: cropHeight.get(),
+        }).cornerBottomRight;
+    });
+
+    const bottomRightCornerVisualStyle = useAnimatedStyle(() => {
+        'worklet';
+
+        return StyleUtils.getCropViewStyles().cornerVisual;
+    });
+
+    // Edge handle styles - thicker tap target while keeping visual size
+    const topEdgeStyle = useAnimatedStyle(() => {
+        'worklet';
+
+        return StyleUtils.getCropViewStyles({
+            cropX: cropX.get(),
+            cropY: cropY.get(),
+            cropWidth: cropWidth.get(),
+            cropHeight: cropHeight.get(),
+        }).edgeTop;
+    });
+
+    const bottomEdgeStyle = useAnimatedStyle(() => {
+        'worklet';
+
+        return StyleUtils.getCropViewStyles({
+            cropX: cropX.get(),
+            cropY: cropY.get(),
+            cropWidth: cropWidth.get(),
+            cropHeight: cropHeight.get(),
+        }).edgeBottom;
+    });
+
+    const leftEdgeStyle = useAnimatedStyle(() => {
+        'worklet';
+
+        return StyleUtils.getCropViewStyles({
+            cropX: cropX.get(),
+            cropY: cropY.get(),
+            cropWidth: cropWidth.get(),
+            cropHeight: cropHeight.get(),
+        }).edgeLeft;
+    });
+
+    const rightEdgeStyle = useAnimatedStyle(() => {
+        'worklet';
+
+        return StyleUtils.getCropViewStyles({
+            cropX: cropX.get(),
+            cropY: cropY.get(),
+            cropWidth: cropWidth.get(),
+            cropHeight: cropHeight.get(),
+        }).edgeRight;
+    });
 
     const overlayTopStyle = useAnimatedStyle(() => {
         'worklet';
@@ -320,14 +560,12 @@ function ReceiptCropView({imageUri, onCropChange, initialCrop, isAuthTokenRequir
         const imgDisplayWidth = displayWidthSV.get();
         const cropTop = cropY.get();
 
-        return {
-            ...styles.pAbsolute,
-            left: imageLeft,
-            top: imageTop,
-            width: imgDisplayWidth,
-            height: Math.max(0, cropTop - imageTop),
-            backgroundColor: theme.transparentWhite,
-        };
+        return StyleUtils.getCropViewStyles({
+            imageLeft,
+            imageTop,
+            imgDisplayWidth,
+            cropTop,
+        }).overlayTop;
     });
 
     const overlayBottomStyle = useAnimatedStyle(() => {
@@ -340,14 +578,13 @@ function ReceiptCropView({imageUri, onCropChange, initialCrop, isAuthTokenRequir
         const cropBottom = cropY.get() + cropHeight.get();
         const imageBottom = imageTop + imgDisplayHeight;
 
-        return {
-            ...styles.pAbsolute,
-            left: imageLeft,
-            top: cropBottom,
-            width: imgDisplayWidth,
-            height: Math.max(0, imageBottom - cropBottom),
-            backgroundColor: theme.transparentWhite,
-        };
+        return StyleUtils.getCropViewStyles({
+            imageLeft,
+            imageTop,
+            imgDisplayWidth,
+            cropBottom,
+            imageBottom,
+        }).overlayBottom;
     });
 
     const overlayLeftStyle = useAnimatedStyle(() => {
@@ -358,14 +595,12 @@ function ReceiptCropView({imageUri, onCropChange, initialCrop, isAuthTokenRequir
         const cropTop = cropY.get();
         const cropHeightValue = cropHeight.get();
 
-        return {
-            ...styles.pAbsolute,
-            left: imageLeft,
-            top: cropTop,
-            width: Math.max(0, cropLeft - imageLeft),
-            height: cropHeightValue,
-            backgroundColor: theme.transparentWhite,
-        };
+        return StyleUtils.getCropViewStyles({
+            imageLeft,
+            cropLeft,
+            cropTop,
+            cropHeight: cropHeightValue,
+        }).overlayLeft;
     });
 
     const overlayRightStyle = useAnimatedStyle(() => {
@@ -378,18 +613,18 @@ function ReceiptCropView({imageUri, onCropChange, initialCrop, isAuthTokenRequir
         const cropTop = cropY.get();
         const cropHeightValue = cropHeight.get();
 
-        return {
-            ...styles.pAbsolute,
-            left: cropRight,
-            top: cropTop,
-            width: Math.max(0, imageRight - cropRight),
-            height: cropHeightValue,
-            backgroundColor: theme.transparentWhite,
-        };
+        return StyleUtils.getCropViewStyles({
+            imageLeft,
+            imgDisplayWidth,
+            cropRight,
+            imageRight,
+            cropTop,
+            cropHeight: cropHeightValue,
+        }).overlayRight;
     });
 
     return (
-        <GestureHandlerRootView style={[styles.flex1, styles.w100, styles.mv3]}>
+        <GestureHandlerRootView style={[styles.flex1, styles.w100]}>
             <Animated.View
                 style={[styles.flex1, styles.alignItemsCenter, styles.justifyContentCenter, styles.w100]}
                 onLayout={onContainerLayout}
@@ -429,17 +664,40 @@ function ReceiptCropView({imageUri, onCropChange, initialCrop, isAuthTokenRequir
                             pointerEvents="none"
                         />
 
+                        {/* Edge handles */}
+                        <GestureDetector gesture={createEdgeGesture('top')}>
+                            <Animated.View style={topEdgeStyle} />
+                        </GestureDetector>
+                        <GestureDetector gesture={createEdgeGesture('bottom')}>
+                            <Animated.View style={bottomEdgeStyle} />
+                        </GestureDetector>
+                        <GestureDetector gesture={createEdgeGesture('left')}>
+                            <Animated.View style={leftEdgeStyle} />
+                        </GestureDetector>
+                        <GestureDetector gesture={createEdgeGesture('right')}>
+                            <Animated.View style={rightEdgeStyle} />
+                        </GestureDetector>
+
+                        {/* Corner handles */}
                         <GestureDetector gesture={createCornerGesture('topLeft')}>
-                            <Animated.View style={topLeftCornerStyle} />
+                            <Animated.View style={topLeftCornerStyle}>
+                                <Animated.View style={topLeftCornerVisualStyle} />
+                            </Animated.View>
                         </GestureDetector>
                         <GestureDetector gesture={createCornerGesture('topRight')}>
-                            <Animated.View style={topRightCornerStyle} />
+                            <Animated.View style={topRightCornerStyle}>
+                                <Animated.View style={topRightCornerVisualStyle} />
+                            </Animated.View>
                         </GestureDetector>
                         <GestureDetector gesture={createCornerGesture('bottomLeft')}>
-                            <Animated.View style={bottomLeftCornerStyle} />
+                            <Animated.View style={bottomLeftCornerStyle}>
+                                <Animated.View style={bottomLeftCornerVisualStyle} />
+                            </Animated.View>
                         </GestureDetector>
                         <GestureDetector gesture={createCornerGesture('bottomRight')}>
-                            <Animated.View style={bottomRightCornerStyle} />
+                            <Animated.View style={bottomRightCornerStyle}>
+                                <Animated.View style={bottomRightCornerVisualStyle} />
+                            </Animated.View>
                         </GestureDetector>
                     </>
                 )}
diff --git a/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx b/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx
index 42b79c2fb6cd..2eb3272295b4 100644
--- a/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx
+++ b/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx
@@ -541,7 +541,7 @@ function TransactionReceiptModalContent({navigation, route}: AttachmentModalScre
             shouldMinimizeMenuButton: false,
             footerActionButtons,
             customAttachmentContent,
-            attachmentViewContainerStyles: [styles.mv3, styles.ph2],
+            attachmentViewContainerStyles: [styles.pv5, styles.ph2],
         }),
         [
             source,
@@ -558,7 +558,7 @@ function TransactionReceiptModalContent({navigation, route}: AttachmentModalScre
             onDownloadAttachment,
             footerActionButtons,
             customAttachmentContent,
-            styles.mv3,
+            styles.pv5,
             styles.ph2,
         ],
     );
diff --git a/src/styles/utils/cursor/index.native.ts b/src/styles/utils/cursor/index.native.ts
index 74b9b72bd1d0..b911f4dac6a6 100644
--- a/src/styles/utils/cursor/index.native.ts
+++ b/src/styles/utils/cursor/index.native.ts
@@ -12,6 +12,14 @@ const cursor: CursorStyles = {
     cursorZoomOut: {},
     cursorInitial: {},
     cursorText: {},
+    cursorNwResize: {},
+    cursorNeResize: {},
+    cursorSwResize: {},
+    cursorSeResize: {},
+    cursorNResize: {},
+    cursorSResize: {},
+    cursorEResize: {},
+    cursorWResize: {},
 };
 
 export default cursor;
diff --git a/src/styles/utils/cursor/index.ts b/src/styles/utils/cursor/index.ts
index 514571522faa..76138b3016f1 100644
--- a/src/styles/utils/cursor/index.ts
+++ b/src/styles/utils/cursor/index.ts
@@ -39,6 +39,30 @@ const cursor: CursorStyles = {
     cursorText: {
         cursor: 'text' as ViewStyle['cursor'],
     },
+    cursorNwResize: {
+        cursor: 'nw-resize' as ViewStyle['cursor'],
+    },
+    cursorNeResize: {
+        cursor: 'ne-resize' as ViewStyle['cursor'],
+    },
+    cursorSwResize: {
+        cursor: 'sw-resize' as ViewStyle['cursor'],
+    },
+    cursorSeResize: {
+        cursor: 'se-resize' as ViewStyle['cursor'],
+    },
+    cursorNResize: {
+        cursor: 'n-resize' as ViewStyle['cursor'],
+    },
+    cursorSResize: {
+        cursor: 's-resize' as ViewStyle['cursor'],
+    },
+    cursorEResize: {
+        cursor: 'e-resize' as ViewStyle['cursor'],
+    },
+    cursorWResize: {
+        cursor: 'w-resize' as ViewStyle['cursor'],
+    },
 };
 
 export default cursor;
diff --git a/src/styles/utils/cursor/types.ts b/src/styles/utils/cursor/types.ts
index 7ffac48612fb..a12836295e5b 100644
--- a/src/styles/utils/cursor/types.ts
+++ b/src/styles/utils/cursor/types.ts
@@ -11,7 +11,15 @@ type CursorStylesKeys =
     | 'cursorGrabbing'
     | 'cursorZoomOut'
     | 'cursorInitial'
-    | 'cursorText';
+    | 'cursorText'
+    | 'cursorNwResize'
+    | 'cursorNeResize'
+    | 'cursorSwResize'
+    | 'cursorSeResize'
+    | 'cursorNResize'
+    | 'cursorSResize'
+    | 'cursorEResize'
+    | 'cursorWResize';
 
 type CursorStyles = Record<CursorStylesKeys, Pick<ViewStyle, 'cursor'>>;
 
diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts
index 86b75b473aa6..ccab1c11533c 100644
--- a/src/styles/utils/index.ts
+++ b/src/styles/utils/index.ts
@@ -1966,6 +1966,159 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({
             containerStyle: {paddingBottom},
         };
     },
+
+    /**
+     * Returns all necessary styles for crop view components
+     * @param params - Object containing dynamic crop values (cropX, cropY, cropWidth, cropHeight, etc.)
+     */
+    getCropViewStyles: (params?: {
+        cropX?: number;
+        cropY?: number;
+        cropWidth?: number;
+        cropHeight?: number;
+        imageLeft?: number;
+        imageTop?: number;
+        imgDisplayWidth?: number;
+        cropLeft?: number;
+        cropRight?: number;
+        cropTop?: number;
+        cropBottom?: number;
+        imageRight?: number;
+        imageBottom?: number;
+    }) => {
+        const {
+            cropX = 0,
+            cropY = 0,
+            cropWidth = 0,
+            cropHeight = 0,
+            imageLeft = 0,
+            imageTop = 0,
+            imgDisplayWidth = 0,
+            cropLeft = 0,
+            cropRight = 0,
+            cropTop = 0,
+            cropBottom = 0,
+            imageRight = 0,
+            imageBottom = 0,
+        } = params ?? {};
+
+        return {
+            cornerVisual: {
+                position: 'absolute' as const,
+                left: (variables.cornerTapTargetSize - variables.cornerHandleSize) / 2,
+                top: (variables.cornerTapTargetSize - variables.cornerHandleSize) / 2,
+                width: variables.cornerHandleSize,
+                height: variables.cornerHandleSize,
+                borderRadius: variables.cornerHandleSize / 2,
+                backgroundColor: theme.success,
+            },
+            border: {
+                ...styles.pAbsolute,
+                left: cropX,
+                top: cropY,
+                width: cropWidth,
+                height: cropHeight,
+                borderWidth: variables.cropBorderWidth,
+                borderColor: theme.success,
+            },
+            cornerTopLeft: {
+                ...styles.pAbsolute,
+                left: cropX - variables.cornerTapTargetSize / 2,
+                top: cropY - variables.cornerTapTargetSize / 2,
+                width: variables.cornerTapTargetSize,
+                height: variables.cornerTapTargetSize,
+                ...styles.cursorNwResize,
+            },
+            cornerTopRight: {
+                ...styles.pAbsolute,
+                left: cropX + cropWidth - variables.cornerTapTargetSize / 2,
+                top: cropY - variables.cornerTapTargetSize / 2,
+                width: variables.cornerTapTargetSize,
+                height: variables.cornerTapTargetSize,
+                ...styles.cursorNeResize,
+            },
+            cornerBottomLeft: {
+                ...styles.pAbsolute,
+                left: cropX - variables.cornerTapTargetSize / 2,
+                top: cropY + cropHeight - variables.cornerTapTargetSize / 2,
+                width: variables.cornerTapTargetSize,
+                height: variables.cornerTapTargetSize,
+                ...styles.cursorSwResize,
+            },
+            cornerBottomRight: {
+                ...styles.pAbsolute,
+                left: cropX + cropWidth - variables.cornerTapTargetSize / 2,
+                top: cropY + cropHeight - variables.cornerTapTargetSize / 2,
+                width: variables.cornerTapTargetSize,
+                height: variables.cornerTapTargetSize,
+                ...styles.cursorSeResize,
+            },
+            edgeTop: {
+                ...styles.pAbsolute,
+                left: cropX,
+                top: cropY - variables.edgeHandleTapTargetThickness / 2,
+                width: cropWidth,
+                height: variables.edgeHandleTapTargetThickness,
+                ...styles.cursorNResize,
+            },
+            edgeBottom: {
+                ...styles.pAbsolute,
+                left: cropX,
+                top: cropY + cropHeight - variables.edgeHandleTapTargetThickness / 2,
+                width: cropWidth,
+                height: variables.edgeHandleTapTargetThickness,
+                ...styles.cursorSResize,
+            },
+            edgeLeft: {
+                ...styles.pAbsolute,
+                left: cropX - variables.edgeHandleTapTargetThickness / 2,
+                top: cropY,
+                width: variables.edgeHandleTapTargetThickness,
+                height: cropHeight,
+                ...styles.cursorWResize,
+            },
+            edgeRight: {
+                ...styles.pAbsolute,
+                left: cropX + cropWidth - variables.edgeHandleTapTargetThickness / 2,
+                top: cropY,
+                width: variables.edgeHandleTapTargetThickness,
+                height: cropHeight,
+                ...styles.cursorEResize,
+            },
+            overlayTop: {
+                ...styles.pAbsolute,
+                left: imageLeft,
+                top: imageTop,
+                width: imgDisplayWidth,
+                height: Math.max(0, cropTop - imageTop),
+                backgroundColor: theme.transparentWhite,
+            },
+            overlayBottom: {
+                ...styles.pAbsolute,
+                left: imageLeft,
+                top: cropBottom,
+                width: imgDisplayWidth,
+                height: Math.max(0, imageBottom - cropBottom),
+                backgroundColor: theme.transparentWhite,
+            },
+            overlayLeft: {
+                ...styles.pAbsolute,
+                left: imageLeft,
+                top: cropTop,
+                width: Math.max(0, cropLeft - imageLeft),
+                height: cropHeight,
+                backgroundColor: theme.transparentWhite,
+            },
+            overlayRight: {
+                ...styles.pAbsolute,
+                left: cropRight,
+                top: cropTop,
+                width: Math.max(0, imageRight - cropRight),
+                height: cropHeight,
+                backgroundColor: theme.transparentWhite,
+            },
+        };
+    },
 });
 
 type StyleUtilsType = ReturnType<typeof createStyleUtils>;
diff --git a/src/styles/variables.ts b/src/styles/variables.ts
index 60450e1afa1d..55aa56787b74 100644
--- a/src/styles/variables.ts
+++ b/src/styles/variables.ts
@@ -145,9 +145,11 @@ export default {
     checkboxLabelHoverOpacity: 1,
     avatarChatSpacing: 12,
     cornerHandleSize: 12,
+    cornerTapTargetSize: 40,
+    edgeHandleTapTargetThickness: 12,
     chatInputSpacing: 52, // 40 + avatarChatSpacing
     borderTopWidth: 1,
-    cropBorderWidth: 2,
+    cropBorderWidth: 1,
     emptyLHNIconWidth: 24, // iconSizeSmall + 4*2 horizontal margin
     emptyLHNIconHeight: 16,
     emptySelectionListIconWidth: 120,

From 2a1140d10ce59614b3925aaf01aa3354b456ed52 Mon Sep 17 00:00:00 2001
From: nkdengineer <nkdengineer@outlook.com>
Date: Thu, 22 Jan 2026 22:32:50 +0700
Subject: [PATCH 09/39] rename variable

---
 .../routes/TransactionReceiptModalContent.tsx | 22 +++++--------------
 1 file changed, 5 insertions(+), 17 deletions(-)

diff --git a/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx b/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx
index 2eb3272295b4..a0305f75e403 100644
--- a/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx
+++ b/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx
@@ -239,18 +239,7 @@ function TransactionReceiptModalContent({navigation, route}: AttachmentModalScre
             });
     }, [transaction?.transactionID, isDraftTransaction, sourceUri, isImage, receiptFilename, policyCategories, transaction?.receipt?.type, policy]);
 
-    const shouldShowRotateReceiptButton = useMemo(
-        () =>
-            shouldShowReplaceReceiptButton &&
-            transaction &&
-            hasReceiptSource(transaction) &&
-            !isEReceipt &&
-            !transaction?.receipt?.isTestDriveReceipt &&
-            (receiptFilename ? Str.isImage(receiptFilename) : false),
-        [shouldShowReplaceReceiptButton, transaction, isEReceipt, receiptFilename],
-    );
-
-    const shouldShowCropReceiptButton = useMemo(
+    const shouldShowRotateAndCropReceiptButton = useMemo(
         () =>
             shouldShowReplaceReceiptButton &&
             transaction &&
@@ -443,13 +432,13 @@ function TransactionReceiptModalContent({navigation, route}: AttachmentModalScre
             );
         }
 
-        if (!shouldShowRotateReceiptButton && !shouldShowCropReceiptButton && !shouldShowReplaceReceiptButton) {
+        if (!shouldShowRotateAndCropReceiptButton && !shouldShowReplaceReceiptButton) {
             return null;
         }
 
         return (
             <View style={[styles.flexRow, styles.gap4, styles.ph5, styles.pb5, styles.justifyContentCenter]}>
-                {!!shouldShowRotateReceiptButton && (
+                {!!shouldShowRotateAndCropReceiptButton && (
                     <Button
                         icon={Expensicons.Rotate}
                         onPress={rotateReceipt}
@@ -458,7 +447,7 @@ function TransactionReceiptModalContent({navigation, route}: AttachmentModalScre
                         isDisabled={isRotating}
                     />
                 )}
-                {!!shouldShowCropReceiptButton && (
+                {!!shouldShowRotateAndCropReceiptButton && (
                     <Button
                         icon={Expensicons.Crop}
                         onPress={enterCropMode}
@@ -494,8 +483,7 @@ function TransactionReceiptModalContent({navigation, route}: AttachmentModalScre
         cropRect,
         isCropSaving,
         translate,
-        shouldShowRotateReceiptButton,
-        shouldShowCropReceiptButton,
+        shouldShowRotateAndCropReceiptButton,
         shouldShowReplaceReceiptButton,
         rotateReceipt,
         isRotating,

From 32d1c853f860b7bd3904200634d68637048a2662 Mon Sep 17 00:00:00 2001
From: nkdengineer <nkdengineer@outlook.com>
Date: Thu, 22 Jan 2026 22:42:41 +0700
Subject: [PATCH 10/39] prevent icon from showing while the button is loading

---
 src/components/Button/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index 70d239973d2a..2272cddd1498 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -359,7 +359,7 @@ function Button({
             return (
                 <View style={[isContentCentered ? styles.justifyContentCenter : styles.justifyContentBetween, styles.flexRow, iconWrapperStyles, styles.mw100]}>
                     <View style={[styles.alignItemsCenter, styles.flexRow, styles.flexShrink1]}>
-                        {!!icon && (
+                        {!!icon && !isLoading && (
                             <View style={[extraSmall ? styles.mr1 : styles.mr2, !text && styles.mr0, iconStyles]}>
                                 <Icon
                                     src={icon}

From f64e9e58c226be5bfd4c4fdbc73eaecce7dc3c75 Mon Sep 17 00:00:00 2001
From: nkdengineer <nkdengineer@outlook.com>
Date: Sun, 25 Jan 2026 21:31:10 +0700
Subject: [PATCH 11/39] update button width to 100px

---
 .../routes/TransactionReceiptModalContent.tsx                | 5 +++++
 src/styles/index.ts                                          | 3 +++
 src/styles/variables.ts                                      | 1 +
 3 files changed, 9 insertions(+)

diff --git a/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx b/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx
index a0305f75e403..6c4932fab805 100644
--- a/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx
+++ b/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx
@@ -419,6 +419,7 @@ function TransactionReceiptModalContent({navigation, route}: AttachmentModalScre
                         onPress={exitCropMode}
                         text={translate('common.cancel')}
                         icon={Expensicons.Close}
+                        style={styles.transactionReceiptButton}
                     />
                     <Button
                         success
@@ -427,6 +428,7 @@ function TransactionReceiptModalContent({navigation, route}: AttachmentModalScre
                         isLoading={isCropSaving}
                         isDisabled={!cropRect || isCropSaving}
                         icon={Expensicons.Checkmark}
+                        style={styles.transactionReceiptButton}
                     />
                 </View>
             );
@@ -445,6 +447,7 @@ function TransactionReceiptModalContent({navigation, route}: AttachmentModalScre
                         text={translate('common.rotate')}
                         isLoading={isRotating}
                         isDisabled={isRotating}
+                        style={styles.transactionReceiptButton}
                     />
                 )}
                 {!!shouldShowRotateAndCropReceiptButton && (
@@ -452,6 +455,7 @@ function TransactionReceiptModalContent({navigation, route}: AttachmentModalScre
                         icon={Expensicons.Crop}
                         onPress={enterCropMode}
                         text={translate('receipt.crop')}
+                        style={styles.transactionReceiptButton}
                     />
                 )}
                 {!!shouldShowReplaceReceiptButton && (
@@ -472,6 +476,7 @@ function TransactionReceiptModalContent({navigation, route}: AttachmentModalScre
                             });
                         }}
                         text={translate('common.replace')}
+                        style={styles.transactionReceiptButton}
                     />
                 )}
             </View>
diff --git a/src/styles/index.ts b/src/styles/index.ts
index e94d9a270788..e323b13fbb75 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -5659,6 +5659,9 @@ const staticStyles = (theme: ThemeColors) =>
         paymentMethodErrorRow: {
             paddingHorizontal: variables.iconSizeMenuItem + variables.iconSizeNormal / 2,
         },
+        transactionReceiptButton:{
+            width: variables.transactionReceiptButtonWidth,
+        },
     }) satisfies StaticStyles;
 
 const dynamicStyles = (theme: ThemeColors) =>
diff --git a/src/styles/variables.ts b/src/styles/variables.ts
index 55aa56787b74..035db6effbf6 100644
--- a/src/styles/variables.ts
+++ b/src/styles/variables.ts
@@ -245,6 +245,7 @@ export default {
     changePolicyEducationModalWidth: 400,
     changePolicyEducationModalIconWidth: 147.69,
     changePolicyEducationModalIconHeight: 180,
+    transactionReceiptButtonWidth: 100,
 
     fontSizeToWidthRatio: getValueUsingPixelRatio(0.8, 1),
 

From 4c54440fe2d023a60e1b9e6710f2577e5465e668 Mon Sep 17 00:00:00 2001
From: nkdengineer <nkdengineer@outlook.com>
Date: Sun, 25 Jan 2026 21:35:28 +0700
Subject: [PATCH 12/39] run lint

---
 src/styles/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/index.ts b/src/styles/index.ts
index e323b13fbb75..2f4e667da1b1 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -5659,7 +5659,7 @@ const staticStyles = (theme: ThemeColors) =>
         paymentMethodErrorRow: {
             paddingHorizontal: variables.iconSizeMenuItem + variables.iconSizeNormal / 2,
         },
-        transactionReceiptButton:{
+        transactionReceiptButton: {
             width: variables.transactionReceiptButtonWidth,
         },
     }) satisfies StaticStyles;

From 82747cc8f8f110c9802c34be2ecb4890d2a202c2 Mon Sep 17 00:00:00 2001
From: nkdengineer <nkdengineer@outlook.com>
Date: Mon, 26 Jan 2026 13:14:11 +0700
Subject: [PATCH 13/39] update function to worklet

---
 src/styles/utils/index.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts
index ccab1c11533c..89e540d80ef5 100644
--- a/src/styles/utils/index.ts
+++ b/src/styles/utils/index.ts
@@ -1986,6 +1986,8 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({
         imageRight?: number;
         imageBottom?: number;
     }) => {
+        'worklet';
+
         const {
             cropX = 0,
             cropY = 0,

From 870e30c66ce2d1f0589c402c0f4e594544906e08 Mon Sep 17 00:00:00 2001
From: nkdengineer <nkdengineer@outlook.com>
Date: Mon, 26 Jan 2026 13:26:48 +0700
Subject: [PATCH 14/39] update bidirectional resize cursor

---
 src/styles/utils/cursor/index.native.ts | 12 ++++-------
 src/styles/utils/cursor/index.ts        | 28 +++++++------------------
 src/styles/utils/cursor/types.ts        | 12 ++++-------
 src/styles/utils/index.ts               | 16 +++++++-------
 4 files changed, 24 insertions(+), 44 deletions(-)

diff --git a/src/styles/utils/cursor/index.native.ts b/src/styles/utils/cursor/index.native.ts
index b911f4dac6a6..a12cf4ecf0f9 100644
--- a/src/styles/utils/cursor/index.native.ts
+++ b/src/styles/utils/cursor/index.native.ts
@@ -12,14 +12,10 @@ const cursor: CursorStyles = {
     cursorZoomOut: {},
     cursorInitial: {},
     cursorText: {},
-    cursorNwResize: {},
-    cursorNeResize: {},
-    cursorSwResize: {},
-    cursorSeResize: {},
-    cursorNResize: {},
-    cursorSResize: {},
-    cursorEResize: {},
-    cursorWResize: {},
+    cursorEwResize: {},
+    cursorNsResize: {},
+    cursorNeswResize: {},
+    cursorNwseResize: {},
 };
 
 export default cursor;
diff --git a/src/styles/utils/cursor/index.ts b/src/styles/utils/cursor/index.ts
index 76138b3016f1..ad8abc23cdff 100644
--- a/src/styles/utils/cursor/index.ts
+++ b/src/styles/utils/cursor/index.ts
@@ -39,29 +39,17 @@ const cursor: CursorStyles = {
     cursorText: {
         cursor: 'text' as ViewStyle['cursor'],
     },
-    cursorNwResize: {
-        cursor: 'nw-resize' as ViewStyle['cursor'],
+    cursorEwResize: {
+        cursor: 'ew-resize' as ViewStyle['cursor'],
     },
-    cursorNeResize: {
-        cursor: 'ne-resize' as ViewStyle['cursor'],
+    cursorNsResize: {
+        cursor: 'ns-resize' as ViewStyle['cursor'],
     },
-    cursorSwResize: {
-        cursor: 'sw-resize' as ViewStyle['cursor'],
+    cursorNeswResize: {
+        cursor: 'nesw-resize' as ViewStyle['cursor'],
     },
-    cursorSeResize: {
-        cursor: 'se-resize' as ViewStyle['cursor'],
-    },
-    cursorNResize: {
-        cursor: 'n-resize' as ViewStyle['cursor'],
-    },
-    cursorSResize: {
-        cursor: 's-resize' as ViewStyle['cursor'],
-    },
-    cursorEResize: {
-        cursor: 'e-resize' as ViewStyle['cursor'],
-    },
-    cursorWResize: {
-        cursor: 'w-resize' as ViewStyle['cursor'],
+    cursorNwseResize: {
+        cursor: 'nwse-resize' as ViewStyle['cursor'],
     },
 };
 
diff --git a/src/styles/utils/cursor/types.ts b/src/styles/utils/cursor/types.ts
index a12836295e5b..cc990268ceed 100644
--- a/src/styles/utils/cursor/types.ts
+++ b/src/styles/utils/cursor/types.ts
@@ -12,14 +12,10 @@ type CursorStylesKeys =
     | 'cursorZoomOut'
     | 'cursorInitial'
     | 'cursorText'
-    | 'cursorNwResize'
-    | 'cursorNeResize'
-    | 'cursorSwResize'
-    | 'cursorSeResize'
-    | 'cursorNResize'
-    | 'cursorSResize'
-    | 'cursorEResize'
-    | 'cursorWResize';
+    | 'cursorEwResize'
+    | 'cursorNsResize'
+    | 'cursorNeswResize'
+    | 'cursorNwseResize';
 
 type CursorStyles = Record<CursorStylesKeys, Pick<ViewStyle, 'cursor'>>;
 
diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts
index 89e540d80ef5..438e4bbe5484 100644
--- a/src/styles/utils/index.ts
+++ b/src/styles/utils/index.ts
@@ -2029,7 +2029,7 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({
                 top: cropY - variables.cornerTapTargetSize / 2,
                 width: variables.cornerTapTargetSize,
                 height: variables.cornerTapTargetSize,
-                ...styles.cursorNwResize,
+                ...styles.cursorNwseResize,
             },
             cornerTopRight: {
                 ...styles.pAbsolute,
@@ -2037,7 +2037,7 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({
                 top: cropY - variables.cornerTapTargetSize / 2,
                 width: variables.cornerTapTargetSize,
                 height: variables.cornerTapTargetSize,
-                ...styles.cursorNeResize,
+                ...styles.cursorNeswResize,
             },
             cornerBottomLeft: {
                 ...styles.pAbsolute,
@@ -2045,7 +2045,7 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({
                 top: cropY + cropHeight - variables.cornerTapTargetSize / 2,
                 width: variables.cornerTapTargetSize,
                 height: variables.cornerTapTargetSize,
-                ...styles.cursorSwResize,
+                ...styles.cursorNeswResize,
             },
             cornerBottomRight: {
                 ...styles.pAbsolute,
@@ -2053,7 +2053,7 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({
                 top: cropY + cropHeight - variables.cornerTapTargetSize / 2,
                 width: variables.cornerTapTargetSize,
                 height: variables.cornerTapTargetSize,
-                ...styles.cursorSeResize,
+                ...styles.cursorNwseResize,
             },
             edgeTop: {
                 ...styles.pAbsolute,
@@ -2061,7 +2061,7 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({
                 top: cropY - variables.edgeHandleTapTargetThickness / 2,
                 width: cropWidth,
                 height: variables.edgeHandleTapTargetThickness,
-                ...styles.cursorNResize,
+                ...styles.cursorNsResize,
             },
             edgeBottom: {
                 ...styles.pAbsolute,
@@ -2069,7 +2069,7 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({
                 top: cropY + cropHeight - variables.edgeHandleTapTargetThickness / 2,
                 width: cropWidth,
                 height: variables.edgeHandleTapTargetThickness,
-                ...styles.cursorSResize,
+                ...styles.cursorNsResize,
             },
             edgeLeft: {
                 ...styles.pAbsolute,
@@ -2077,7 +2077,7 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({
                 top: cropY,
                 width: variables.edgeHandleTapTargetThickness,
                 height: cropHeight,
-                ...styles.cursorWResize,
+                ...styles.cursorEwResize,
             },
             edgeRight: {
                 ...styles.pAbsolute,
@@ -2085,7 +2085,7 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({
                 top: cropY,
                 width: variables.edgeHandleTapTargetThickness,
                 height: cropHeight,
-                ...styles.cursorEResize,
+                ...styles.cursorEwResize,
             },
             overlayTop: {
                 ...styles.pAbsolute,

From c5dba61ecd6418676c52fcbc00f67442c0b0dd56 Mon Sep 17 00:00:00 2001
From: nkdengineer <nkdengineer@outlook.com>
Date: Mon, 26 Jan 2026 15:51:17 +0700
Subject: [PATCH 15/39] fix specll check

---
 cspell.json | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/cspell.json b/cspell.json
index 5cc365f37ff1..b62515ca5ac2 100644
--- a/cspell.json
+++ b/cspell.json
@@ -815,7 +815,9 @@
         "RNCORE",
         "Wooo",
         "Splittable",
-        "pgrep"
+        "pgrep",
+        "Nesw",
+        "nesw"
     ],
     "ignorePaths": [
         "src/languages/de.ts",

From c1c247e3887ebe079d44c470240cfd1e97a7a749 Mon Sep 17 00:00:00 2001
From: nkdengineer <161821005+nkdengineer@users.noreply.github.com>
Date: Tue, 27 Jan 2026 01:01:36 +0700
Subject: [PATCH 16/39] Update src/components/ReceiptCropView/index.tsx

Co-authored-by: dukenv0307 <129500732+dukenv0307@users.noreply.github.com>
---
 src/components/ReceiptCropView/index.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/ReceiptCropView/index.tsx b/src/components/ReceiptCropView/index.tsx
index e50bad908eff..33fa76654d31 100644
--- a/src/components/ReceiptCropView/index.tsx
+++ b/src/components/ReceiptCropView/index.tsx
@@ -238,11 +238,13 @@ function ReceiptCropView({imageUri, onCropChange, initialCrop, isAuthTokenRequir
     const onImageLoad = useCallback(
         (event: {nativeEvent: {width: number; height: number}}) => {
             const {width, height} = event.nativeEvent;
-            // Image component provides dimensions after load - use these as primary source
-            if (width && height && (!hasImageDimensions || imageSize.width !== width || imageSize.height !== height)) {
-                setImageSize({width, height});
+            if(!width || !height || (imageSize.width === width && imageSize.height === height)){
+                return;
+            }
+            if(!hasImageDimensions){
                 setHasImageDimensions(true);
             }
+            setImageSize({width, height});
         },
         [hasImageDimensions, imageSize.width, imageSize.height],
     );

From 9a783d83bc61683b1f300e09bc8ae2517677bdf6 Mon Sep 17 00:00:00 2001
From: nkdengineer <nkdengineer@outlook.com>
Date: Tue, 27 Jan 2026 01:04:02 +0700
Subject: [PATCH 17/39] use opacity style to hide left icon

---
 src/components/Button/index.tsx          | 4 ++--
 src/components/ReceiptCropView/index.tsx | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index 2272cddd1498..89fa7f739f18 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -359,8 +359,8 @@ function Button({
             return (
                 <View style={[isContentCentered ? styles.justifyContentCenter : styles.justifyContentBetween, styles.flexRow, iconWrapperStyles, styles.mw100]}>
                     <View style={[styles.alignItemsCenter, styles.flexRow, styles.flexShrink1]}>
-                        {!!icon && !isLoading && (
-                            <View style={[extraSmall ? styles.mr1 : styles.mr2, !text && styles.mr0, iconStyles]}>
+                        {!!icon && (
+                            <View style={[extraSmall ? styles.mr1 : styles.mr2, !text && styles.mr0, iconStyles, isLoading && styles.opacity0]}>
                                 <Icon
                                     src={icon}
                                     fill={isHovered ? (iconHoverFill ?? defaultFill) : (iconFill ?? defaultFill)}
diff --git a/src/components/ReceiptCropView/index.tsx b/src/components/ReceiptCropView/index.tsx
index 33fa76654d31..e313eb146005 100644
--- a/src/components/ReceiptCropView/index.tsx
+++ b/src/components/ReceiptCropView/index.tsx
@@ -238,10 +238,10 @@ function ReceiptCropView({imageUri, onCropChange, initialCrop, isAuthTokenRequir
     const onImageLoad = useCallback(
         (event: {nativeEvent: {width: number; height: number}}) => {
             const {width, height} = event.nativeEvent;
-            if(!width || !height || (imageSize.width === width && imageSize.height === height)){
+            if (!width || !height || (imageSize.width === width && imageSize.height === height)) {
                 return;
             }
-            if(!hasImageDimensions){
+            if (!hasImageDimensions) {
                 setHasImageDimensions(true);
             }
             setImageSize({width, height});

From 28c86cc1ee488fd0ca9bdd830b5f0609c34ec4ff Mon Sep 17 00:00:00 2001
From: nkdengineer <nkdengineer@outlook.com>
Date: Tue, 27 Jan 2026 23:55:40 +0700
Subject: [PATCH 18/39] update button gap

---
 .../routes/TransactionReceiptModalContent.tsx                 | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx b/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx
index 6c4932fab805..45a4689a5e11 100644
--- a/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx
+++ b/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx
@@ -414,7 +414,7 @@ function TransactionReceiptModalContent({navigation, route}: AttachmentModalScre
     const footerActionButtons = useMemo(() => {
         if (isCropping) {
             return (
-                <View style={[styles.flexRow, styles.gap4, styles.ph5, styles.pb5, styles.justifyContentCenter]}>
+                <View style={[styles.flexRow, styles.gap2, styles.ph5, styles.pb5, styles.justifyContentCenter]}>
                     <Button
                         onPress={exitCropMode}
                         text={translate('common.cancel')}
@@ -439,7 +439,7 @@ function TransactionReceiptModalContent({navigation, route}: AttachmentModalScre
         }
 
         return (
-            <View style={[styles.flexRow, styles.gap4, styles.ph5, styles.pb5, styles.justifyContentCenter]}>
+            <View style={[styles.flexRow, styles.gap2, styles.ph5, styles.pb5, styles.justifyContentCenter]}>
                 {!!shouldShowRotateAndCropReceiptButton && (
                     <Button
                         icon={Expensicons.Rotate}

From f32009096b6365e14b90fbe28955d74ac3bc928b Mon Sep 17 00:00:00 2001
From: nkdengineer <nkdengineer@outlook.com>
Date: Wed, 28 Jan 2026 15:28:46 +0700
Subject: [PATCH 19/39] update svg file

---
 assets/images/crop.svg | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/images/crop.svg b/assets/images/crop.svg
index 8531488b111e..43dd4a822ff4 100644
--- a/assets/images/crop.svg
+++ b/assets/images/crop.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" viewBox="0 0 20 20"><defs><clipPath id="clippath"><path d="M0 0h20v20H0z" class="st0"/></clipPath><style>.st0{fill:none}.st1{clip-path:url(#clippath)}</style></defs><g class="st1"><path d="M4.5 0A1.5 1.5 0 0 1 6 1.5V3h11v11h1.5a1.5 1.5 0 0 1 0 3H17v1.5a1.5 1.5 0 0 1-3 0V6H1.5a1.5 1.5 0 0 1 0-3H3V1.5A1.5 1.5 0 0 1 4.5 0"/><path d="M6 14h6v3H3V8h3z"/></g></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><defs><clipPath id="a"><path fill="none" d="M0 0h20v20H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="M4.5 0C5.33 0 6 .67 6 1.5V3h11v11h1.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5H17v1.5c0 .83-.67 1.5-1.5 1.5s-1.5-.67-1.5-1.5V6H1.5C.67 6 0 5.33 0 4.5S.67 3 1.5 3H3V1.5C3 .67 3.67 0 4.5 0"/><path d="M6 14h6v3H3V8h3z"/></g></svg>
\ No newline at end of file

From 7b840afa11b322b4acdcd4f0b89325bb3383a7d0 Mon Sep 17 00:00:00 2001
From: nkdengineer <nkdengineer@outlook.com>
Date: Wed, 28 Jan 2026 17:00:12 +0700
Subject: [PATCH 20/39] add uncompress sv

---
 assets/images/crop.svg | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/assets/images/crop.svg b/assets/images/crop.svg
index 43dd4a822ff4..a8a79950eec0 100644
--- a/assets/images/crop.svg
+++ b/assets/images/crop.svg
@@ -1 +1,15 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><defs><clipPath id="a"><path fill="none" d="M0 0h20v20H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="M4.5 0C5.33 0 6 .67 6 1.5V3h11v11h1.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5H17v1.5c0 .83-.67 1.5-1.5 1.5s-1.5-.67-1.5-1.5V6H1.5C.67 6 0 5.33 0 4.5S.67 3 1.5 3H3V1.5C3 .67 3.67 0 4.5 0"/><path d="M6 14h6v3H3V8h3z"/></g></svg>
\ No newline at end of file
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 20 20">
+  <!-- Generator: Adobe Illustrator 30.1.0, SVG Export Plug-In . SVG Version: 2.1.1 Build 136)  -->
+  <defs>
+    <clipPath id="clippath">
+      <rect width="20" height="20" fill="none"/>
+    </clipPath>
+  </defs>
+  <g clip-path="url(#clippath)">
+    <g>
+      <path d="M4.5,0c.83,0,1.5.67,1.5,1.5v1.5h11v11h1.5c.83,0,1.5.67,1.5,1.5s-.67,1.5-1.5,1.5h-1.5v1.5c0,.83-.67,1.5-1.5,1.5s-1.5-.67-1.5-1.5V6H1.5C.67,6,0,5.33,0,4.5s.67-1.5,1.5-1.5h1.5v-1.5c0-.83.67-1.5,1.5-1.5Z"/>
+      <path d="M6,14h6v3H3v-9h3v6Z"/>
+    </g>
+  </g>
+</svg>
\ No newline at end of file

From f99444807df65e7978696a829f118a9a7f4ace2e Mon Sep 17 00:00:00 2001
From: nkdengineer <nkdengineer@outlook.com>
Date: Wed, 28 Jan 2026 18:29:49 +0700
Subject: [PATCH 21/39] new crop svg

---
 assets/images/crop.svg | 16 +---------------
 1 file changed, 1 insertion(+), 15 deletions(-)

diff --git a/assets/images/crop.svg b/assets/images/crop.svg
index a8a79950eec0..43dd4a822ff4 100644
--- a/assets/images/crop.svg
+++ b/assets/images/crop.svg
@@ -1,15 +1 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 20 20">
-  <!-- Generator: Adobe Illustrator 30.1.0, SVG Export Plug-In . SVG Version: 2.1.1 Build 136)  -->
-  <defs>
-    <clipPath id="clippath">
-      <rect width="20" height="20" fill="none"/>
-    </clipPath>
-  </defs>
-  <g clip-path="url(#clippath)">
-    <g>
-      <path d="M4.5,0c.83,0,1.5.67,1.5,1.5v1.5h11v11h1.5c.83,0,1.5.67,1.5,1.5s-.67,1.5-1.5,1.5h-1.5v1.5c0,.83-.67,1.5-1.5,1.5s-1.5-.67-1.5-1.5V6H1.5C.67,6,0,5.33,0,4.5s.67-1.5,1.5-1.5h1.5v-1.5c0-.83.67-1.5,1.5-1.5Z"/>
-      <path d="M6,14h6v3H3v-9h3v6Z"/>
-    </g>
-  </g>
-</svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><defs><clipPath id="a"><path fill="none" d="M0 0h20v20H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="M4.5 0C5.33 0 6 .67 6 1.5V3h11v11h1.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5H17v1.5c0 .83-.67 1.5-1.5 1.5s-1.5-.67-1.5-1.5V6H1.5C.67 6 0 5.33 0 4.5S.67 3 1.5 3H3V1.5C3 .67 3.67 0 4.5 0"/><path d="M6 14h6v3H3V8h3z"/></g></svg>
\ No newline at end of file

From e65fd158a4f1d3b074cafb83a91420ad4acb17b3 Mon Sep 17 00:00:00 2001
From: nkdengineer <nkdengineer@outlook.com>
Date: Thu, 29 Jan 2026 00:05:51 +0700
Subject: [PATCH 22/39] update svg again

---
 assets/images/crop.svg | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/images/crop.svg b/assets/images/crop.svg
index 43dd4a822ff4..efc6018074c9 100644
--- a/assets/images/crop.svg
+++ b/assets/images/crop.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><defs><clipPath id="a"><path fill="none" d="M0 0h20v20H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="M4.5 0C5.33 0 6 .67 6 1.5V3h11v11h1.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5H17v1.5c0 .83-.67 1.5-1.5 1.5s-1.5-.67-1.5-1.5V6H1.5C.67 6 0 5.33 0 4.5S.67 3 1.5 3H3V1.5C3 .67 3.67 0 4.5 0"/><path d="M6 14h6v3H3V8h3z"/></g></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M4.5 0C5.33 0 6 .67 6 1.5V3h11v11h1.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5H17v1.5c0 .83-.67 1.5-1.5 1.5s-1.5-.67-1.5-1.5V6H1.5C.67 6 0 5.33 0 4.5S.67 3 1.5 3H3V1.5C3 .67 3.67 0 4.5 0"/><path d="M6 14h6v3H3V8h3z"/></svg>
\ No newline at end of file

From 790b8abfed9244adb9a62c018bac5a6e4bd0416b Mon Sep 17 00:00:00 2001
From: nkdengineer <nkdengineer@outlook.com>
Date: Thu, 29 Jan 2026 11:43:28 +0700
Subject: [PATCH 23/39] new crop icon

---
 assets/images/crop.svg | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/images/crop.svg b/assets/images/crop.svg
index efc6018074c9..ad1e0707465b 100644
--- a/assets/images/crop.svg
+++ b/assets/images/crop.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M4.5 0C5.33 0 6 .67 6 1.5V3h11v11h1.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5H17v1.5c0 .83-.67 1.5-1.5 1.5s-1.5-.67-1.5-1.5V6H1.5C.67 6 0 5.33 0 4.5S.67 3 1.5 3H3V1.5C3 .67 3.67 0 4.5 0"/><path d="M6 14h6v3H3V8h3z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" id="Layer_1" x="0" y="0" viewBox="0 0 20 20"><style>.st0{fill-rule:evenodd;clip-rule:evenodd}</style><path d="M4.5 0C5.33 0 6 .67 6 1.5V3h11v11h1.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5H17v1.5c0 .83-.67 1.5-1.5 1.5s-1.5-.67-1.5-1.5V6H1.5C.67 6 0 5.33 0 4.5S.67 3 1.5 3H3V1.5C3 .67 3.67 0 4.5 0"/><path d="M6 14h6v3H3V8h3z"/></svg>
\ No newline at end of file

From d7de05c50c0b8147dadfe383e1173924b973e615 Mon Sep 17 00:00:00 2001
From: nkdengineer <nkdengineer@outlook.com>
Date: Thu, 29 Jan 2026 11:45:30 +0700
Subject: [PATCH 24/39] run compress

---
 assets/images/crop.svg | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/images/crop.svg b/assets/images/crop.svg
index ad1e0707465b..2f24c6258fa4 100644
--- a/assets/images/crop.svg
+++ b/assets/images/crop.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" id="Layer_1" x="0" y="0" viewBox="0 0 20 20"><style>.st0{fill-rule:evenodd;clip-rule:evenodd}</style><path d="M4.5 0C5.33 0 6 .67 6 1.5V3h11v11h1.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5H17v1.5c0 .83-.67 1.5-1.5 1.5s-1.5-.67-1.5-1.5V6H1.5C.67 6 0 5.33 0 4.5S.67 3 1.5 3H3V1.5C3 .67 3.67 0 4.5 0"/><path d="M6 14h6v3H3V8h3z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 20 20"><path d="M4.5 0C5.33 0 6 .67 6 1.5V3h11v11h1.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5H17v1.5c0 .83-.67 1.5-1.5 1.5s-1.5-.67-1.5-1.5V6H1.5C.67 6 0 5.33 0 4.5S.67 3 1.5 3H3V1.5C3 .67 3.67 0 4.5 0"/><path d="M6 14h6v3H3V8h3z"/></svg>
\ No newline at end of file

From 22129cd29f821ae37d3420576c7de72fd71a082a Mon Sep 17 00:00:00 2001
From: nkdengineer <nkdengineer@outlook.com>
Date: Thu, 29 Jan 2026 13:46:58 +0700
Subject: [PATCH 25/39] hardcode to rotate icon

---
 .../routes/TransactionReceiptModalContent.tsx                   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx b/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx
index 45a4689a5e11..90d841aee5af 100644
--- a/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx
+++ b/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx
@@ -452,7 +452,7 @@ function TransactionReceiptModalContent({navigation, route}: AttachmentModalScre
                 )}
                 {!!shouldShowRotateAndCropReceiptButton && (
                     <Button
-                        icon={Expensicons.Crop}
+                        icon={Expensicons.Rotate}
                         onPress={enterCropMode}
                         text={translate('receipt.crop')}
                         style={styles.transactionReceiptButton}

From eac50f2ffd5d66373275519ed70fa917df68397d Mon Sep 17 00:00:00 2001
From: nkdengineer <nkdengineer@outlook.com>
Date: Thu, 29 Jan 2026 14:27:54 +0700
Subject: [PATCH 26/39] use lazy load icon

---
 src/components/Icon/Expensicons.ts            |  2 +-
 .../Icon/chunks/expensify-icons.chunk.ts      |  2 +-
 .../routes/TransactionReceiptModalContent.tsx | 22 ++++++++-----------
 3 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/src/components/Icon/Expensicons.ts b/src/components/Icon/Expensicons.ts
index 6eb088a27d7c..70d058dbbd58 100644
--- a/src/components/Icon/Expensicons.ts
+++ b/src/components/Icon/Expensicons.ts
@@ -193,6 +193,7 @@ export {
     CreditCard,
     CreditCardHourglass,
     CreditCardExclamation,
+    Crop,
     CircleSlash,
     Document,
     DocumentMerge,
@@ -227,7 +228,6 @@ export {
     Inbox,
     ImageCropCircleMask,
     ImageCropSquareMask,
-    Crop,
     Info,
     Invoice,
     InvoiceGeneric,
diff --git a/src/components/Icon/chunks/expensify-icons.chunk.ts b/src/components/Icon/chunks/expensify-icons.chunk.ts
index 67b34bb470b6..bc06830dc83e 100644
--- a/src/components/Icon/chunks/expensify-icons.chunk.ts
+++ b/src/components/Icon/chunks/expensify-icons.chunk.ts
@@ -291,6 +291,7 @@ const Expensicons = {
     ConnectionComplete,
     Copy,
     CreditCard,
+    Crop,
     CreditCardHourglass,
     CreditCardExclamation,
     CircleSlash,
@@ -341,7 +342,6 @@ const Expensicons = {
     Inbox,
     ImageCropCircleMask,
     ImageCropSquareMask,
-    Crop,
     Info,
     Invoice,
     InvoiceGeneric,
diff --git a/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx b/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx
index 90d841aee5af..b6db0345c485 100644
--- a/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx
+++ b/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx
@@ -3,8 +3,6 @@ import React, {useCallback, useEffect, useMemo, useState} from 'react';
 import {View} from 'react-native';
 import Button from '@components/Button';
 import ConfirmModal from '@components/ConfirmModal';
-// eslint-disable-next-line no-restricted-imports
-import * as Expensicons from '@components/Icon/Expensicons';
 import ReceiptCropView from '@components/ReceiptCropView';
 import type {CropRect} from '@components/ReceiptCropView';
 import useAllTransactions from '@hooks/useAllTransactions';
@@ -38,10 +36,9 @@ import useDownloadAttachment from './hooks/useDownloadAttachment';
 function TransactionReceiptModalContent({navigation, route}: AttachmentModalScreenProps<typeof SCREENS.TRANSACTION_RECEIPT>) {
     const {reportID, transactionID, action, iouType: iouTypeParam, readonly: readonlyParam, mergeTransactionID} = route.params;
 
-    const icons = useMemoizedLazyExpensifyIcons(['Download']);
     const {translate} = useLocalize();
     const {isOffline} = useNetwork();
-    const expensifyIcons = useMemoizedLazyExpensifyIcons(['Camera']);
+    const expensifyIcons = useMemoizedLazyExpensifyIcons(['Camera', 'Download', 'Crop', 'Trashcan', 'Rotate', 'Close', 'Checkmark']);
 
     const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`, {canBeMissing: true});
     const allTransactions = useAllTransactions();
@@ -351,7 +348,7 @@ function TransactionReceiptModalContent({navigation, route}: AttachmentModalScre
             }
             if ((!isOffline && allowDownload && !isLocalSource) || !!draftTransactionID) {
                 menuItems.push({
-                    icon: icons.Download,
+                    icon: expensifyIcons.Download,
                     text: translate('common.download'),
                     onSelected: () => onDownloadAttachment({source: innerSource, file}),
                     sentryLabel: CONST.SENTRY_LABEL.RECEIPT_MODAL.DOWNLOAD_RECEIPT,
@@ -367,7 +364,7 @@ function TransactionReceiptModalContent({navigation, route}: AttachmentModalScre
                 !hasMissingSmartscanFields(transaction, transactionReport)
             ) {
                 menuItems.push({
-                    icon: Expensicons.Trashcan,
+                    icon: expensifyIcons.Trashcan,
                     text: translate('receipt.deleteReceipt'),
                     onSelected: () => setIsDeleteReceiptConfirmModalVisible?.(true),
                     shouldCallAfterModalHide: true,
@@ -385,12 +382,11 @@ function TransactionReceiptModalContent({navigation, route}: AttachmentModalScre
             transaction,
             shouldShowDeleteReceiptButton,
             transactionReport,
-            expensifyIcons.Camera,
             translate,
             action,
             iouType,
             report?.reportID,
-            icons.Download,
+            expensifyIcons,
             onDownloadAttachment,
         ],
     );
@@ -418,7 +414,7 @@ function TransactionReceiptModalContent({navigation, route}: AttachmentModalScre
                     <Button
                         onPress={exitCropMode}
                         text={translate('common.cancel')}
-                        icon={Expensicons.Close}
+                        icon={expensifyIcons.Close}
                         style={styles.transactionReceiptButton}
                     />
                     <Button
@@ -427,7 +423,7 @@ function TransactionReceiptModalContent({navigation, route}: AttachmentModalScre
                         text={translate('common.save')}
                         isLoading={isCropSaving}
                         isDisabled={!cropRect || isCropSaving}
-                        icon={Expensicons.Checkmark}
+                        icon={expensifyIcons.Checkmark}
                         style={styles.transactionReceiptButton}
                     />
                 </View>
@@ -442,7 +438,7 @@ function TransactionReceiptModalContent({navigation, route}: AttachmentModalScre
             <View style={[styles.flexRow, styles.gap2, styles.ph5, styles.pb5, styles.justifyContentCenter]}>
                 {!!shouldShowRotateAndCropReceiptButton && (
                     <Button
-                        icon={Expensicons.Rotate}
+                        icon={expensifyIcons.Rotate}
                         onPress={rotateReceipt}
                         text={translate('common.rotate')}
                         isLoading={isRotating}
@@ -452,7 +448,7 @@ function TransactionReceiptModalContent({navigation, route}: AttachmentModalScre
                 )}
                 {!!shouldShowRotateAndCropReceiptButton && (
                     <Button
-                        icon={Expensicons.Rotate}
+                        icon={expensifyIcons.Crop}
                         onPress={enterCropMode}
                         text={translate('receipt.crop')}
                         style={styles.transactionReceiptButton}
@@ -493,13 +489,13 @@ function TransactionReceiptModalContent({navigation, route}: AttachmentModalScre
         rotateReceipt,
         isRotating,
         enterCropMode,
-        expensifyIcons.Camera,
         action,
         iouType,
         draftTransactionID,
         transaction?.transactionID,
         report?.reportID,
         styles,
+        expensifyIcons,
     ]);
 
     const customAttachmentContent = useMemo(() => {

From b322764cc606282c4c42645f844d605aa1675635 Mon Sep 17 00:00:00 2001
From: nkdengineer <nkdengineer@outlook.com>
Date: Thu, 29 Jan 2026 16:35:17 +0700
Subject: [PATCH 27/39] copy rotate file to crop file

---
 assets/images/crop.svg | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/images/crop.svg b/assets/images/crop.svg
index 2f24c6258fa4..0c2fdb41661f 100644
--- a/assets/images/crop.svg
+++ b/assets/images/crop.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 20 20"><path d="M4.5 0C5.33 0 6 .67 6 1.5V3h11v11h1.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5H17v1.5c0 .83-.67 1.5-1.5 1.5s-1.5-.67-1.5-1.5V6H1.5C.67 6 0 5.33 0 4.5S.67 3 1.5 3H3V1.5C3 .67 3.67 0 4.5 0"/><path d="M6 14h6v3H3V8h3z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" id="Layer_1" x="0" y="0" viewBox="0 0 20 21"><style>.st0{fill-rule:evenodd;clip-rule:evenodd}</style><path d="M14.3 1.5c.7.7.7 1.8 0 2.4l-.8.6c3.7.6 6.5 3.7 6.5 7.5v.5c0 .8-.7 1.5-1.5 1.5s-1.5-.7-1.5-1.5V12c0-2-1.3-3.7-3.2-4.3l.4.4c.7.7.7 1.8 0 2.4-.7.7-1.8.7-2.4 0L7 6l4.8-4.5c.7-.7 1.8-.7 2.5 0"/><path d="M0 13c0-1.7 1.3-3 3-3h5c1.7 0 3 1.3 3 3v5c0 1.7-1.3 3-3 3H3c-1.7 0-3-1.3-3-3zm3-.2h5c.1 0 .2.1.2.2v5c0 .1-.1.2-.2.2H3c-.1 0-.2-.1-.2-.2v-5c0-.1.1-.2.2-.2" class="st0"/></svg>
\ No newline at end of file

From 0083564e15f3dfa4e3c50d300bfc6bf5d0a89857 Mon Sep 17 00:00:00 2001
From: nkdengineer <nkdengineer@outlook.com>
Date: Thu, 29 Jan 2026 18:26:28 +0700
Subject: [PATCH 28/39] rename crop svg file

---
 assets/images/crop-icon.svg                                   | 1 +
 assets/images/crop.svg                                        | 1 -
 src/components/Icon/Expensicons.ts                            | 4 ++--
 src/components/Icon/chunks/expensify-icons.chunk.ts           | 4 ++--
 .../routes/TransactionReceiptModalContent.tsx                 | 4 ++--
 5 files changed, 7 insertions(+), 7 deletions(-)
 create mode 100644 assets/images/crop-icon.svg
 delete mode 100644 assets/images/crop.svg

diff --git a/assets/images/crop-icon.svg b/assets/images/crop-icon.svg
new file mode 100644
index 000000000000..faa83dc11d3b
--- /dev/null
+++ b/assets/images/crop-icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 20 20"><path d="M20 15.5c0 .83-.67 1.5-1.5 1.5H17v1.5c0 .83-.67 1.5-1.5 1.5s-1.5-.67-1.5-1.5V6H1.5C.67 6 0 5.33 0 4.5S.67 3 1.5 3H3V1.5C3 .67 3.67 0 4.5 0S6 .67 6 1.5V3h11v11h1.5c.83 0 1.5.67 1.5 1.5M6 8H3v9h9v-3H6z"/></svg>
\ No newline at end of file
diff --git a/assets/images/crop.svg b/assets/images/crop.svg
deleted file mode 100644
index 0c2fdb41661f..000000000000
--- a/assets/images/crop.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" id="Layer_1" x="0" y="0" viewBox="0 0 20 21"><style>.st0{fill-rule:evenodd;clip-rule:evenodd}</style><path d="M14.3 1.5c.7.7.7 1.8 0 2.4l-.8.6c3.7.6 6.5 3.7 6.5 7.5v.5c0 .8-.7 1.5-1.5 1.5s-1.5-.7-1.5-1.5V12c0-2-1.3-3.7-3.2-4.3l.4.4c.7.7.7 1.8 0 2.4-.7.7-1.8.7-2.4 0L7 6l4.8-4.5c.7-.7 1.8-.7 2.5 0"/><path d="M0 13c0-1.7 1.3-3 3-3h5c1.7 0 3 1.3 3 3v5c0 1.7-1.3 3-3 3H3c-1.7 0-3-1.3-3-3zm3-.2h5c.1 0 .2.1.2.2v5c0 .1-.1.2-.2.2H3c-.1 0-.2-.1-.2-.2v-5c0-.1.1-.2.2-.2" class="st0"/></svg>
\ No newline at end of file
diff --git a/src/components/Icon/Expensicons.ts b/src/components/Icon/Expensicons.ts
index 70d058dbbd58..eabf7c4a4d51 100644
--- a/src/components/Icon/Expensicons.ts
+++ b/src/components/Icon/Expensicons.ts
@@ -38,7 +38,7 @@ import Copy from '@assets/images/copy.svg';
 import CreditCardExclamation from '@assets/images/credit-card-exclamation.svg';
 import CreditCardHourglass from '@assets/images/credit-card-hourglass.svg';
 import CreditCard from '@assets/images/creditcard.svg';
-import Crop from '@assets/images/crop.svg';
+import CropImage from '@assets/images/crop-icon.svg';
 import DocumentMerge from '@assets/images/document-merge.svg';
 import Document from '@assets/images/document.svg';
 import DotIndicatorUnfilled from '@assets/images/dot-indicator-unfilled.svg';
@@ -193,7 +193,7 @@ export {
     CreditCard,
     CreditCardHourglass,
     CreditCardExclamation,
-    Crop,
+    CropImage,
     CircleSlash,
     Document,
     DocumentMerge,
diff --git a/src/components/Icon/chunks/expensify-icons.chunk.ts b/src/components/Icon/chunks/expensify-icons.chunk.ts
index bc06830dc83e..f3d959357ca8 100644
--- a/src/components/Icon/chunks/expensify-icons.chunk.ts
+++ b/src/components/Icon/chunks/expensify-icons.chunk.ts
@@ -64,7 +64,7 @@ import Copy from '@assets/images/copy.svg';
 import CreditCardExclamation from '@assets/images/credit-card-exclamation.svg';
 import CreditCardHourglass from '@assets/images/credit-card-hourglass.svg';
 import CreditCard from '@assets/images/creditcard.svg';
-import Crop from '@assets/images/crop.svg';
+import CropImage from '@assets/images/crop-icon.svg';
 import Crosshair from '@assets/images/crosshair.svg';
 import DocumentMerge from '@assets/images/document-merge.svg';
 import Document from '@assets/images/document.svg';
@@ -291,7 +291,7 @@ const Expensicons = {
     ConnectionComplete,
     Copy,
     CreditCard,
-    Crop,
+    CropImage,
     CreditCardHourglass,
     CreditCardExclamation,
     CircleSlash,
diff --git a/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx b/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx
index b6db0345c485..301a28d2f7d2 100644
--- a/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx
+++ b/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx
@@ -38,7 +38,7 @@ function TransactionReceiptModalContent({navigation, route}: AttachmentModalScre
 
     const {translate} = useLocalize();
     const {isOffline} = useNetwork();
-    const expensifyIcons = useMemoizedLazyExpensifyIcons(['Camera', 'Download', 'Crop', 'Trashcan', 'Rotate', 'Close', 'Checkmark']);
+    const expensifyIcons = useMemoizedLazyExpensifyIcons(['Camera', 'Download', 'CropImage', 'Trashcan', 'Rotate', 'Close', 'Checkmark']);
 
     const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`, {canBeMissing: true});
     const allTransactions = useAllTransactions();
@@ -448,7 +448,7 @@ function TransactionReceiptModalContent({navigation, route}: AttachmentModalScre
                 )}
                 {!!shouldShowRotateAndCropReceiptButton && (
                     <Button
-                        icon={expensifyIcons.Crop}
+                        icon={expensifyIcons.CropImage}
                         onPress={enterCropMode}
                         text={translate('receipt.crop')}
                         style={styles.transactionReceiptButton}

From a32c595fda04f2d01f03f6136a5dd9e3559ad008 Mon Sep 17 00:00:00 2001
From: nkdengineer <nkdengineer@outlook.com>
Date: Tue, 3 Feb 2026 12:51:33 +0700
Subject: [PATCH 29/39] update rotate icon for testing

---
 assets/images/rotate.svg                                        | 2 +-
 .../routes/TransactionReceiptModalContent.tsx                   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/assets/images/rotate.svg b/assets/images/rotate.svg
index 306e431e5318..faa83dc11d3b 100644
--- a/assets/images/rotate.svg
+++ b/assets/images/rotate.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" id="Layer_1" x="0" y="0" viewBox="0 0 20 20"><style>.st0{fill-rule:evenodd;clip-rule:evenodd}</style><path d="m9.5 2.5 4-2.5v1.8c3.2 0 5.8 2.6 5.8 5.8v1c0 .4-.3.8-.8.8s-.8-.3-.8-.8v-1c0-2.3-1.9-4.2-4.2-4.2V5z"/><path d="M3 8c0-1.1.9-2 2-2h8c1.1 0 2 .9 2 2v8c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2zm2-.5h8c.3 0 .5.2.5.5v8c0 .3-.2.5-.5.5H5c-.3 0-.5-.2-.5-.5V8c0-.3.2-.5.5-.5" class="st0"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 20 20"><path d="M20 15.5c0 .83-.67 1.5-1.5 1.5H17v1.5c0 .83-.67 1.5-1.5 1.5s-1.5-.67-1.5-1.5V6H1.5C.67 6 0 5.33 0 4.5S.67 3 1.5 3H3V1.5C3 .67 3.67 0 4.5 0S6 .67 6 1.5V3h11v11h1.5c.83 0 1.5.67 1.5 1.5M6 8H3v9h9v-3H6z"/></svg>
\ No newline at end of file
diff --git a/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx b/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx
index 301a28d2f7d2..d260fb93492e 100644
--- a/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx
+++ b/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx
@@ -448,7 +448,7 @@ function TransactionReceiptModalContent({navigation, route}: AttachmentModalScre
                 )}
                 {!!shouldShowRotateAndCropReceiptButton && (
                     <Button
-                        icon={expensifyIcons.CropImage}
+                        icon={expensifyIcons.Rotate}
                         onPress={enterCropMode}
                         text={translate('receipt.crop')}
                         style={styles.transactionReceiptButton}

From 77bdb2dde4c07564fac436c233104d06ab824d67 Mon Sep 17 00:00:00 2001
From: nkdengineer <nkdengineer@outlook.com>
Date: Tue, 3 Feb 2026 14:46:31 +0700
Subject: [PATCH 30/39] copy rotate icon to crop image for testing

---
 assets/images/crop-icon.svg                                     | 1 -
 assets/images/crop-image.svg                                    | 1 +
 src/components/Icon/Expensicons.ts                              | 2 +-
 src/components/Icon/chunks/expensify-icons.chunk.ts             | 2 +-
 .../routes/TransactionReceiptModalContent.tsx                   | 2 +-
 5 files changed, 4 insertions(+), 4 deletions(-)
 delete mode 100644 assets/images/crop-icon.svg
 create mode 100644 assets/images/crop-image.svg

diff --git a/assets/images/crop-icon.svg b/assets/images/crop-icon.svg
deleted file mode 100644
index faa83dc11d3b..000000000000
--- a/assets/images/crop-icon.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 20 20"><path d="M20 15.5c0 .83-.67 1.5-1.5 1.5H17v1.5c0 .83-.67 1.5-1.5 1.5s-1.5-.67-1.5-1.5V6H1.5C.67 6 0 5.33 0 4.5S.67 3 1.5 3H3V1.5C3 .67 3.67 0 4.5 0S6 .67 6 1.5V3h11v11h1.5c.83 0 1.5.67 1.5 1.5M6 8H3v9h9v-3H6z"/></svg>
\ No newline at end of file
diff --git a/assets/images/crop-image.svg b/assets/images/crop-image.svg
new file mode 100644
index 000000000000..306e431e5318
--- /dev/null
+++ b/assets/images/crop-image.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" id="Layer_1" x="0" y="0" viewBox="0 0 20 20"><style>.st0{fill-rule:evenodd;clip-rule:evenodd}</style><path d="m9.5 2.5 4-2.5v1.8c3.2 0 5.8 2.6 5.8 5.8v1c0 .4-.3.8-.8.8s-.8-.3-.8-.8v-1c0-2.3-1.9-4.2-4.2-4.2V5z"/><path d="M3 8c0-1.1.9-2 2-2h8c1.1 0 2 .9 2 2v8c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2zm2-.5h8c.3 0 .5.2.5.5v8c0 .3-.2.5-.5.5H5c-.3 0-.5-.2-.5-.5V8c0-.3.2-.5.5-.5" class="st0"/></svg>
\ No newline at end of file
diff --git a/src/components/Icon/Expensicons.ts b/src/components/Icon/Expensicons.ts
index eabf7c4a4d51..26d8c3ea73b0 100644
--- a/src/components/Icon/Expensicons.ts
+++ b/src/components/Icon/Expensicons.ts
@@ -38,7 +38,7 @@ import Copy from '@assets/images/copy.svg';
 import CreditCardExclamation from '@assets/images/credit-card-exclamation.svg';
 import CreditCardHourglass from '@assets/images/credit-card-hourglass.svg';
 import CreditCard from '@assets/images/creditcard.svg';
-import CropImage from '@assets/images/crop-icon.svg';
+import CropImage from '@assets/images/crop-image.svg';
 import DocumentMerge from '@assets/images/document-merge.svg';
 import Document from '@assets/images/document.svg';
 import DotIndicatorUnfilled from '@assets/images/dot-indicator-unfilled.svg';
diff --git a/src/components/Icon/chunks/expensify-icons.chunk.ts b/src/components/Icon/chunks/expensify-icons.chunk.ts
index f3d959357ca8..d25a8927c932 100644
--- a/src/components/Icon/chunks/expensify-icons.chunk.ts
+++ b/src/components/Icon/chunks/expensify-icons.chunk.ts
@@ -64,7 +64,7 @@ import Copy from '@assets/images/copy.svg';
 import CreditCardExclamation from '@assets/images/credit-card-exclamation.svg';
 import CreditCardHourglass from '@assets/images/credit-card-hourglass.svg';
 import CreditCard from '@assets/images/creditcard.svg';
-import CropImage from '@assets/images/crop-icon.svg';
+import CropImage from '@assets/images/crop-image.svg';
 import Crosshair from '@assets/images/crosshair.svg';
 import DocumentMerge from '@assets/images/document-merge.svg';
 import Document from '@assets/images/document.svg';
diff --git a/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx b/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx
index d260fb93492e..706ee1e22a7c 100644
--- a/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx
+++ b/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx
@@ -438,7 +438,7 @@ function TransactionReceiptModalContent({navigation, route}: AttachmentModalScre
             <View style={[styles.flexRow, styles.gap2, styles.ph5, styles.pb5, styles.justifyContentCenter]}>
                 {!!shouldShowRotateAndCropReceiptButton && (
                     <Button
-                        icon={expensifyIcons.Rotate}
+                        icon={expensifyIcons.CropImage}
                         onPress={rotateReceipt}
                         text={translate('common.rotate')}
                         isLoading={isRotating}

From c709ad1c2500780a8d3e855620db0eb672f53158 Mon Sep 17 00:00:00 2001
From: nkdengineer <nkdengineer@outlook.com>
Date: Wed, 4 Feb 2026 13:27:00 +0700
Subject: [PATCH 31/39] swap to original icon

---
 assets/images/crop-image.svg                                  | 2 +-
 assets/images/rotate.svg                                      | 2 +-
 .../routes/TransactionReceiptModalContent.tsx                 | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/assets/images/crop-image.svg b/assets/images/crop-image.svg
index 306e431e5318..faa83dc11d3b 100644
--- a/assets/images/crop-image.svg
+++ b/assets/images/crop-image.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" id="Layer_1" x="0" y="0" viewBox="0 0 20 20"><style>.st0{fill-rule:evenodd;clip-rule:evenodd}</style><path d="m9.5 2.5 4-2.5v1.8c3.2 0 5.8 2.6 5.8 5.8v1c0 .4-.3.8-.8.8s-.8-.3-.8-.8v-1c0-2.3-1.9-4.2-4.2-4.2V5z"/><path d="M3 8c0-1.1.9-2 2-2h8c1.1 0 2 .9 2 2v8c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2zm2-.5h8c.3 0 .5.2.5.5v8c0 .3-.2.5-.5.5H5c-.3 0-.5-.2-.5-.5V8c0-.3.2-.5.5-.5" class="st0"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 20 20"><path d="M20 15.5c0 .83-.67 1.5-1.5 1.5H17v1.5c0 .83-.67 1.5-1.5 1.5s-1.5-.67-1.5-1.5V6H1.5C.67 6 0 5.33 0 4.5S.67 3 1.5 3H3V1.5C3 .67 3.67 0 4.5 0S6 .67 6 1.5V3h11v11h1.5c.83 0 1.5.67 1.5 1.5M6 8H3v9h9v-3H6z"/></svg>
\ No newline at end of file
diff --git a/assets/images/rotate.svg b/assets/images/rotate.svg
index faa83dc11d3b..306e431e5318 100644
--- a/assets/images/rotate.svg
+++ b/assets/images/rotate.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 20 20"><path d="M20 15.5c0 .83-.67 1.5-1.5 1.5H17v1.5c0 .83-.67 1.5-1.5 1.5s-1.5-.67-1.5-1.5V6H1.5C.67 6 0 5.33 0 4.5S.67 3 1.5 3H3V1.5C3 .67 3.67 0 4.5 0S6 .67 6 1.5V3h11v11h1.5c.83 0 1.5.67 1.5 1.5M6 8H3v9h9v-3H6z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" id="Layer_1" x="0" y="0" viewBox="0 0 20 20"><style>.st0{fill-rule:evenodd;clip-rule:evenodd}</style><path d="m9.5 2.5 4-2.5v1.8c3.2 0 5.8 2.6 5.8 5.8v1c0 .4-.3.8-.8.8s-.8-.3-.8-.8v-1c0-2.3-1.9-4.2-4.2-4.2V5z"/><path d="M3 8c0-1.1.9-2 2-2h8c1.1 0 2 .9 2 2v8c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2zm2-.5h8c.3 0 .5.2.5.5v8c0 .3-.2.5-.5.5H5c-.3 0-.5-.2-.5-.5V8c0-.3.2-.5.5-.5" class="st0"/></svg>
\ No newline at end of file
diff --git a/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx b/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx
index 706ee1e22a7c..301a28d2f7d2 100644
--- a/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx
+++ b/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx
@@ -438,7 +438,7 @@ function TransactionReceiptModalContent({navigation, route}: AttachmentModalScre
             <View style={[styles.flexRow, styles.gap2, styles.ph5, styles.pb5, styles.justifyContentCenter]}>
                 {!!shouldShowRotateAndCropReceiptButton && (
                     <Button
-                        icon={expensifyIcons.CropImage}
+                        icon={expensifyIcons.Rotate}
                         onPress={rotateReceipt}
                         text={translate('common.rotate')}
                         isLoading={isRotating}
@@ -448,7 +448,7 @@ function TransactionReceiptModalContent({navigation, route}: AttachmentModalScre
                 )}
                 {!!shouldShowRotateAndCropReceiptButton && (
                     <Button
-                        icon={expensifyIcons.Rotate}
+                        icon={expensifyIcons.CropImage}
                         onPress={enterCropMode}
                         text={translate('receipt.crop')}
                         style={styles.transactionReceiptButton}

From 2c0b7f2002b6f390aa6b14348b93fb44b13849a7 Mon Sep 17 00:00:00 2001
From: nkdengineer <nkdengineer@outlook.com>
Date: Wed, 4 Feb 2026 15:15:45 +0700
Subject: [PATCH 32/39] fix ts error

---
 src/components/ReceiptCropView/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ReceiptCropView/index.tsx b/src/components/ReceiptCropView/index.tsx
index e313eb146005..6d3af096e914 100644
--- a/src/components/ReceiptCropView/index.tsx
+++ b/src/components/ReceiptCropView/index.tsx
@@ -630,7 +630,7 @@ function ReceiptCropView({imageUri, onCropChange, initialCrop, isAuthTokenRequir
             <Animated.View
                 style={[styles.flex1, styles.alignItemsCenter, styles.justifyContentCenter, styles.w100]}
                 onLayout={onContainerLayout}
-                ref={(el) => ControlSelection.blockElement(el as HTMLElement | null)}
+                ref={(el: View | null) => ControlSelection.blockElement(el as HTMLElement | null)}
             >
                 <View style={[styles.flex1, styles.w100]}>
                     <Image

From 6a630b8d2c300e52368b6ff2096da49911ec50f2 Mon Sep 17 00:00:00 2001
From: nkdengineer <nkdengineer@outlook.com>
Date: Wed, 11 Feb 2026 10:19:32 +0700
Subject: [PATCH 33/39] update fill attr

---
 assets/images/crop-image.svg | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/images/crop-image.svg b/assets/images/crop-image.svg
index faa83dc11d3b..2beb07f7f2d4 100644
--- a/assets/images/crop-image.svg
+++ b/assets/images/crop-image.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 20 20"><path d="M20 15.5c0 .83-.67 1.5-1.5 1.5H17v1.5c0 .83-.67 1.5-1.5 1.5s-1.5-.67-1.5-1.5V6H1.5C.67 6 0 5.33 0 4.5S.67 3 1.5 3H3V1.5C3 .67 3.67 0 4.5 0S6 .67 6 1.5V3h11v11h1.5c.83 0 1.5.67 1.5 1.5M6 8H3v9h9v-3H6z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 20 20"><path fill="#000" d="M20 15.5c0 .83-.67 1.5-1.5 1.5H17v1.5c0 .83-.67 1.5-1.5 1.5s-1.5-.67-1.5-1.5V6H1.5C.67 6 0 5.33 0 4.5S.67 3 1.5 3H3V1.5C3 .67 3.67 0 4.5 0S6 .67 6 1.5V3h11v11h1.5c.83 0 1.5.67 1.5 1.5M6 8H3v9h9v-3H6z"/></svg>
\ No newline at end of file

From fa1b1ebe0334fbbb3048bc8656bf59ec89b4e62e Mon Sep 17 00:00:00 2001
From: nkdengineer <nkdengineer@outlook.com>
Date: Thu, 12 Feb 2026 10:17:06 +0700
Subject: [PATCH 34/39] update crop svg

---
 assets/images/crop-image.svg                                  | 1 -
 assets/images/crop.svg                                        | 1 +
 src/components/Icon/Expensicons.ts                            | 4 ++--
 src/components/Icon/chunks/expensify-icons.chunk.ts           | 4 ++--
 .../routes/TransactionReceiptModalContent.tsx                 | 4 ++--
 5 files changed, 7 insertions(+), 7 deletions(-)
 delete mode 100644 assets/images/crop-image.svg
 create mode 100644 assets/images/crop.svg

diff --git a/assets/images/crop-image.svg b/assets/images/crop-image.svg
deleted file mode 100644
index 2beb07f7f2d4..000000000000
--- a/assets/images/crop-image.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 20 20"><path fill="#000" d="M20 15.5c0 .83-.67 1.5-1.5 1.5H17v1.5c0 .83-.67 1.5-1.5 1.5s-1.5-.67-1.5-1.5V6H1.5C.67 6 0 5.33 0 4.5S.67 3 1.5 3H3V1.5C3 .67 3.67 0 4.5 0S6 .67 6 1.5V3h11v11h1.5c.83 0 1.5.67 1.5 1.5M6 8H3v9h9v-3H6z"/></svg>
\ No newline at end of file
diff --git a/assets/images/crop.svg b/assets/images/crop.svg
new file mode 100644
index 000000000000..d9638c22851f
--- /dev/null
+++ b/assets/images/crop.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" id="Layer_1" x="0" y="0" viewBox="0 0 20 20"><style>.st0{fill-rule:evenodd;clip-rule:evenodd}</style><path d="M20 15.5c0 .83-.67 1.5-1.5 1.5H17v1.5c0 .83-.67 1.5-1.5 1.5s-1.5-.67-1.5-1.5V6H1.5C.67 6 0 5.33 0 4.5S.67 3 1.5 3H3V1.5C3 .67 3.67 0 4.5 0S6 .67 6 1.5V3h11v11h1.5c.83 0 1.5.67 1.5 1.5M6 8H3v9h9v-3H6z" class="st0"/></svg>
\ No newline at end of file
diff --git a/src/components/Icon/Expensicons.ts b/src/components/Icon/Expensicons.ts
index f3c8a8b25f24..0e48a015beaa 100644
--- a/src/components/Icon/Expensicons.ts
+++ b/src/components/Icon/Expensicons.ts
@@ -38,7 +38,7 @@ import Copy from '@assets/images/copy.svg';
 import CreditCardExclamation from '@assets/images/credit-card-exclamation.svg';
 import CreditCardHourglass from '@assets/images/credit-card-hourglass.svg';
 import CreditCard from '@assets/images/creditcard.svg';
-import CropImage from '@assets/images/crop-image.svg';
+import Crop from '@assets/images/crop.svg';
 import DocumentMerge from '@assets/images/document-merge.svg';
 import Document from '@assets/images/document.svg';
 import DotIndicatorUnfilled from '@assets/images/dot-indicator-unfilled.svg';
@@ -194,7 +194,7 @@ export {
     CreditCard,
     CreditCardHourglass,
     CreditCardExclamation,
-    CropImage,
+    Crop,
     CircleSlash,
     Document,
     DocumentMerge,
diff --git a/src/components/Icon/chunks/expensify-icons.chunk.ts b/src/components/Icon/chunks/expensify-icons.chunk.ts
index e49ea6759706..c95565ed7a22 100644
--- a/src/components/Icon/chunks/expensify-icons.chunk.ts
+++ b/src/components/Icon/chunks/expensify-icons.chunk.ts
@@ -64,7 +64,7 @@ import Copy from '@assets/images/copy.svg';
 import CreditCardExclamation from '@assets/images/credit-card-exclamation.svg';
 import CreditCardHourglass from '@assets/images/credit-card-hourglass.svg';
 import CreditCard from '@assets/images/creditcard.svg';
-import CropImage from '@assets/images/crop-image.svg';
+import Crop from '@assets/images/crop.svg';
 import Crosshair from '@assets/images/crosshair.svg';
 import DocumentMerge from '@assets/images/document-merge.svg';
 import Document from '@assets/images/document.svg';
@@ -293,7 +293,7 @@ const Expensicons = {
     ConnectionComplete,
     Copy,
     CreditCard,
-    CropImage,
+    Crop,
     CreditCardHourglass,
     CreditCardExclamation,
     CircleSlash,
diff --git a/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx b/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx
index 6ab817bc1df8..36c821cfa3f0 100644
--- a/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx
+++ b/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx
@@ -38,7 +38,7 @@ function TransactionReceiptModalContent({navigation, route}: AttachmentModalScre
 
     const {translate} = useLocalize();
     const {isOffline} = useNetwork();
-    const expensifyIcons = useMemoizedLazyExpensifyIcons(['Camera', 'Download', 'CropImage', 'Trashcan', 'Rotate', 'Close', 'Checkmark']);
+    const expensifyIcons = useMemoizedLazyExpensifyIcons(['Camera', 'Download', 'Crop', 'Trashcan', 'Rotate', 'Close', 'Checkmark']);
 
     const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`, {canBeMissing: true});
     const allTransactions = useAllTransactions();
@@ -523,7 +523,7 @@ function TransactionReceiptModalContent({navigation, route}: AttachmentModalScre
                 )}
                 {!!shouldShowRotateAndCropReceiptButton && (
                     <Button
-                        icon={expensifyIcons.CropImage}
+                        icon={expensifyIcons.Crop}
                         onPress={enterCropMode}
                         text={translate('receipt.crop')}
                         style={styles.transactionReceiptButton}

From ce8eea351a751e9de9a2f079110a01fcb38a352d Mon Sep 17 00:00:00 2001
From: nkdengineer <nkdengineer@outlook.com>
Date: Thu, 12 Feb 2026 10:35:39 +0700
Subject: [PATCH 35/39] fix import error

---
 .../routes/TransactionReceiptModalContent.tsx                    | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx b/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx
index 36c821cfa3f0..8d185af21ee8 100644
--- a/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx
+++ b/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 useThemeStyles from '@hooks/useThemeStyles';
 import {detachReceipt, navigateToStartStepIfScanFileCannotBeRead, removeMoneyRequestOdometerImage, replaceReceipt, setMoneyRequestReceipt} from '@libs/actions/IOU';
 import {openReport} from '@libs/actions/Report';
 import cropOrRotateImage from '@libs/cropOrRotateImage';

From 66125c1125b3245faa8373bd40f4e304fcd9cd70 Mon Sep 17 00:00:00 2001
From: nkdengineer <nkdengineer@outlook.com>
Date: Tue, 24 Feb 2026 14:18:40 +0700
Subject: [PATCH 36/39] remove test file

---
 .../MoneyRequestReceiptViewTest.tsx           | 213 ------------------
 tests/ui/components/ReceiptEmptyStateTest.tsx | 107 ---------
 2 files changed, 320 deletions(-)
 delete mode 100644 tests/ui/components/MoneyRequestReceiptViewTest.tsx
 delete mode 100644 tests/ui/components/ReceiptEmptyStateTest.tsx

diff --git a/tests/ui/components/MoneyRequestReceiptViewTest.tsx b/tests/ui/components/MoneyRequestReceiptViewTest.tsx
deleted file mode 100644
index ed0276caca54..000000000000
--- a/tests/ui/components/MoneyRequestReceiptViewTest.tsx
+++ /dev/null
@@ -1,213 +0,0 @@
-import {act, fireEvent, render, screen} from '@testing-library/react-native';
-import React from 'react';
-import Onyx from 'react-native-onyx';
-import type {OnyxCollection} from 'react-native-onyx';
-import ComposeProviders from '@components/ComposeProviders';
-import {LocaleContextProvider} from '@components/LocaleContextProvider';
-import OnyxListItemProvider from '@components/OnyxListItemProvider';
-import MoneyRequestReceiptView from '@components/ReportActionItem/MoneyRequestReceiptView';
-import type * as IOU from '@userActions/IOU';
-import {replaceReceipt} from '@userActions/IOU';
-import CONST from '@src/CONST';
-import ONYXKEYS from '@src/ONYXKEYS';
-import type {Report, Transaction} from '@src/types/onyx';
-import type {FileObject} from '@src/types/utils/Attachment';
-import {translateLocal} from '../../utils/TestHelper';
-import waitForBatchedUpdatesWithAct from '../../utils/waitForBatchedUpdatesWithAct';
-
-const mockOpenPicker = jest.fn();
-
-jest.mock('@userActions/IOU', () => {
-    const actual = jest.requireActual<typeof IOU>('@userActions/IOU');
-    return {
-        ...actual,
-        replaceReceipt: jest.fn(),
-    };
-});
-
-jest.mock('@components/AttachmentPicker', () => {
-    function MockAttachmentPicker({children}: {children: (props: {openPicker: (opts: {onPicked: (files: unknown[]) => void}) => void}) => React.ReactNode}) {
-        return <>{children({openPicker: mockOpenPicker})}</>;
-    }
-    return MockAttachmentPicker;
-});
-
-jest.mock('@hooks/useFilesValidation', () => (onFilesValidated: (files: FileObject[]) => void) => ({
-    validateFiles: onFilesValidated,
-    PDFValidationComponent: null,
-    ErrorModal: null,
-}));
-
-jest.mock(
-    '@components/ReceiptAlternativeMethods',
-    () =>
-        function MockReceiptAlternativeMethods() {
-            return null;
-        },
-);
-// Override IDs so we control Onyx keys and can use evictableKeys for REPORT_ACTIONS
-const TEST_PARENT_REPORT_ID = 'testParentReportID';
-const TEST_REPORT_ID = 'testReportID';
-const TEST_ACTION_ID = 'testActionID';
-const TEST_TRANSACTION_ID = 'testTransactionID';
-const TEST_POLICY_ID = 'testPolicyID';
-
-const testReport: Report = {
-    reportID: TEST_REPORT_ID,
-    parentReportID: TEST_PARENT_REPORT_ID,
-    parentReportActionID: TEST_ACTION_ID,
-    policyID: TEST_POLICY_ID,
-    type: CONST.REPORT.TYPE.EXPENSE,
-    chatType: CONST.REPORT.CHAT_TYPE.POLICY_EXPENSE_CHAT,
-    participants: {},
-    reportName: '',
-    lastReadTime: '',
-    lastVisibleActionCreated: '',
-    lastMessageText: '',
-    lastActorAccountID: 1,
-    ownerAccountID: 1,
-    managerID: 1,
-    total: 0,
-    unheldTotal: 0,
-    permissions: [CONST.REPORT.PERMISSIONS.READ, CONST.REPORT.PERMISSIONS.WRITE],
-    writeCapability: CONST.REPORT.WRITE_CAPABILITIES.ALL,
-    lastActionType: CONST.REPORT.ACTIONS.TYPE.ADD_COMMENT,
-    stateNum: 0,
-    statusNum: 0,
-    hasOutstandingChildRequest: false,
-    hasOutstandingChildTask: false,
-    isPinned: false,
-    isWaitingOnBankAccount: false,
-    lastReadSequenceNumber: 0,
-    unheldNonReimbursableTotal: 0,
-    nonReimbursableTotal: 0,
-    errorFields: {},
-    currency: CONST.CURRENCY.USD,
-    oldPolicyName: '',
-    welcomeMessage: '',
-    description: '',
-};
-
-const testParentReport: Report = {
-    ...testReport,
-    reportID: TEST_PARENT_REPORT_ID,
-    parentReportID: undefined,
-    parentReportActionID: undefined,
-};
-
-const testParentReportAction = {
-    reportActionID: TEST_ACTION_ID,
-    actionName: CONST.REPORT.ACTIONS.TYPE.IOU,
-    originalMessage: {
-        IOUTransactionID: TEST_TRANSACTION_ID,
-        type: CONST.IOU.REPORT_ACTION_TYPE.CREATE,
-    },
-    created: '2025-02-14 08:12:05.165',
-    actorAccountID: 1,
-    person: [{type: 'TEXT', style: 'strong', text: 'Test'}],
-    message: [{type: 'COMMENT', html: '', text: '', isEdited: false, whisperedTo: [], isDeletedParentAction: false}],
-};
-
-const transactionWithoutReceipt: Transaction = {
-    transactionID: TEST_TRANSACTION_ID,
-    reportID: TEST_REPORT_ID,
-    amount: 100,
-    currency: CONST.CURRENCY.USD,
-    cardName: CONST.EXPENSE.TYPE.CASH_CARD_NAME,
-    status: CONST.TRANSACTION.STATUS.POSTED,
-    created: '2025-02-14',
-    inserted: '2025-02-14 08:12:19',
-    merchant: 'Test',
-    billable: false,
-    managedCard: false,
-    reimbursable: true,
-    receipt: undefined,
-    comment: {},
-    bank: '',
-    cardNumber: '',
-    category: '',
-    modifiedAmount: '',
-    originalAmount: 0,
-    parentTransactionID: '',
-    posted: '',
-    tag: '',
-    hasEReceipt: false,
-    cardID: 0,
-    modifiedCreated: '',
-    modifiedCurrency: '',
-    modifiedMerchant: '',
-    originalCurrency: '',
-};
-
-function Wrapper({children}: {children: React.ReactNode}) {
-    return <ComposeProviders components={[OnyxListItemProvider, LocaleContextProvider]}>{children}</ComposeProviders>;
-}
-
-describe('MoneyRequestReceiptView', () => {
-    const allReports: OnyxCollection<Report> = {
-        [`${ONYXKEYS.COLLECTION.REPORT}${TEST_REPORT_ID}`]: testReport,
-        [`${ONYXKEYS.COLLECTION.REPORT}${TEST_PARENT_REPORT_ID}`]: testParentReport,
-    };
-
-    beforeAll(() => {
-        Onyx.init({
-            keys: ONYXKEYS,
-            evictableKeys: [ONYXKEYS.COLLECTION.REPORT_ACTIONS],
-        });
-    });
-
-    beforeEach(async () => {
-        jest.clearAllMocks();
-        global.URL.createObjectURL = jest.fn(() => 'blob:mock-receipt-url');
-        await act(async () => {
-            await Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${TEST_PARENT_REPORT_ID}`, {
-                [TEST_ACTION_ID]: testParentReportAction,
-            });
-            await Onyx.merge(`${ONYXKEYS.COLLECTION.TRANSACTION}${TEST_TRANSACTION_ID}`, transactionWithoutReceipt);
-            await Onyx.merge(`${ONYXKEYS.COLLECTION.POLICY}${TEST_POLICY_ID}`, {id: TEST_POLICY_ID});
-            await Onyx.merge(`${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${TEST_POLICY_ID}`, {});
-        });
-        await waitForBatchedUpdatesWithAct();
-    });
-
-    afterEach(async () => {
-        await act(async () => {
-            await Onyx.clear();
-        });
-    });
-
-    describe('wide RHP setReceiptFile flow', () => {
-        it('calls setReceiptFile with the picked file when onPicked is invoked (replaceReceipt called)', async () => {
-            render(
-                <Wrapper>
-                    <MoneyRequestReceiptView
-                        allReports={allReports}
-                        report={testReport}
-                        fillSpace
-                        isDisplayedInWideRHP
-                    />
-                </Wrapper>,
-            );
-            await waitForBatchedUpdatesWithAct();
-
-            const uploadButton = screen.getByLabelText(translateLocal('receipt.upload'));
-            fireEvent.press(uploadButton);
-            expect(mockOpenPicker).toHaveBeenCalledTimes(1);
-
-            const firstCall = (mockOpenPicker.mock.calls as Array<[{onPicked: (files: FileObject[]) => void}]>).at(0);
-            const onPicked = firstCall?.at(0)?.onPicked;
-            expect(onPicked).toBeDefined();
-            const pickedFile = new File(['receipt content'], 'receipt.pdf', {type: 'application/pdf'}) as FileObject;
-            onPicked?.([pickedFile]);
-            await waitForBatchedUpdatesWithAct();
-
-            expect(replaceReceipt).toHaveBeenCalledTimes(1);
-            expect(replaceReceipt).toHaveBeenCalledWith(
-                expect.objectContaining({
-                    transactionID: TEST_TRANSACTION_ID,
-                    file: pickedFile,
-                }),
-            );
-        });
-    });
-});
diff --git a/tests/ui/components/ReceiptEmptyStateTest.tsx b/tests/ui/components/ReceiptEmptyStateTest.tsx
deleted file mode 100644
index 6b83fde95d12..000000000000
--- a/tests/ui/components/ReceiptEmptyStateTest.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-import {fireEvent, render, screen} from '@testing-library/react-native';
-import React from 'react';
-import {LocaleContextProvider} from '@components/LocaleContextProvider';
-import ReceiptEmptyState from '@components/ReceiptEmptyState';
-import type {FileObject} from '@src/types/utils/Attachment';
-import {translateLocal} from '../../utils/TestHelper';
-
-const mockOpenPicker = jest.fn();
-
-jest.mock('@components/AttachmentPicker', () => {
-    function MockAttachmentPicker({children}: {children: (props: {openPicker: (opts: {onPicked: (files: unknown[]) => void}) => void}) => React.ReactNode}) {
-        return <>{children({openPicker: mockOpenPicker})}</>;
-    }
-    return MockAttachmentPicker;
-});
-
-jest.mock('@hooks/useFilesValidation', () => (onFilesValidated: (files: FileObject[]) => void) => ({
-    validateFiles: onFilesValidated,
-    PDFValidationComponent: null,
-    ErrorModal: null,
-}));
-
-// ReceiptAlternativeMethods uses RenderHTML which requires TRenderEngineProvider (buildTTree). Mock to avoid the error.
-jest.mock(
-    '@components/ReceiptAlternativeMethods',
-    () =>
-        function MockReceiptAlternativeMethods() {
-            return null;
-        },
-);
-
-function Wrapper({children}: {children: React.ReactNode}) {
-    return <LocaleContextProvider>{children}</LocaleContextProvider>;
-}
-
-describe('ReceiptEmptyState', () => {
-    beforeEach(() => {
-        jest.clearAllMocks();
-    });
-
-    describe('wide RHP attachment picker flow', () => {
-        it('calls openPicker when pressed and isDisplayedInWideRHP is true', () => {
-            render(
-                <Wrapper>
-                    <ReceiptEmptyState
-                        isDisplayedInWideRHP
-                        setReceiptFile={jest.fn()}
-                    />
-                </Wrapper>,
-            );
-
-            const uploadButton = screen.getByLabelText(translateLocal('receipt.upload'));
-            fireEvent.press(uploadButton);
-
-            expect(mockOpenPicker).toHaveBeenCalledTimes(1);
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment -- Jest matcher for callback
-            expect(mockOpenPicker).toHaveBeenCalledWith({onPicked: expect.any(Function)});
-        });
-
-        it('does not call openPicker when isDisplayedInWideRHP is false and calls onPress instead', () => {
-            const onPress = jest.fn();
-            render(
-                <Wrapper>
-                    <ReceiptEmptyState
-                        isDisplayedInWideRHP={false}
-                        onPress={onPress}
-                    />
-                </Wrapper>,
-            );
-
-            const uploadButton = screen.getByLabelText(translateLocal('receipt.upload'));
-            fireEvent.press(uploadButton);
-
-            expect(mockOpenPicker).not.toHaveBeenCalled();
-            expect(onPress).toHaveBeenCalledTimes(1);
-        });
-
-        it('shows "Add a receipt" text when isDisplayedInWideRHP is true and not thumbnail', () => {
-            render(
-                <Wrapper>
-                    <ReceiptEmptyState
-                        isDisplayedInWideRHP
-                        isThumbnail={false}
-                        setReceiptFile={jest.fn()}
-                    />
-                </Wrapper>,
-            );
-
-            expect(screen.getByText(translateLocal('receipt.addAReceipt.phrase1'))).toBeOnTheScreen();
-            expect(screen.getByText(translateLocal('receipt.addAReceipt.phrase2'))).toBeOnTheScreen();
-        });
-
-        it('does not show "Add a receipt" text when isDisplayedInWideRHP is false', () => {
-            render(
-                <Wrapper>
-                    <ReceiptEmptyState
-                        isDisplayedInWideRHP={false}
-                        isThumbnail={false}
-                    />
-                </Wrapper>,
-            );
-
-            expect(screen.queryByText(translateLocal('receipt.addAReceipt.phrase1'))).not.toBeOnTheScreen();
-            expect(screen.queryByText(translateLocal('receipt.addAReceipt.phrase2'))).not.toBeOnTheScreen();
-        });
-    });
-});

From 3ad3b2f24025b6f437047b5953108303c18eb7ac Mon Sep 17 00:00:00 2001
From: nkdengineer <nkdengineer@outlook.com>
Date: Tue, 24 Feb 2026 15:16:52 +0700
Subject: [PATCH 37/39] update perf suggestion

---
 src/components/ReceiptCropView/index.tsx      | 146 +++++++-----------
 src/libs/Permissions.ts                       |   1 +
 .../routes/TransactionReceiptModalContent.tsx |  77 ++++-----
 3 files changed, 86 insertions(+), 138 deletions(-)

diff --git a/src/components/ReceiptCropView/index.tsx b/src/components/ReceiptCropView/index.tsx
index 6d3af096e914..aaa5d8eb110d 100644
--- a/src/components/ReceiptCropView/index.tsx
+++ b/src/components/ReceiptCropView/index.tsx
@@ -258,6 +258,46 @@ function ReceiptCropView({imageUri, onCropChange, initialCrop, isAuthTokenRequir
         return Math.max(min, Math.min(max, value));
     }, []);
 
+    const applyCropBoundsAndNotify = useCallback(
+        (newX: number, newY: number, newWidth: number, newHeight: number, imageLeft: number, imageRight: number, imageTop: number, imageBottom: number) => {
+            // clamp to image bounds
+            let x = newX;
+            let y = newY;
+            let w = newWidth;
+            let h = newHeight;
+
+            if (x < imageLeft) {
+                const diff = imageLeft - x;
+                x = imageLeft;
+                w -= diff;
+            }
+            if (x + w > imageRight) {
+                w = imageRight - x;
+            }
+            if (y < imageTop) {
+                const diff = imageTop - y;
+                y = imageTop;
+                h -= diff;
+            }
+            if (y + h > imageBottom) {
+                h = imageBottom - y;
+            }
+
+            cropX.set(x);
+            cropY.set(y);
+            cropWidth.set(w);
+            cropHeight.set(h);
+
+            onCropChange?.({
+                x: (x - imageOffsetX) * scaleX,
+                y: (y - imageOffsetY) * scaleY,
+                width: w * scaleX,
+                height: h * scaleY,
+            });
+        },
+        [cropX, cropY, cropWidth, cropHeight, imageOffsetX, scaleX, imageOffsetY, scaleY, onCropChange],
+    );
+
     /**
      * Create gesture handler for an edge
      */
@@ -305,40 +345,10 @@ function ReceiptCropView({imageUri, onCropChange, initialCrop, isAuthTokenRequir
                             break;
                     }
 
-                    // Ensure crop rectangle stays within image bounds
-                    if (newX < imageLeft) {
-                        const diff = imageLeft - newX;
-                        newX = imageLeft;
-                        newWidth -= diff;
-                    }
-                    if (newX + newWidth > imageRight) {
-                        newWidth = imageRight - newX;
-                    }
-                    if (newY < imageTop) {
-                        const diff = imageTop - newY;
-                        newY = imageTop;
-                        newHeight -= diff;
-                    }
-                    if (newY + newHeight > imageBottom) {
-                        newHeight = imageBottom - newY;
-                    }
-
-                    cropX.set(newX);
-                    cropY.set(newY);
-                    cropWidth.set(newWidth);
-                    cropHeight.set(newHeight);
-
-                    const crop: CropRect = {
-                        x: (newX - imageOffsetX) * scaleX,
-                        y: (newY - imageOffsetY) * scaleY,
-                        width: newWidth * scaleX,
-                        height: newHeight * scaleY,
-                    };
-
-                    onCropChange?.(crop);
+                    applyCropBoundsAndNotify(newX, newY, newWidth, newHeight, imageLeft, imageRight, imageTop, imageBottom);
                 });
         },
-        [cropX, cropY, cropWidth, cropHeight, displayWidthSV, displayHeightSV, imageOffsetXSV, imageOffsetYSV, imageOffsetX, scaleX, imageOffsetY, scaleY, onCropChange, clamp],
+        [cropX, cropY, cropWidth, cropHeight, displayWidthSV, displayHeightSV, imageOffsetXSV, imageOffsetYSV, applyCropBoundsAndNotify, clamp],
     );
 
     /**
@@ -394,40 +404,10 @@ function ReceiptCropView({imageUri, onCropChange, initialCrop, isAuthTokenRequir
                             break;
                     }
 
-                    // Ensure crop rectangle stays within image bounds
-                    if (newX < imageLeft) {
-                        const diff = imageLeft - newX;
-                        newX = imageLeft;
-                        newWidth -= diff;
-                    }
-                    if (newX + newWidth > imageRight) {
-                        newWidth = imageRight - newX;
-                    }
-                    if (newY < imageTop) {
-                        const diff = imageTop - newY;
-                        newY = imageTop;
-                        newHeight -= diff;
-                    }
-                    if (newY + newHeight > imageBottom) {
-                        newHeight = imageBottom - newY;
-                    }
-
-                    cropX.set(newX);
-                    cropY.set(newY);
-                    cropWidth.set(newWidth);
-                    cropHeight.set(newHeight);
-
-                    const crop: CropRect = {
-                        x: (newX - imageOffsetX) * scaleX,
-                        y: (newY - imageOffsetY) * scaleY,
-                        width: newWidth * scaleX,
-                        height: newHeight * scaleY,
-                    };
-
-                    onCropChange?.(crop);
+                    applyCropBoundsAndNotify(newX, newY, newWidth, newHeight, imageLeft, imageRight, imageTop, imageBottom);
                 });
         },
-        [cropX, cropY, cropWidth, cropHeight, displayWidthSV, displayHeightSV, imageOffsetXSV, imageOffsetYSV, imageOffsetX, scaleX, imageOffsetY, scaleY, onCropChange, clamp],
+        [cropX, cropY, cropWidth, cropHeight, displayWidthSV, displayHeightSV, imageOffsetXSV, imageOffsetYSV, applyCropBoundsAndNotify, clamp],
     );
 
     const borderStyle = useAnimatedStyle(() => {
@@ -452,12 +432,6 @@ function ReceiptCropView({imageUri, onCropChange, initialCrop, isAuthTokenRequir
         }).cornerTopLeft;
     });
 
-    const topLeftCornerVisualStyle = useAnimatedStyle(() => {
-        'worklet';
-
-        return StyleUtils.getCropViewStyles().cornerVisual;
-    });
-
     const topRightCornerStyle = useAnimatedStyle(() => {
         'worklet';
 
@@ -469,12 +443,6 @@ function ReceiptCropView({imageUri, onCropChange, initialCrop, isAuthTokenRequir
         }).cornerTopRight;
     });
 
-    const topRightCornerVisualStyle = useAnimatedStyle(() => {
-        'worklet';
-
-        return StyleUtils.getCropViewStyles().cornerVisual;
-    });
-
     const bottomLeftCornerStyle = useAnimatedStyle(() => {
         'worklet';
 
@@ -486,12 +454,6 @@ function ReceiptCropView({imageUri, onCropChange, initialCrop, isAuthTokenRequir
         }).cornerBottomLeft;
     });
 
-    const bottomLeftCornerVisualStyle = useAnimatedStyle(() => {
-        'worklet';
-
-        return StyleUtils.getCropViewStyles().cornerVisual;
-    });
-
     const bottomRightCornerStyle = useAnimatedStyle(() => {
         'worklet';
 
@@ -503,12 +465,6 @@ function ReceiptCropView({imageUri, onCropChange, initialCrop, isAuthTokenRequir
         }).cornerBottomRight;
     });
 
-    const bottomRightCornerVisualStyle = useAnimatedStyle(() => {
-        'worklet';
-
-        return StyleUtils.getCropViewStyles().cornerVisual;
-    });
-
     // Edge handle styles - thicker tap target while keeping visual size
     const topEdgeStyle = useAnimatedStyle(() => {
         'worklet';
@@ -625,6 +581,12 @@ function ReceiptCropView({imageUri, onCropChange, initialCrop, isAuthTokenRequir
         }).overlayRight;
     });
 
+    const cornerVisualStyle = useAnimatedStyle(() => {
+        'worklet';
+
+        return StyleUtils.getCropViewStyles().cornerVisual;
+    });
+
     return (
         <GestureHandlerRootView style={[styles.flex1, styles.w100]}>
             <Animated.View
@@ -683,22 +645,22 @@ function ReceiptCropView({imageUri, onCropChange, initialCrop, isAuthTokenRequir
                         {/* Corner handles */}
                         <GestureDetector gesture={createCornerGesture('topLeft')}>
                             <Animated.View style={topLeftCornerStyle}>
-                                <Animated.View style={topLeftCornerVisualStyle} />
+                                <Animated.View style={cornerVisualStyle} />
                             </Animated.View>
                         </GestureDetector>
                         <GestureDetector gesture={createCornerGesture('topRight')}>
                             <Animated.View style={topRightCornerStyle}>
-                                <Animated.View style={topRightCornerVisualStyle} />
+                                <Animated.View style={cornerVisualStyle} />
                             </Animated.View>
                         </GestureDetector>
                         <GestureDetector gesture={createCornerGesture('bottomLeft')}>
                             <Animated.View style={bottomLeftCornerStyle}>
-                                <Animated.View style={bottomLeftCornerVisualStyle} />
+                                <Animated.View style={cornerVisualStyle} />
                             </Animated.View>
                         </GestureDetector>
                         <GestureDetector gesture={createCornerGesture('bottomRight')}>
                             <Animated.View style={bottomRightCornerStyle}>
-                                <Animated.View style={bottomRightCornerVisualStyle} />
+                                <Animated.View style={cornerVisualStyle} />
                             </Animated.View>
                         </GestureDetector>
                     </>
diff --git a/src/libs/Permissions.ts b/src/libs/Permissions.ts
index 7d0e831f3100..854e5e009305 100644
--- a/src/libs/Permissions.ts
+++ b/src/libs/Permissions.ts
@@ -5,6 +5,7 @@ import type BetaConfiguration from '@src/types/onyx/BetaConfiguration';
 
 // eslint-disable-next-line rulesdir/no-beta-handler
 function canUseAllBetas(betas: OnyxEntry<Beta[]>): boolean {
+    return true;
     return !!betas?.includes(CONST.BETAS.ALL);
 }
 
diff --git a/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx b/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx
index 5834e5aa81ab..e20d9a43c5ce 100644
--- a/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx
+++ b/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx
@@ -386,29 +386,6 @@ function TransactionReceiptModalContent({navigation, route}: AttachmentModalScre
     const threeDotsMenuItems: ThreeDotsMenuItemFactory = useCallback(
         ({file, source: innerSource, isLocalSource}) => {
             const menuItems = [];
-            if (shouldShowReplaceReceiptButton || isOdometerImage) {
-                menuItems.push({
-                    icon: expensifyIcons.Camera,
-                    text: translate('common.replace'),
-                    onSelected: () => {
-                        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(),
-                                          ),
-                                ),
-                        });
-                    },
-                    sentryLabel: CONST.SENTRY_LABEL.RECEIPT_MODAL.REPLACE_RECEIPT,
-                });
-            }
             if ((!isOffline && allowDownload && !isLocalSource) || !!draftTransactionID) {
                 menuItems.push({
                     icon: expensifyIcons.Download,
@@ -439,7 +416,6 @@ function TransactionReceiptModalContent({navigation, route}: AttachmentModalScre
             // eslint-disable-next-line react-hooks/exhaustive-deps
         },
         [
-            shouldShowReplaceReceiptButton,
             isOdometerImage,
             isOffline,
             allowDownload,
@@ -449,12 +425,6 @@ function TransactionReceiptModalContent({navigation, route}: AttachmentModalScre
             transactionReport,
             isDraftTransaction,
             translate,
-            action,
-            iouType,
-            transactionID,
-            reportID,
-            imageType,
-            report?.reportID,
             expensifyIcons,
             onDownloadAttachment,
         ],
@@ -506,7 +476,7 @@ function TransactionReceiptModalContent({navigation, route}: AttachmentModalScre
             );
         }
 
-        if (!shouldShowRotateAndCropReceiptButton && !shouldShowReplaceReceiptButton) {
+        if (!shouldShowRotateAndCropReceiptButton && !shouldShowReplaceReceiptButton && !isOdometerImage) {
             return null;
         }
 
@@ -530,20 +500,22 @@ function TransactionReceiptModalContent({navigation, route}: AttachmentModalScre
                         style={styles.transactionReceiptButton}
                     />
                 )}
-                {!!shouldShowReplaceReceiptButton && (
+                {(shouldShowReplaceReceiptButton || isOdometerImage) && (
                     <Button
                         icon={expensifyIcons.Camera}
                         onPress={() => {
                             Navigation.dismissModal({
                                 callback: () =>
                                     Navigation.navigate(
-                                        ROUTES.MONEY_REQUEST_STEP_SCAN.getRoute(
-                                            action ?? CONST.IOU.ACTION.EDIT,
-                                            iouType,
-                                            draftTransactionID ?? transaction?.transactionID,
-                                            report?.reportID,
-                                            Navigation.getActiveRoute(),
-                                        ),
+                                        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(),
+                                              ),
                                     ),
                             });
                         }}
@@ -555,23 +527,36 @@ function TransactionReceiptModalContent({navigation, route}: AttachmentModalScre
         );
     }, [
         isCropping,
-        exitCropMode,
-        saveCrop,
-        cropRect,
-        isCropSaving,
-        translate,
         shouldShowRotateAndCropReceiptButton,
         shouldShowReplaceReceiptButton,
+        isOdometerImage,
+        styles.flexRow,
+        styles.gap2,
+        styles.ph5,
+        styles.pb5,
+        styles.justifyContentCenter,
+        styles.transactionReceiptButton,
+        expensifyIcons.Rotate,
+        expensifyIcons.Crop,
+        expensifyIcons.Camera,
+        expensifyIcons.Close,
+        expensifyIcons.Checkmark,
         rotateReceipt,
+        translate,
         isRotating,
         enterCropMode,
+        exitCropMode,
+        saveCrop,
+        isCropSaving,
+        cropRect,
         action,
         iouType,
+        transactionID,
+        reportID,
+        imageType,
         draftTransactionID,
         transaction?.transactionID,
         report?.reportID,
-        styles,
-        expensifyIcons,
     ]);
 
     const customAttachmentContent = useMemo(() => {

From 09c4a13c828004a07fb4b9a083a7548faf8aa269 Mon Sep 17 00:00:00 2001
From: nkdengineer <nkdengineer@outlook.com>
Date: Tue, 24 Feb 2026 15:37:54 +0700
Subject: [PATCH 38/39] remove hardcode

---
 src/libs/Permissions.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/libs/Permissions.ts b/src/libs/Permissions.ts
index 854e5e009305..7d0e831f3100 100644
--- a/src/libs/Permissions.ts
+++ b/src/libs/Permissions.ts
@@ -5,7 +5,6 @@ import type BetaConfiguration from '@src/types/onyx/BetaConfiguration';
 
 // eslint-disable-next-line rulesdir/no-beta-handler
 function canUseAllBetas(betas: OnyxEntry<Beta[]>): boolean {
-    return true;
     return !!betas?.includes(CONST.BETAS.ALL);
 }
 

From f97c79479f373cc957111af31e8b93344f4d8c05 Mon Sep 17 00:00:00 2001
From: nkdengineer <nkdengineer@outlook.com>
Date: Thu, 26 Feb 2026 14:56:45 +0700
Subject: [PATCH 39/39] improve style

---
 src/components/ReceiptCropView/index.tsx |  62 ++---
 src/styles/utils/index.ts                | 300 +++++++++++++----------
 2 files changed, 194 insertions(+), 168 deletions(-)

diff --git a/src/components/ReceiptCropView/index.tsx b/src/components/ReceiptCropView/index.tsx
index aaa5d8eb110d..4e1c30741690 100644
--- a/src/components/ReceiptCropView/index.tsx
+++ b/src/components/ReceiptCropView/index.tsx
@@ -306,8 +306,6 @@ function ReceiptCropView({imageUri, onCropChange, initialCrop, isAuthTokenRequir
             return Gesture.Pan()
                 .runOnJS(true)
                 .onChange((event: GestureUpdateEvent<PanGestureHandlerEventPayload & PanGestureChangeEventPayload>) => {
-                    'worklet';
-
                     const currentX = cropX.get();
                     const currentY = cropY.get();
                     const currentWidth = cropWidth.get();
@@ -359,8 +357,6 @@ function ReceiptCropView({imageUri, onCropChange, initialCrop, isAuthTokenRequir
             return Gesture.Pan()
                 .runOnJS(true)
                 .onChange((event: GestureUpdateEvent<PanGestureHandlerEventPayload & PanGestureChangeEventPayload>) => {
-                    'worklet';
-
                     const currentX = cropX.get();
                     const currentY = cropY.get();
                     const currentWidth = cropWidth.get();
@@ -413,101 +409,101 @@ function ReceiptCropView({imageUri, onCropChange, initialCrop, isAuthTokenRequir
     const borderStyle = useAnimatedStyle(() => {
         'worklet';
 
-        return StyleUtils.getCropViewStyles({
+        return StyleUtils.getCropViewStyle('border', {
             cropX: cropX.get(),
             cropY: cropY.get(),
             cropWidth: cropWidth.get(),
             cropHeight: cropHeight.get(),
-        }).border;
+        });
     });
 
     const topLeftCornerStyle = useAnimatedStyle(() => {
         'worklet';
 
-        return StyleUtils.getCropViewStyles({
+        return StyleUtils.getCropViewStyle('cornerTopLeft', {
             cropX: cropX.get(),
             cropY: cropY.get(),
             cropWidth: cropWidth.get(),
             cropHeight: cropHeight.get(),
-        }).cornerTopLeft;
+        });
     });
 
     const topRightCornerStyle = useAnimatedStyle(() => {
         'worklet';
 
-        return StyleUtils.getCropViewStyles({
+        return StyleUtils.getCropViewStyle('cornerTopRight', {
             cropX: cropX.get(),
             cropY: cropY.get(),
             cropWidth: cropWidth.get(),
             cropHeight: cropHeight.get(),
-        }).cornerTopRight;
+        });
     });
 
     const bottomLeftCornerStyle = useAnimatedStyle(() => {
         'worklet';
 
-        return StyleUtils.getCropViewStyles({
+        return StyleUtils.getCropViewStyle('cornerBottomLeft', {
             cropX: cropX.get(),
             cropY: cropY.get(),
             cropWidth: cropWidth.get(),
             cropHeight: cropHeight.get(),
-        }).cornerBottomLeft;
+        });
     });
 
     const bottomRightCornerStyle = useAnimatedStyle(() => {
         'worklet';
 
-        return StyleUtils.getCropViewStyles({
+        return StyleUtils.getCropViewStyle('cornerBottomRight', {
             cropX: cropX.get(),
             cropY: cropY.get(),
             cropWidth: cropWidth.get(),
             cropHeight: cropHeight.get(),
-        }).cornerBottomRight;
+        });
     });
 
     // Edge handle styles - thicker tap target while keeping visual size
     const topEdgeStyle = useAnimatedStyle(() => {
         'worklet';
 
-        return StyleUtils.getCropViewStyles({
+        return StyleUtils.getCropViewStyle('edgeTop', {
             cropX: cropX.get(),
             cropY: cropY.get(),
             cropWidth: cropWidth.get(),
             cropHeight: cropHeight.get(),
-        }).edgeTop;
+        });
     });
 
     const bottomEdgeStyle = useAnimatedStyle(() => {
         'worklet';
 
-        return StyleUtils.getCropViewStyles({
+        return StyleUtils.getCropViewStyle('edgeBottom', {
             cropX: cropX.get(),
             cropY: cropY.get(),
             cropWidth: cropWidth.get(),
             cropHeight: cropHeight.get(),
-        }).edgeBottom;
+        });
     });
 
     const leftEdgeStyle = useAnimatedStyle(() => {
         'worklet';
 
-        return StyleUtils.getCropViewStyles({
+        return StyleUtils.getCropViewStyle('edgeLeft', {
             cropX: cropX.get(),
             cropY: cropY.get(),
             cropWidth: cropWidth.get(),
             cropHeight: cropHeight.get(),
-        }).edgeLeft;
+        });
     });
 
     const rightEdgeStyle = useAnimatedStyle(() => {
         'worklet';
 
-        return StyleUtils.getCropViewStyles({
+        return StyleUtils.getCropViewStyle('edgeRight', {
             cropX: cropX.get(),
             cropY: cropY.get(),
             cropWidth: cropWidth.get(),
             cropHeight: cropHeight.get(),
-        }).edgeRight;
+        });
     });
 
     const overlayTopStyle = useAnimatedStyle(() => {
@@ -518,12 +514,12 @@ function ReceiptCropView({imageUri, onCropChange, initialCrop, isAuthTokenRequir
         const imgDisplayWidth = displayWidthSV.get();
         const cropTop = cropY.get();
 
-        return StyleUtils.getCropViewStyles({
+        return StyleUtils.getCropViewStyle('overlayTop', {
             imageLeft,
             imageTop,
             imgDisplayWidth,
             cropTop,
-        }).overlayTop;
+        });
     });
 
     const overlayBottomStyle = useAnimatedStyle(() => {
@@ -536,13 +532,13 @@ function ReceiptCropView({imageUri, onCropChange, initialCrop, isAuthTokenRequir
         const cropBottom = cropY.get() + cropHeight.get();
         const imageBottom = imageTop + imgDisplayHeight;
 
-        return StyleUtils.getCropViewStyles({
+        return StyleUtils.getCropViewStyle('overlayBottom', {
             imageLeft,
             imageTop,
             imgDisplayWidth,
             cropBottom,
             imageBottom,
-        }).overlayBottom;
+        });
     });
 
     const overlayLeftStyle = useAnimatedStyle(() => {
@@ -553,12 +549,12 @@ function ReceiptCropView({imageUri, onCropChange, initialCrop, isAuthTokenRequir
         const cropTop = cropY.get();
         const cropHeightValue = cropHeight.get();
 
-        return StyleUtils.getCropViewStyles({
+        return StyleUtils.getCropViewStyle('overlayLeft', {
             imageLeft,
             cropLeft,
             cropTop,
             cropHeight: cropHeightValue,
-        }).overlayLeft;
+        });
     });
 
     const overlayRightStyle = useAnimatedStyle(() => {
@@ -571,21 +567,17 @@ function ReceiptCropView({imageUri, onCropChange, initialCrop, isAuthTokenRequir
         const cropTop = cropY.get();
         const cropHeightValue = cropHeight.get();
 
-        return StyleUtils.getCropViewStyles({
+        return StyleUtils.getCropViewStyle('overlayRight', {
             imageLeft,
             imgDisplayWidth,
             cropRight,
             imageRight,
             cropTop,
             cropHeight: cropHeightValue,
-        }).overlayRight;
+        });
     });
 
-    const cornerVisualStyle = useAnimatedStyle(() => {
-        'worklet';
-
-        return StyleUtils.getCropViewStyles().cornerVisual;
-    });
+    const cornerVisualStyle = StyleUtils.getCropViewStyle('cornerVisual');
 
     return (
         <GestureHandlerRootView style={[styles.flex1, styles.w100]}>
diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts
index f80e60730f58..edbd9febe17a 100644
--- a/src/styles/utils/index.ts
+++ b/src/styles/utils/index.ts
@@ -1996,24 +1996,42 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({
     },
 
     /**
-     * Returns all necessary styles for crop view components
-     * @param params - Object containing dynamic crop values (cropX, cropY, cropWidth, cropHeight, etc.)
+     * Returns a single crop view style by key. Use this from useAnimatedStyle to avoid building all 14 styles per frame.
+     * @param params - Object containing dynamic crop values (same as getCropViewStyles)
+     * @param key - Which style to return
      */
-    getCropViewStyles: (params?: {
-        cropX?: number;
-        cropY?: number;
-        cropWidth?: number;
-        cropHeight?: number;
-        imageLeft?: number;
-        imageTop?: number;
-        imgDisplayWidth?: number;
-        cropLeft?: number;
-        cropRight?: number;
-        cropTop?: number;
-        cropBottom?: number;
-        imageRight?: number;
-        imageBottom?: number;
-    }) => {
+    getCropViewStyle: (
+        key:
+            | 'cornerVisual'
+            | 'border'
+            | 'cornerTopLeft'
+            | 'cornerTopRight'
+            | 'cornerBottomLeft'
+            | 'cornerBottomRight'
+            | 'edgeTop'
+            | 'edgeBottom'
+            | 'edgeLeft'
+            | 'edgeRight'
+            | 'overlayTop'
+            | 'overlayBottom'
+            | 'overlayLeft'
+            | 'overlayRight',
+        params?: {
+            cropX?: number;
+            cropY?: number;
+            cropWidth?: number;
+            cropHeight?: number;
+            imageLeft?: number;
+            imageTop?: number;
+            imgDisplayWidth?: number;
+            cropLeft?: number;
+            cropRight?: number;
+            cropTop?: number;
+            cropBottom?: number;
+            imageRight?: number;
+            imageBottom?: number;
+        },
+    ) => {
         'worklet';
 
         const {
@@ -2032,122 +2050,138 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({
             imageBottom = 0,
         } = params ?? {};
 
-        return {
-            cornerVisual: {
-                position: 'absolute' as const,
-                left: (variables.cornerTapTargetSize - variables.cornerHandleSize) / 2,
-                top: (variables.cornerTapTargetSize - variables.cornerHandleSize) / 2,
-                width: variables.cornerHandleSize,
-                height: variables.cornerHandleSize,
-                borderRadius: variables.cornerHandleSize / 2,
-                backgroundColor: theme.success,
-            },
-            border: {
-                ...styles.pAbsolute,
-                left: cropX,
-                top: cropY,
-                width: cropWidth,
-                height: cropHeight,
-                borderWidth: variables.cropBorderWidth,
-                borderColor: theme.success,
-            },
-            cornerTopLeft: {
-                ...styles.pAbsolute,
-                left: cropX - variables.cornerTapTargetSize / 2,
-                top: cropY - variables.cornerTapTargetSize / 2,
-                width: variables.cornerTapTargetSize,
-                height: variables.cornerTapTargetSize,
-                ...styles.cursorNwseResize,
-            },
-            cornerTopRight: {
-                ...styles.pAbsolute,
-                left: cropX + cropWidth - variables.cornerTapTargetSize / 2,
-                top: cropY - variables.cornerTapTargetSize / 2,
-                width: variables.cornerTapTargetSize,
-                height: variables.cornerTapTargetSize,
-                ...styles.cursorNeswResize,
-            },
-            cornerBottomLeft: {
-                ...styles.pAbsolute,
-                left: cropX - variables.cornerTapTargetSize / 2,
-                top: cropY + cropHeight - variables.cornerTapTargetSize / 2,
-                width: variables.cornerTapTargetSize,
-                height: variables.cornerTapTargetSize,
-                ...styles.cursorNeswResize,
-            },
-            cornerBottomRight: {
-                ...styles.pAbsolute,
-                left: cropX + cropWidth - variables.cornerTapTargetSize / 2,
-                top: cropY + cropHeight - variables.cornerTapTargetSize / 2,
-                width: variables.cornerTapTargetSize,
-                height: variables.cornerTapTargetSize,
-                ...styles.cursorNwseResize,
-            },
-            edgeTop: {
-                ...styles.pAbsolute,
-                left: cropX,
-                top: cropY - variables.edgeHandleTapTargetThickness / 2,
-                width: cropWidth,
-                height: variables.edgeHandleTapTargetThickness,
-                ...styles.cursorNsResize,
-            },
-            edgeBottom: {
-                ...styles.pAbsolute,
-                left: cropX,
-                top: cropY + cropHeight - variables.edgeHandleTapTargetThickness / 2,
-                width: cropWidth,
-                height: variables.edgeHandleTapTargetThickness,
-                ...styles.cursorNsResize,
-            },
-            edgeLeft: {
-                ...styles.pAbsolute,
-                left: cropX - variables.edgeHandleTapTargetThickness / 2,
-                top: cropY,
-                width: variables.edgeHandleTapTargetThickness,
-                height: cropHeight,
-                ...styles.cursorEwResize,
-            },
-            edgeRight: {
-                ...styles.pAbsolute,
-                left: cropX + cropWidth - variables.edgeHandleTapTargetThickness / 2,
-                top: cropY,
-                width: variables.edgeHandleTapTargetThickness,
-                height: cropHeight,
-                ...styles.cursorEwResize,
-            },
-            overlayTop: {
-                ...styles.pAbsolute,
-                left: imageLeft,
-                top: imageTop,
-                width: imgDisplayWidth,
-                height: Math.max(0, cropTop - imageTop),
-                backgroundColor: theme.transparentWhite,
-            },
-            overlayBottom: {
-                ...styles.pAbsolute,
-                left: imageLeft,
-                top: cropBottom,
-                width: imgDisplayWidth,
-                height: Math.max(0, imageBottom - cropBottom),
-                backgroundColor: theme.transparentWhite,
-            },
-            overlayLeft: {
-                ...styles.pAbsolute,
-                left: imageLeft,
-                top: cropTop,
-                width: Math.max(0, cropLeft - imageLeft),
-                height: cropHeight,
-                backgroundColor: theme.transparentWhite,
-            },
-            overlayRight: {
-                ...styles.pAbsolute,
-                left: cropRight,
-                top: cropTop,
-                width: Math.max(0, imageRight - cropRight),
-                height: cropHeight,
-                backgroundColor: theme.transparentWhite,
-            },
-        };
+        switch (key) {
+            case 'cornerVisual':
+                return {
+                    position: 'absolute' as const,
+                    left: (variables.cornerTapTargetSize - variables.cornerHandleSize) / 2,
+                    top: (variables.cornerTapTargetSize - variables.cornerHandleSize) / 2,
+                    width: variables.cornerHandleSize,
+                    height: variables.cornerHandleSize,
+                    borderRadius: variables.cornerHandleSize / 2,
+                    backgroundColor: theme.success,
+                };
+            case 'border':
+                return {
+                    ...styles.pAbsolute,
+                    left: cropX,
+                    top: cropY,
+                    width: cropWidth,
+                    height: cropHeight,
+                    borderWidth: variables.cropBorderWidth,
+                    borderColor: theme.success,
+                };
+            case 'cornerTopLeft':
+                return {
+                    ...styles.pAbsolute,
+                    left: cropX - variables.cornerTapTargetSize / 2,
+                    top: cropY - variables.cornerTapTargetSize / 2,
+                    width: variables.cornerTapTargetSize,
+                    height: variables.cornerTapTargetSize,
+                    ...styles.cursorNwseResize,
+                };
+            case 'cornerTopRight':
+                return {
+                    ...styles.pAbsolute,
+                    left: cropX + cropWidth - variables.cornerTapTargetSize / 2,
+                    top: cropY - variables.cornerTapTargetSize / 2,
+                    width: variables.cornerTapTargetSize,
+                    height: variables.cornerTapTargetSize,
+                    ...styles.cursorNeswResize,
+                };
+            case 'cornerBottomLeft':
+                return {
+                    ...styles.pAbsolute,
+                    left: cropX - variables.cornerTapTargetSize / 2,
+                    top: cropY + cropHeight - variables.cornerTapTargetSize / 2,
+                    width: variables.cornerTapTargetSize,
+                    height: variables.cornerTapTargetSize,
+                    ...styles.cursorNeswResize,
+                };
+            case 'cornerBottomRight':
+                return {
+                    ...styles.pAbsolute,
+                    left: cropX + cropWidth - variables.cornerTapTargetSize / 2,
+                    top: cropY + cropHeight - variables.cornerTapTargetSize / 2,
+                    width: variables.cornerTapTargetSize,
+                    height: variables.cornerTapTargetSize,
+                    ...styles.cursorNwseResize,
+                };
+            case 'edgeTop':
+                return {
+                    ...styles.pAbsolute,
+                    left: cropX,
+                    top: cropY - variables.edgeHandleTapTargetThickness / 2,
+                    width: cropWidth,
+                    height: variables.edgeHandleTapTargetThickness,
+                    ...styles.cursorNsResize,
+                };
+            case 'edgeBottom':
+                return {
+                    ...styles.pAbsolute,
+                    left: cropX,
+                    top: cropY + cropHeight - variables.edgeHandleTapTargetThickness / 2,
+                    width: cropWidth,
+                    height: variables.edgeHandleTapTargetThickness,
+                    ...styles.cursorNsResize,
+                };
+            case 'edgeLeft':
+                return {
+                    ...styles.pAbsolute,
+                    left: cropX - variables.edgeHandleTapTargetThickness / 2,
+                    top: cropY,
+                    width: variables.edgeHandleTapTargetThickness,
+                    height: cropHeight,
+                    ...styles.cursorEwResize,
+                };
+            case 'edgeRight':
+                return {
+                    ...styles.pAbsolute,
+                    left: cropX + cropWidth - variables.edgeHandleTapTargetThickness / 2,
+                    top: cropY,
+                    width: variables.edgeHandleTapTargetThickness,
+                    height: cropHeight,
+                    ...styles.cursorEwResize,
+                };
+            case 'overlayTop':
+                return {
+                    ...styles.pAbsolute,
+                    left: imageLeft,
+                    top: imageTop,
+                    width: imgDisplayWidth,
+                    height: Math.max(0, cropTop - imageTop),
+                    backgroundColor: theme.transparentWhite,
+                };
+            case 'overlayBottom':
+                return {
+                    ...styles.pAbsolute,
+                    left: imageLeft,
+                    top: cropBottom,
+                    width: imgDisplayWidth,
+                    height: Math.max(0, imageBottom - cropBottom),
+                    backgroundColor: theme.transparentWhite,
+                };
+            case 'overlayLeft':
+                return {
+                    ...styles.pAbsolute,
+                    left: imageLeft,
+                    top: cropTop,
+                    width: Math.max(0, cropLeft - imageLeft),
+                    height: cropHeight,
+                    backgroundColor: theme.transparentWhite,
+                };
+            case 'overlayRight':
+                return {
+                    ...styles.pAbsolute,
+                    left: cropRight,
+                    top: cropTop,
+                    width: Math.max(0, imageRight - cropRight),
+                    height: cropHeight,
+                    backgroundColor: theme.transparentWhite,
+                };
+            default:
+                return {};
+        }
     },
 });