EReceipt thumbnail is being cut off at the bottom.

[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.80-6
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: @jayeshmangwani
Slack conversation (hyperlinked to channel name): expensify_bugs

Action Performed:

1. Press the FAB button.
2. Select Create Expense.
3. Tap Scan and choose a file.
4. Upload an invalid image file (example provided below).
5. Select any recipient.
6. Observe the default thumbnail for the receipt.

Expected Result:

EReceipt thumbnail should be fully visible with rounded corners.

Actual Result:

EReceipt thumbnail is partially cut off at the bottom.

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

Screen.Recording.2025-01-03.at.2.51.19.AM.mov

Example image for which Issue can be reproduced

View all open jobs on GitHub

[melvin-bot]

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

[jayeshmangwani]

Proposal

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

EReceipt thumbnail is being cut off at the bottom.

What is the root cause of that problem?

The ReceiptImage component is used to display receipts. When either isThumbnail or isEReceipt is true,

App/src/components/ReceiptImage.tsx

Lines 130 to 134 in 41c38e3

	if (isEReceipt || isThumbnail) {
	const props = isThumbnail && {borderRadius: style?.borderRadius, fileExtension, isReceiptThumbnail: true};
	return (
	<View style={style ?? [styles.w100, styles.h100]}>
	<EReceiptThumbnail

we render the EReceiptThumbnail component. However, the overflow: hidden styling applied to the EReceiptThumbnail is causing the thumbnail to get cut off at the bottom.

App/src/components/EReceiptThumbnail.tsx

Lines 100 to 104 in 41c38e3

	return (
	<View
	style={[
	styles.flex1,
	primaryColor ? StyleUtils.getBackgroundColorStyle(primaryColor) : {},

In the MoneyRequestConfirmationListFooter, the parent View of ReceiptImage is assigned a height of 200, while the ReceiptImage component itself has a total height of 164. This mismatch results in the bottom 36 height being cut off due to the overflow: hidden property.

App/src/components/MoneyRequestConfirmationListFooter.tsx

Lines 679 to 681 in 41c38e3

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

App/src/styles/index.ts

Lines 4458 to 4460 in 41c38e3

	moneyRequestImage: {
	height: 200,
	borderRadius: 16,

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

Pass flex: 1 to the parent component (PressableWithoutFocus) of ReceiptImage.

This ensures the child ReceiptImage will occupy the full height of the parent component (200).
It resolves the overflow issue without impacting other styles.

App/src/components/MoneyRequestConfirmationListFooter.tsx

Lines 711 to 714 in 41c38e3

	disabledStyle={styles.cursorDefault}
	>
	<ReceiptImage
	isThumbnail={isThumbnail}

+ style={styles.flex1}

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

I believe automated tests aren't useful for purely UI mismatching issues/bugs.

What alternative solutions did you explore? (Optional)

Solution 2:
Remove the overflow: hidden style from the EReceiptThumbnail component entirely.

• initially overflow: hidden was added on this PR [NoQA] [Wave 8 - ECard Transactions] Create eReceiptThumbnail and eReceipt components #29075, not sure why it was added but when I was testing, shows that the ReceiptImage and EReceiptThumbnail UI works as expected without overflow style.

Alternative to Solution 2:
If removing the overflow: hidden property from EReceiptThumbnail poses a risk of regression, we can limit its use specifically to the EReceiptThumbnail within the EReceipt component. To achieve this, we can create a new style prop for ReceiptImage and apply overflow: hidden conditionally in the EReceipt component. This approach ensures no unintended side effects on ReceiptImage while preserving the existing styling logic.

[melvin-bot]

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