[HOLD for payment 2024-02-20] [$500] EReceipt - Center icon in preview moves or changes in size when switching pages

[kavimuru]

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: 1.4.24-0
Reproducible in staging?: y
Reproducible in production?: y
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: Applause internal team
Slack conversation:

Action Performed:

1. Log in to account with Expensify Card transaction (tester@applausecard.expensifail.com
   ).
2. Go to the workspace chat with the transactin (https://staging.new.expensify.com/r/4612388815642526
   ).
3. Click on the preview.
4. Go back and forth between the main chat, expense report and expense details page.

Expected Result:

The center icon in EReceipt preview should be constant.

Actual Result:

The center icon in EReceipt preview moves or changes in size when navigating between the main chat, expense report and details page.

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

Bug6338570_1704956963925.bandicam_2024-01-11_11-29-45-109__1_.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01944364ac91b42b3d
• Upwork Job ID: 1745349261195689984
• Last Price Increase: 2024-01-25
• Automatic offers:
• jjcoffee | Reviewer | 28128931

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @joekaufmanexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

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

[dukenv0307]

Proposal

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

The center icon in EReceipt preview moves or changes in size when navigating between the main chat, expense report and details page.

What is the root cause of that problem?

After onLayout of the wrap view is triggered, we recalculate the size of icon which makes the icon moves and changes

App/src/components/EReceiptThumbnail.tsx

Line 53 in f9405ba

setContainerWidth(width);

App/src/components/EReceiptThumbnail.tsx

Line 95 in f9405ba

<View style={[StyleUtils.getWidthAndHeightStyle(receiptIconWidth, receiptIconHeight), styles.alignItemsCenter, styles.justifyContentCenter]}>

App/src/components/EReceiptThumbnail.tsx

Line 69 in f9405ba

receiptIconWidth = variables.eReceiptIconWidthSmall;

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

We should display the loading indicator until onLayout is complete like this

{containerWidth !== 0 ? (
   // icon here
) : (
    <ActivityIndicator 
        color={theme.spinner}
        style={[styles.flex1]}
        size="large"
    />
)}

What alternative solutions did you explore? (Optional)

NA

Result

[dragnoir]

Proposal

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

The icon of E-Receipt change dimention when component re-render

What is the root cause of that problem?

We have here two setState

App/src/components/EReceiptThumbnail.tsx

Lines 53 to 54 in fd45dea

	setContainerWidth(width);
	setContainerHeight(height);

eash of those 2 states are responsible for calculating the size of the e-receipt icon. And those values are from the onLayout of the container View

App/src/components/EReceiptThumbnail.tsx

Lines 79 to 87 in fd45dea

	<View
	style={[
	styles.flex1,
	primaryColor ? StyleUtils.getBackgroundColorStyle(primaryColor) : {},
	styles.overflowHidden,
	styles.alignItemsCenter,
	containerHeight && containerHeight < variables.eReceiptThumnailCenterReceiptBreakpoint ? styles.justifyContentCenter : {},
	]}
	onLayout={onContainerLayout}

The issue is that onLayout give the correct values to the state once the page is rendered and it's a few seconds late, wish cause the delay on the screen. The icon start a bit big then became smaller.

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

The solution is providing those values from parent components and removing the use of setState.

1- the value of containerHeight is used here

App/src/components/EReceiptThumbnail.tsx

Line 85 in fd45dea

containerHeight && containerHeight < variables.eReceiptThumnailCenterReceiptBreakpoint ? styles.justifyContentCenter : {},

But we don't need a condition to center the icon, so this line will became:

<View  style={[StyleUtils.getWidthAndHeightStyle(receiptIconWidth, receiptIconHeight), styles.alignItemsCenter, styles.justifyContentCenter]}>

We don't need the condition below, we will always use justifyContentCenter what ever the icon size.

containerHeight < variables.eReceiptThumnailCenterReceiptBreakpoint ? styles.justifyContentCenter : {}

2- The value of containerWidth is used to determine if we will use a small icon or a medium one:

App/src/components/EReceiptThumbnail.tsx

Lines 61 to 62 in fd45dea

	const isSmall = containerWidth && containerWidth < variables.eReceiptThumbnailSmallBreakpoint;
	const isMedium = containerWidth && containerWidth < variables.eReceiptThumbnailMediumBreakpoint;

App/src/components/EReceiptThumbnail.tsx

Lines 68 to 75 in fd45dea

	if (isSmall) {
	receiptIconWidth = variables.eReceiptIconWidthSmall;
	receiptIconHeight = variables.eReceiptIconHeightSmall;
	receiptMCCSize = variables.eReceiptMCCHeightWidthSmall;
	} else if (isMedium) {
	receiptIconWidth = variables.eReceiptIconWidthMedium;
	receiptIconHeight = variables.eReceiptIconHeightMedium;
	receiptMCCSize = variables.eReceiptMCCHeightWidthMedium;

so the logic is like this:
if the width of the container is < 110px, eReceiptThumbnailSmallBreakpoint is equal to 110. Then we use a small icon, if not we use the medium one.
The width is 110 when we render 3 images/icons.

But we already now this value from the parent component ReportActionItemImages

App/src/components/ReportActionItem/ReportActionItemImages.js

Line 59 in fd45dea

const numberOfShownImages = Math.min(size || images.length, images.length);

The container of the e-receipt icon will be 110 or less if we will render 3 images/icons.

We can pass this value numberOfShownImages to EReceiptThumbnail and replase the setSate value.

const  isSmall  =  numberOfShownImages  &&  numberOfShownImages  >  2;
const  isMedium  =  numberOfShownImages  &&  numberOfShownImages  <=  2;

With this solution, we will not need the onLayout and the setState that are causing delays on the screen rendering.

Branch for testing: https://github.com/dragnoir/App/tree/34316-mos-fix

POC:

18.mp4

What alternative solutions did you explore?

1- Add props to EReceiptThumbnail

<EReeiptThumbnail transactionID={transactionID} 
+ centerIconV 
+ iconSize
/>

Where centerIconV is for centering the icon vertically
and iconSize to display medium or small icon where large is default.

2- Remove the calculation of the width and height inside EReceiptThumbnail (causing the delay), where the purpose

• calculating widht to know small or middle icon to use (will be replaced by new prop useSmallIcon true/false)
• calculating height to know if we need to center the icon vertically (will be replaced by new prop iconSize)

3- Assign values to those new props from parent components.