[Due for payment 2025-06-12] [Due for payment 2025-06-11] [$250] Receipt Preview Does Not Span Full Width on Wider Mobile Devices

[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:
Reproducible in staging?:
Reproducible in production?:
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: @shawnborton
Slack conversation (hyperlinked to channel name): #Expensify Bugs

Action Performed:

1. Open a receipt preview on a wider mobile device (e.g. certain Android phones)
2. Observe that the preview does not take up the full width of the screen.

Expected Result:

The receipt preview should span the full width of the viewport on wider mobile devices. Additionally, we should consider enforcing a 16:9 aspect ratio, similar to how we handle expense previews, to ensure visual consistency.

Actual Result:

The receipt preview appears narrower than the full width of the screen on wider mobile devices, reducing visual clarity

Workaround:

Unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Platforms Tested:

On which of our officially supported platforms was this issue tested:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• 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/~021925616857476464526
• Upwork Job ID: 1925616857476464526
• Last Price Increase: 2025-05-22

Issue Owner

Current Issue Owner: @NicMendonca

[melvin-bot]

Triggered auto assignment to @NicMendonca (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]

Proposal

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

Receipt Preview Does Not Span Full Width on Wider Mobile Devices

What is the root cause of that problem?

• The maxWidth is set to 360 for receipts in money request view.
  

  App/src/styles/index.ts

  Lines 4869 to 4871 in 6871ba9

  	expenseViewImage: {
  	maxWidth: 360,
  	},

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

• We can increase the maxWidth.
• If we increase the width, we would also need to increase the height. We can add the expenseViewImage so that it doesn't affect other receipt images.
• If needed, we can use isSmallScreenWidth to increase the width conditionally. This way, we can keep the maxWidth at 360 on medium and large screen width devices.
• According to this blog, the maximum width of a smartphone can be up to 428.

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

N/A

What alternative solutions did you explore? (Optional)

• On small screen width devices, we can set the width to 100%.

Result

[bernhardoj]

🚨 Edited by proposal-police: This proposal was edited at 2025-05-22 03:04:10 UTC.

Proposal

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

Receipt doesn't take the full width in small screen.

What is the root cause of that problem?

We apply a max width style to the receipt component (placeholder and receipt).

App/src/components/ReportActionItem/MoneyRequestView.tsx

Lines 577 to 578 in 6871ba9

	<View style={[styles.moneyRequestViewImage, styles.expenseViewImage]}>
	<ReportActionItemImage

App/src/components/ReceiptEmptyState.tsx

Line 52 in 6871ba9

isInMoneyRequestView && styles.expenseViewImage,

App/src/styles/index.ts

Lines 4869 to 4871 in 6871ba9

	expenseViewImage: {
	maxWidth: 360,
	},

We don't apply the max width in the IOU confirmation flow page, so it can stretch like this because no aspect ratio is set and a fixed height is set (from #58898).

App/src/components/MoneyRequestConfirmationListFooter.tsx

Lines 752 to 754 in 6871ba9

	const receiptThumbnailContent = useMemo(
	() => (
	<View style={styles.moneyRequestImage}>

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

If we want it to take full width on small screen, then we can create a new style for the small screen and remove the maxWidth style and use aspectRatio: 16/9 instead.

expenseViewImage: {
    maxWidth: 360,
    aspectRatio: 16/9,
    height: 'auto',
},
expenseViewImageSmall: {
    aspectRatio: 16/9,
    height: 'auto',
},

Then, we apply expenseViewImageSmall for small screen (isSmallScreenWidth).

App/src/components/ReportActionItem/MoneyRequestView.tsx

Lines 577 to 578 in 6871ba9

	<View style={[styles.moneyRequestViewImage, styles.expenseViewImage]}>
	<ReportActionItemImage

For MoneyRequestConfirmationListFooter, we can always use expenseViewImageSmall.

App/src/components/MoneyRequestConfirmationListFooter.tsx

Lines 754 to 755 in 6871ba9

	<View style={styles.moneyRequestImage}>
	{isLocalFile && Str.isPDF(receiptFilename) ? (

However, the height won't be resized automatically because we set a fixed height, that's why we set it to auto to unset it.

App/src/styles/index.ts

Line 4865 in 6871ba9

height: 180,

This way, both large and small screens will have a 16:9 ratio, with the large screen having a max width of 360. For the receipt empty state, we can add a new prop to use the style because we want to use it in MoneyRequestConfirmationListFooter (IOU confirm page) too, not only in MoneyRequestView.

App/src/components/ReceiptEmptyState.tsx

Line 52 in 6871ba9

isInMoneyRequestView && styles.expenseViewImage,

shouldUseAspectRatio && isSmallScreenWidth ? styles.expenseViewImageSmall : styles.expenseViewImage

Then, pass shouldUseAspectRatio for both ReceiptEmptyState in MoneyRequestView and MoneyRequestConfirmationListFooter.

Since small screen breakpoint is 800, it can appears very large. If needed, we can still keep the max width for small screen, but increase the value.

Or we can apply this to native platforms only.

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

N/A

[DylanDylann]

@NicMendonca Could you please assign me as C+ reviewer on this issue? Because this is a follow-up from my previous PR

cc @shawnborton

[melvin-bot]

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

[melvin-bot]

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