[HOLD for payment 2025-02-04] [$250] Align Receipt Image Consistently in Expense Preview and Expense View

[m-natarajan]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 9.0.82-7
Reproducible in staging?: y
Reproducible in production?: y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?:
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @quinthar
Slack conversation (hyperlinked to channel name): expensify-bugs

Action Performed:

1. Submit a receipt expense which has blank page after 1/3 of the page
2. Compare the receipt display in the expense view and the expense preview.
3. Observe that the preview shows a different portion of the receipt (often blank).

Expected Result:

The same subset of the receipt (preferably the top portion) should be displayed consistently in both the expense view and the expense preview.

Actual Result:

The expense view correctly shows the top portion of the receipt.
The expense preview appears to display a lower section, which can sometimes be blank, leading to a poor user experience.

Workaround:

unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

i_39d2d9f8dac03e8fe6a45134aee2a9a706c8bd7b-2025-01-09 17_08_50.746.pdf

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021879333035263669594
• Upwork Job ID: 1879333035263669594
• Last Price Increase: 2025-01-15
• Automatic offers:
• brunovjk | Reviewer | 105773591
• Krishna2323 | Contributor | 105773593

Issue Owner

Current Issue Owner: @adelekennedy

[melvin-bot]

Triggered auto assignment to @adelekennedy (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[Krishna2323]

Edited by proposal-police: This proposal was edited at 2025-01-10 03:10:33 UTC.

Proposal

Please re-state the problem that we are trying to solve in this issue.

Align Receipt Image Consistently in Expense Preview and Expense View

What is the root cause of that problem?

• shouldSetAspectRatioInStyle is false and due to this the aspect ratio style is not used and height is set to 100% instead of auto
  

  App/src/components/ReportActionItem/ReportActionItemImages.tsx

  Line 72 in 73fcb8b

  <ImageBehaviorContextProvider shouldSetAspectRatioInStyle={false}>

  
  

  App/src/components/Image/index.tsx

  Line 140 in 73fcb8b

  style={[style, shouldSetAspectRatioInStyle && aspectRatio ? {aspectRatio, height: 'auto'} : {}, shouldOpacityBeZero && {opacity: 0}]}

What changes do you think we should make in order to solve the problem?

• Instead of completely removing ImageBehaviorContextProvider, we can use it for each image when we map through shownImages.

                {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;
                    const borderStyle = shouldShowBorder ? styles.reportActionItemImageBorder : {};
                    return (
                        <ImageBehaviorContextProvider shouldSetAspectRatioInStyle={numberOfShownImages === 1 ? true : Str.isPDF(filename ?? '')}>
                            <View
                                key={`${index}-${image}`}
                                style={[styles.reportActionItemImage, borderStyle, hoverStyle]}
                            >

• The value for shouldSetAspectRatioInStyle will be shouldSetAspectRatioInStyle={numberOfShownImages === 1 ? true : Str.isPDF(filename ?? '')}.
• Instead of heightStyle, we would need to set minHeightStyle & maxHeightStyle.

    // 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);
    } else if (numberOfShownImages === 2) {
        maxHeightStyle = StyleUtils.getMaximumHeight(variables.reportActionImagesDoubleImageHeight);
        minHeightStyle = StyleUtils.getMinimumHeight(variables.reportActionImagesDoubleImageHeight);
    } else if (numberOfShownImages > 2) {
        maxHeightStyle = StyleUtils.getMaximumHeight(variables.reportActionImagesMultipleImageHeight);
        minHeightStyle = StyleUtils.getMinimumHeight(variables.reportActionImagesMultipleImageHeight);
    }

App/src/components/ReportActionItem/ReportActionItemImages.tsx

Line 71 in b77ff58

<View style={[styles.reportActionItemImages, hoverStyle, heightStyle]}>

• The height from reportActionItemImages should also be removed.
  

  App/src/styles/index.ts

  Line 4505 in b77ff58

  height: variables.reportActionImagesSingleImageHeight,

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?


What alternative solutions did you explore? (Optional)

• We should pass true to shouldSetAspectRatioInStyle.
• We can completely remove the ImageBehaviorContextProvider because it won't be required if we want to shouldSetAspectRatioInStyle as true from ReportActionItemImages.
• The issue due to which ImageBehaviorContextProvider was introduced isn't reproducible after removing the context.

[melvin-bot]

@adelekennedy Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~021879333035263669594

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @brunovjk (External)