[HOLD for payment 2024-05-09] [$250] iOS - Scan - Receipt preview in confirmation page has sharp instead of round corners

[lanitochka17]

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: 1.4.64-0
Reproducible in staging?: Y
Reproducible in production?: N
**If this was caught during regression testing, add the test name, ID and link from TestRail:**N/A
Issue reported by: Applause - Internal Team

Action Performed:

1. Launch New Expensify app
2. Go to workspace chat
3. Tap + > Submit expense > Scan
4. Snap a photo

Expected Result:

The photo preview will have round corners

Actual Result:

The photo preview has sharp corners

Workaround:

Unknown

Platforms:

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

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~019d52ff8df96d4166
• Upwork Job ID: 1780980326100885504
• Last Price Increase: 2024-04-18
• Automatic offers:
• ikevin127 | Reviewer | 0
• dhairyasenjaliya | Contributor | 0

[melvin-bot]

Triggered auto assignment to @lakchote (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[lanitochka17]

@lakchote FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[melvin-bot]

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

[melvin-bot]

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

[lakchote]

Not a blocker, related to UI and on iOS only too.

[dhairyasenjaliya]

Proposal

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

• iOS - Scan - Receipt preview in confirmation page has sharp instead of round corners

What is the root cause of that problem?

• The root cause is we have not added styles.overflowHidden to <ReceiptImage > used on MoneyRequestConfirmationList.tsx this might be missed during initialise building

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

• We should add styles.overflowHidden to the below line which fixes the issue

App/src/components/MoneyRequestConfirmationList.tsx

Line 901 in 9033ccb

style={styles.moneyRequestImage}

#Alternative

• We can also directly set styles.overflowHidden to <ReceiptImage?> or we can wrap with <View> with styles.overflowHidden property directly at component

App/src/components/ReceiptImage.tsx

Line 129 in 9033ccb

style={style ?? [styles.w100, styles.h100]}

[lakchote]

@cubuspl42 I'll be OOO next week until April 29th. Feel free to ping another internal engineer to review if needed.

[cubuspl42]

@dhairyasenjaliya Have you tested the code on all platforms? Styling in React Native can be tricky, and it's easy to break one platform by fixing a visual issue on another platform

[dhairyasenjaliya]

@cubuspl42 sorry forgot to post screenshots im posting them now

• SS after applying my suggestion styling on my proposal

iOS native

Android

Desktop

Web

M-web

[cubuspl42]

The proposal by @dhairyasenjaliya looks good to me

C+ reviewed 🎀 👀 🎀

[melvin-bot]

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

[melvin-bot]

📣 @ikevin127 🎉 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]

📣 @dhairyasenjaliya 🎉 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 📖

[dhairyasenjaliya]

PR ready for review @ikevin127

[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 1.4.69-2 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Added overflowhidden to default image preview component  #41191

If no regressions arise, payment will be issued on 2024-05-09. 🎊

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

• @dhairyasenjaliya requires payment automatic offer (Contributor)
• @ikevin127 requires payment automatic offer (Reviewer)

[melvin-bot]

Triggered auto assignment to @muttmuure (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.

[ikevin127]

@muttmuure Please let me know if anything else is needed for the payment to be issued today!

[mallenexpensify]

Contributor: @dhairyasenjaliya paid $250 via Upwork
Contributor+: @ikevin127 paid $250 via Upwork

@ikevin127 can you please fill out the BZ checklist? Doesn't look like it was auto posted, plz use the below

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@] The PR that introduced the bug has been identified. Link to the PR:
• [@] 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:
• [@] A discussion in #expensify-bugs 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:
• [@] Determine if we should create a regression test for this bug.
• [@] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@bz] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[melvin-bot]

@lakchote, @muttmuure, @roryabraham, @dhairyasenjaliya, @ikevin127 Huh... This is 4 days overdue. Who can take care of this?

[ikevin127]

• [@ikevin127] The PR that introduced the bug has been identified. Link to the PR:

No PR causing this was identified, this was not caused by a recent regression.

• [@ikevin127] 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:
• [@ikevin127] A discussion in #expensify-bugs 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:

No need, as this was an edge case issue which happened only on iOS: Native due to differences in styling between platforms.

• [@ikevin127] Determine if we should create a regression test for this bug.

No need for regression test here as as this was an edge case issue which happened only on iOS: Native due to differences in styling between platforms.

• [@ikevin127] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.

[muttmuure]

Thanks for getting that @mallenexpensify!