Merge pull request #59944 from FitseTLT/fix-receipt-preview-to-use-aspect-ratio

Fix - [Better Expense Report View] Use aspect-ratio for receipt thumbnail area of expense previews

Author: mountiny

src/components/EReceiptWithSizeCalculation.tsx

@@ -25,7 +25,9 @@ function EReceiptWithSizeCalculation(props: EReceiptWithSizeCalculationProps) {
         <View style={[styles.overflowHidden, styles.w100, styles.h100, styles.userSelectNone]}>
             <View
                 onLayout={onLayout}
-                style={[styles.w100, styles.h100, {transform: `scale(${scaleFactor})`, transformOrigin: 'top left'}]}
+                // We are applying transform of 0 translateZ to avoid a sub-pixel rendering error of a thin 1px line
+                // appearing on EReceipts on web, specifically in chrome. More details in https://github.com/Expensify/App/pull/59944#issuecomment-2797249923.
+                style={[styles.w100, styles.h100, {transform: `scale(${scaleFactor}) ${styles.translateZ0.transform as string}`, transformOrigin: 'top left'}]}
             >
                 <EReceipt
                     // eslint-disable-next-line react/jsx-props-no-spreading

src/components/ReceiptEmptyState.tsx

@@ -23,10 +23,13 @@ type ReceiptEmptyStateProps = {
 
     /** Whether the receipt is in the money request view */
     isInMoneyRequestView?: boolean;
+
+    /** Whether the receipt empty state should extend to the full height of the container. */
+    shouldUseFullHeight?: boolean;
 };
 
 // Returns an SVG icon indicating that the user should attach a receipt
-function ReceiptEmptyState({hasError = false, onPress, disabled = false, isThumbnail = false, isInMoneyRequestView = false}: ReceiptEmptyStateProps) {
+function ReceiptEmptyState({hasError = false, onPress, disabled = false, isThumbnail = false, isInMoneyRequestView = false, shouldUseFullHeight = false}: ReceiptEmptyStateProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const theme = useTheme();
@@ -47,6 +50,7 @@ function ReceiptEmptyState({hasError = false, onPress, disabled = false, isThumb
                 isThumbnail ? styles.moneyRequestAttachReceiptThumbnail : styles.moneyRequestAttachReceipt,
                 isInMoneyRequestView && styles.expenseViewImage,
                 hasError && styles.borderColorDanger,
+                shouldUseFullHeight && styles.receiptEmptyStateFullHeight,
             ]}
         >
             <View>

src/components/ReceiptImage.tsx

@@ -93,6 +93,9 @@ type ReceiptImageProps = (
 
     /** The transaction data in search */
     transactionItem?: TransactionListItemType;
+
+    /** Whether the receipt empty state should extend to the full height of the container. */
+    shouldUseFullHeight?: boolean;
 };
 
 function ReceiptImage({
@@ -115,6 +118,7 @@ function ReceiptImage({
     onPress,
     transactionItem,
     isPerDiemRequest,
+    shouldUseFullHeight,
 }: ReceiptImageProps) {
     const styles = useThemeStyles();
 
@@ -124,6 +128,7 @@ function ReceiptImage({
                 isThumbnail
                 onPress={onPress}
                 disabled={!onPress}
+                shouldUseFullHeight={shouldUseFullHeight}
             />
         );
     }

src/components/ReportActionItem/ReportActionItemImage.tsx

@@ -63,6 +63,9 @@ type ReportActionItemImageProps = {
 
     /** Callback to be called on pressing the image */
     onPress?: () => void;
+
+    /** Whether the receipt empty state should extend to the full height of the container. */
+    shouldUseFullHeight?: boolean;
 };
 
 /**
@@ -86,6 +89,7 @@ function ReportActionItemImage({
     shouldMapHaveBorderRadius,
     isFromReviewDuplicates = false,
     onPress,
+    shouldUseFullHeight,
 }: ReportActionItemImageProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
@@ -163,7 +167,12 @@ function ReportActionItemImage({
         );
     }
 
-    return <ReceiptImage {...propsObj} />;
+    return (
+        <ReceiptImage
+            {...propsObj}
+            shouldUseFullHeight={shouldUseFullHeight}
+        />
+    );
 }
 
 ReportActionItemImage.displayName = 'ReportActionItemImage';

src/components/ReportActionItem/ReportActionItemImages.tsx

@@ -31,6 +31,9 @@ type ReportActionItemImagesProps = {
 
     /** Callback to be called on onPress */
     onPress?: () => void;
+
+    /** Whether we should use aspect ratio to decide the height of receipt previews. */
+    shouldUseAspectRatio?: boolean;
 };
 
 /**
@@ -42,7 +45,7 @@ type ReportActionItemImagesProps = {
  * additional number when subtracted from size.
  */
 
-function ReportActionItemImages({images, size, total, isHovered = false, onPress}: ReportActionItemImagesProps) {
+function ReportActionItemImages({images, size, total, isHovered = false, onPress, shouldUseAspectRatio = false}: ReportActionItemImagesProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
@@ -54,17 +57,15 @@ function ReportActionItemImages({images, size, total, isHovered = false, onPress
     const MAX_REMAINING = 9;
 
     // The height varies depending on the number of images we are displaying.
-    let maxHeightStyle = {};
-    let minHeightStyle = {};
-    if (numberOfShownImages === 1) {
-        maxHeightStyle = StyleUtils.getMaximumHeight(variables.reportActionImagesSingleImageHeight);
-        minHeightStyle = StyleUtils.getMinimumHeight(variables.reportActionImagesSingleImageHeight);
+    const layoutStyle = [];
+    if (shouldUseAspectRatio) {
+        layoutStyle.push(styles.receiptPreviewAspectRatio);
+    } else if (numberOfShownImages === 1) {
+        layoutStyle.push(StyleUtils.getMaximumHeight(variables.reportActionImagesSingleImageHeight), StyleUtils.getMinimumHeight(variables.reportActionImagesSingleImageHeight));
     } else if (numberOfShownImages === 2) {
-        maxHeightStyle = StyleUtils.getMaximumHeight(variables.reportActionImagesDoubleImageHeight);
-        minHeightStyle = StyleUtils.getMinimumHeight(variables.reportActionImagesDoubleImageHeight);
+        layoutStyle.push(StyleUtils.getMaximumHeight(variables.reportActionImagesDoubleImageHeight), StyleUtils.getMinimumHeight(variables.reportActionImagesDoubleImageHeight));
     } else if (numberOfShownImages > 2) {
-        maxHeightStyle = StyleUtils.getMaximumHeight(variables.reportActionImagesMultipleImageHeight);
-        minHeightStyle = StyleUtils.getMinimumHeight(variables.reportActionImagesMultipleImageHeight);
+        layoutStyle.push(StyleUtils.getMaximumHeight(variables.reportActionImagesMultipleImageHeight), StyleUtils.getMinimumHeight(variables.reportActionImagesMultipleImageHeight));
     }
 
     const hoverStyle = isHovered ? styles.reportPreviewBoxHoverBorder : undefined;
@@ -73,7 +74,7 @@ function ReportActionItemImages({images, size, total, isHovered = false, onPress
 
     return (
         <View style={styles.reportActionItemImagesContainer}>
-            <View style={[styles.reportActionItemImages, hoverStyle, minHeightStyle, maxHeightStyle]}>
+            <View style={[styles.reportActionItemImages, hoverStyle, ...layoutStyle]}>
                 {shownImages.map(({thumbnail, isThumbnail, image, isEmptyReceipt, transaction, isLocalFile, fileExtension, filename}, index) => {
                     // Show a border to separate multiple images. Shown to the right for each except the last.
                     const shouldShowBorder = shownImages.length > 1 && index < shownImages.length - 1;
@@ -96,6 +97,7 @@ function ReportActionItemImages({images, size, total, isHovered = false, onPress
                                     isSingleImage={numberOfShownImages === 1}
                                     shouldMapHaveBorderRadius={false}
                                     onPress={onPress}
+                                    shouldUseFullHeight={shouldUseAspectRatio}
                                 />
                             </View>
                         </ImageBehaviorContextProvider>

src/components/ReportActionItem/TransactionPreview/TransactionPreviewContent.tsx

@@ -202,6 +202,7 @@ function TransactionPreviewContent({
                             // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
                             isHovered={isHovered || isScanning}
                             size={1}
+                            shouldUseAspectRatio
                         />
                     )}
                     {shouldShowSkeleton ? (

src/styles/index.ts

@@ -39,6 +39,7 @@ import sizing from './utils/sizing';
 import spacing from './utils/spacing';
 import textDecorationLine from './utils/textDecorationLine';
 import textUnderline from './utils/textUnderline';
+import translateZ0 from './utils/translateZ0';
 import userSelect from './utils/userSelect';
 import visibility from './utils/visibility';
 import whiteSpace from './utils/whiteSpace';
@@ -231,6 +232,7 @@ const styles = (theme: ThemeColors) =>
         ...overflow,
         ...positioning,
         ...wordBreak,
+        ...translateZ0,
         ...whiteSpace,
         ...writingDirection,
         ...cursor,
@@ -4614,6 +4616,10 @@ const styles = (theme: ThemeColors) =>
             margin: 4,
         },
 
+        receiptPreviewAspectRatio: {
+            aspectRatio: 16 / 9,
+        },
+
         reportActionItemImages: {
             flexDirection: 'row',
             borderRadius: 12,
@@ -4781,6 +4787,8 @@ const styles = (theme: ThemeColors) =>
             borderWidth: 0,
         },
 
+        receiptEmptyStateFullHeight: {height: '100%', borderRadius: 12},
+
         moneyRequestAttachReceiptThumbnailIcon: {
             position: 'absolute',
             bottom: -4,

src/styles/utils/translateZ0/index.native.ts

@@ -0,0 +1,5 @@
+import type TranslateZ0Style from './type';
+
+const translateZ0: TranslateZ0Style = {translateZ0: {transform: ''}};
+
+export default translateZ0;

src/styles/utils/translateZ0/index.ts

@@ -0,0 +1,5 @@
+import type TranslateZ0Style from './type';
+
+const translateZ0: TranslateZ0Style = {translateZ0: {transform: 'translateZ(0)'}};
+
+export default translateZ0;

src/styles/utils/translateZ0/type.ts

@@ -0,0 +1,5 @@
+import type {ViewStyle} from 'react-native';
+
+type TranslateZ0Style = Record<'translateZ0', Pick<ViewStyle, 'transform'>>;
+
+export default TranslateZ0Style;