[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 [email protected] 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)

[brunovjk]

Thanks for the proposal @Krishna2323, your RCA makes sense to me, it seems to me that the behavior of the issue has been present since the introduction of ImageBehaviorContextValue here. As for your solution, although it works well in my first tests, I would like confirmation, @aldo-expensify can you take a look at the proposed solution and tell me what you think? Thank you.

🎀👀🎀 C+ reviewed

[melvin-bot]

Triggered auto assignment to @aldo-expensify, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[melvin-bot]

📣 @brunovjk 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

[melvin-bot]

📣 @Krishna2323 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[brunovjk]

Not overdue. @Krishna2323 do you have an ETA here? Thank you.

[Krishna2323]

@brunovjk I will raise the PR tomorrow. Thanks for waiting.

[Krishna2323]

@brunovjk, the PR is ready for review, only the android native video is not added cause the app crashes as soon as it is launched.

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.89-8 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• fix: Align Receipt Image Consistently in Expense Preview and Expense View. #55598

If no regressions arise, payment will be issued on 2025-02-04. 🎊

For reference, here are some details about the assignees on this issue:

• @Krishna2323 requires payment automatic offer (Contributor)
• @brunovjk requires payment automatic offer (Reviewer)

[melvin-bot]

@brunovjk @adelekennedy @brunovjk The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]

[brunovjk]

BugZero Checklist:

• [Contributor] Classify the bug:

Bug classification

Source of bug:

• 1a. Result of the original design (eg. a case wasn't considered)
• 1b. Mistake during implementation
• 1c. Backend bug
• 1z. Other:

Where bug was reported:

• 2a. Reported on production (eg. bug slipped through the normal regression and PR testing process on staging)
• 2b. Reported on staging (eg. found during regression or PR testing)
• 2d. Reported on a PR
• 2z. Other: expensify-bugs

Who reported the bug:

• 3a. Expensify user
• 3b. Expensify employee
• 3c. Contributor
• 3d. QA
• 3z. Other: quinthar

• [Contributor] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake.

  Link to comment: No PR introduced the bug. (eg. a case wasn't considered)

• [Contributor] If the regression was CRITICAL (e.g. interrupts a core flow) A discussion in #expensify-open-source has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner.

  Link to discussion:

• [Contributor] If it was decided to create a regression test for the bug, please propose the regression test steps using the template below to ensure the same bug will not reach production again.

Regression Test Proposal

Test:

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. The same subset of the receipt (preferably the top portion) should be displayed consistently in both the expense view and the expense preview.

Do we agree 👍 or 👎

[adelekennedy]

Contributor: @Krishna2323 paid $250 via Upwork
Contributor+: @brunovjk  owed $250 via Upwork