Merge pull request #72856 from dukenv0307/fix/72444

Fix: violations under a receipt on the one expense report view not showing sometimes

Author: MonilBhavsar

src/components/ReceiptImage/index.tsx

@@ -123,6 +123,9 @@ type ReceiptImageProps = (
 
     /** Callback to be called when the image loads */
     onLoad?: (event?: {nativeEvent: {width: number; height: number}}) => void;
+
+    /** Callback to be called when the image fails to load */
+    onLoadFailure?: () => void;
 };
 
 function ReceiptImage({
@@ -150,6 +153,7 @@ function ReceiptImage({
     loadingIndicatorStyles,
     thumbnailContainerStyles,
     onLoad,
+    onLoadFailure,
 }: ReceiptImageProps) {
     const styles = useThemeStyles();
     const [receiptImageWidth, setReceiptImageWidth] = useState<number | undefined>(undefined);
@@ -217,6 +221,7 @@ function ReceiptImage({
                 fallbackIconBackground={fallbackIconBackground}
                 objectPosition={shouldUseInitialObjectPosition ? CONST.IMAGE_OBJECT_POSITION.INITIAL : CONST.IMAGE_OBJECT_POSITION.TOP}
                 onLoad={onLoad}
+                onLoadFailure={onLoadFailure}
             />
         );
     }
@@ -239,6 +244,7 @@ function ReceiptImage({
             onLoad={onLoad}
             shouldCalculateAspectRatioForWideImage={shouldUseFullHeight}
             imageWidthToCalculateHeight={receiptImageWidth}
+            onError={onLoadFailure}
         />
     );
 }

src/components/ReportActionItem/MoneyRequestReceiptView.tsx

@@ -343,10 +343,13 @@ function MoneyRequestReceiptView({
                                 mergeTransactionID={mergeTransactionID}
                                 report={report}
                                 onLoad={() => setIsLoading(false)}
+                                onLoadFailure={() => setIsLoading(false)}
                             />
                         </View>
                     )}
-                    {!!shouldShowAuditMessage && hasReceipt && !isLoading && receiptAuditMessagesRow}
+                    {/* For WideRHP (fillSpace is true), we need to wait for the image to load to get the correct size, then display the violation message to avoid the jumping issue.
+                        Otherwise (when fillSpace is false), we use a fixed size, so there's no need to wait for the image to load. */}
+                    {!!shouldShowAuditMessage && hasReceipt && (!isLoading || !fillSpace) && receiptAuditMessagesRow}
                 </OfflineWithFeedback>
             )}
             {!shouldShowReceiptEmptyState && !hasReceipt && <View style={{marginVertical: 6}} />}

src/components/ReportActionItem/ReportActionItemImage.tsx

@@ -78,6 +78,9 @@ type ReportActionItemImageProps = {
 
     /** Callback to be called when the image loads */
     onLoad?: (event?: {nativeEvent: {width: number; height: number}}) => void;
+
+    /** Callback to be called when the image fails to load */
+    onLoadFailure?: () => void;
 };
 
 /**
@@ -106,6 +109,7 @@ function ReportActionItemImage({
     report: reportProp,
     shouldUseThumbnailImage,
     onLoad,
+    onLoadFailure,
 }: ReportActionItemImageProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
@@ -195,6 +199,7 @@ function ReportActionItemImage({
                             {...propsObj}
                             onLoad={onLoad}
                             shouldUseFullHeight={shouldUseFullHeight}
+                            onLoadFailure={onLoadFailure}
                         />
                     </PressableWithoutFocus>
                 )}
@@ -208,6 +213,7 @@ function ReportActionItemImage({
             shouldUseFullHeight={shouldUseFullHeight}
             thumbnailContainerStyles={styles.thumbnailImageContainerHover}
             onLoad={onLoad}
+            onLoadFailure={onLoadFailure}
         />
     );
 }