[HOLD for payment 2024-06-13] [$250] Android - Receipt - Receipt view is inconsistent in mweb&Android

[lanitochka17]

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.64
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/4504759
**Issue reported by:**Applause - Internal Team

Action Performed:

1. Go to https://staging.new.expensify.com/home
   / launch app
2. Tap on Workspace chat
3. Tap plus icon -- submit expense
4. Submit an expense with below receipt attached
5. Open the expense and tap on the receipt

Expected Result:

Receipt view must not be inconsistent in mweb and Android

Actual Result:

Receipt is shown smaller in mweb and bigger in Android

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

Bug6458565_1713864324858.revghj.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01a54a18910078b715
• Upwork Job ID: 1783190710289416192
• Last Price Increase: 2024-05-08
• Automatic offers:
• samilabud | Contributor | 0

Issue Owner

Current Issue Owner: @CortneyOfstad

[melvin-bot]

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

[lanitochka17]

@CortneyOfstad 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/~01a54a18910078b715

[melvin-bot]

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

[samilabud]

Proposal

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

Android receipts are displayed as the same size of the canvas size

What is the root cause of that problem?

We are using the MultigestureCanvas to display the image/receipt, this component always try to fit the image to the content, this works perfectly for image that are bigger than the canvas size but when the image is lower than the canvas we can notice this issue. This is because we are getting the min scale of the image like below:

App/src/components/MultiGestureCanvas/utils.ts

Lines 5 to 13 in abf9f8d

	const getCanvasFitScale: GetCanvasFitScale = ({canvasSize, contentSize}) => {
	const scaleX = canvasSize.width / contentSize.width;
	const scaleY = canvasSize.height / contentSize.height;
	const minScale = Math.min(scaleX, scaleY);
	const maxScale = Math.max(scaleX, scaleY);
	return {scaleX, scaleY, minScale, maxScale};
	};

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

We should verify if we need to use the scale to fit the canvas size before we try to fit the image in getCanvasFitScale, and if the image not need to be resized we should use the same image size like:

type ShouldResizeToFit = (canvasSize: CanvasSize, contentSize: ContentSize) => boolean;
type GetCanvasFitScale = (props: {canvasSize: CanvasSize; contentSize: ContentSize}) => {scaleX: number; scaleY: number; minScale: number; maxScale: number};

const shouldResizeToFit: ShouldResizeToFit = (canvasSize, contentSize) => {
    // If the image is smaller than canvas should no fit to canvas scale
    if (canvasSize && contentSize) {
        return canvasSize.width < contentSize.width || canvasSize.height < contentSize.height;
    }
    return false;
};

const getCanvasFitScale: GetCanvasFitScale = ({canvasSize, contentSize}) => {
    const shouldResize = shouldResizeToFit(canvasSize, contentSize);

    const scaleX = canvasSize.width / contentSize.width;
    const scaleY = canvasSize.height / contentSize.height;

    const minScale = !shouldResize ? 1 : Math.min(scaleX, scaleY);
    const maxScale = Math.max(scaleX, scaleY);

    return {scaleX, scaleY, minScale, maxScale};
};

Testing the change:

Android.-.Receipt.-.Receipt.view.is.inconsistent.-.test.mov

[CortneyOfstad]

@eVoloshchak any thoughts on the proposal above?