fix: Receipt is zoomed in and cropped when rotating the receipt

src/components/Image/BaseImage.android.tsx

@@ -17,6 +17,12 @@ function BaseImage({onLoad, source, ...props}: BaseImageProps) {
         setAttachmentLoaded(source as AttachmentSource, false);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
+
+    // Reset isLoadedRef when source changes to allow onLoad to fire again for new images (e.g., after rotation)
+    useEffect(() => {
+        isLoadedRef.current = false;
+    }, [source]);
+
     const imageLoadedSuccessfully = useCallback(
         (event: ImageLoadEventData) => {
             setAttachmentLoaded(source as AttachmentSource, true);

src/components/Image/BaseImage.ios.tsx

@@ -17,6 +17,12 @@ function BaseImage({onLoad, source, ...props}: BaseImageProps) {
         setAttachmentLoaded(source as AttachmentSource, false);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
+
+    // Reset isLoadedRef when source changes to allow onLoad to fire again for new images (e.g., after rotation)
+    useEffect(() => {
+        isLoadedRef.current = false;
+    }, [source]);
+
     const imageLoadedSuccessfully = useCallback(
         (event: ImageLoadEventData) => {
             setAttachmentLoaded(source as AttachmentSource, true);

src/components/Lightbox/index.tsx

@@ -12,6 +12,7 @@ import MultiGestureCanvas, {DEFAULT_ZOOM_RANGE} from '@components/MultiGestureCa
 import type {OnScaleChangedCallback, ZoomRange} from '@components/MultiGestureCanvas/types';
 import {getCanvasFitScale} from '@components/MultiGestureCanvas/utils';
 import useNetwork from '@hooks/useNetwork';
+import usePrevious from '@hooks/usePrevious';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {isLocalFile} from '@libs/fileDownload/FileUtils';
@@ -148,6 +149,24 @@ function Lightbox({attachmentID, isAuthTokenRequired = false, uri, onScaleChange
 
     const [isFallbackVisible, setFallbackVisible] = useState(!isLightboxVisible);
     const [isFallbackImageLoaded, setFallbackImageLoaded] = useState(false);
+    const previousUri = usePrevious(uri);
+
+    // Clear cached dimensions and reset loading states when URI changes to ensure the new image get fresh dimensions
+    useEffect(() => {
+        if (previousUri === uri || !previousUri || !uri) {
+            return;
+        }
+        // Clear the content size state to force recalculation of dimensions
+        // This ensures that when an image is rotated and gets a new URI,
+        // we don't use stale cached dimensions from the previous image
+        setInternalContentSize(undefined);
+        setLightboxImageLoaded(false);
+        setFallbackImageLoaded(false);
+        setIsLoading(true);
+        // Don't delete from cache here as other components might still need it
+        // The new URI will get its own cache entry when loaded
+    }, [uri, previousUri]);
+
     const fallbackSize = useMemo(() => {
         if (!hasSiblingCarouselItems || !contentSize || isCanvasLoading) {
             return undefined;
@@ -276,7 +295,7 @@ function Lightbox({attachmentID, isAuthTokenRequired = false, uri, onScaleChange
                     )}
 
                     {/* Show activity indicator while the lightbox is still loading the image. */}
-                    {!isImageLoaded && !shouldShowOfflineIndicator && (
+                    {(!isImageLoaded || previousUri !== uri) && !shouldShowOfflineIndicator && (
                         <ActivityIndicator
                             size={CONST.ACTIVITY_INDICATOR_SIZE.LARGE}
                             style={StyleSheet.absoluteFill}