[$2000] Large image doesn't zoom well in Android and gets blurry

[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!

---

Action Performed:

1. Go to any chat and upload a very long/large image. Example image
2. In the Attachment preview, tap the image to zoom
3. Keep zooming until you'll see that the image is blurry

Expected Result:

Image should zoom to show a clear image instead of a blurry one

Actual Result:

Image content is not visible, and it is blurry.

Workaround:

unknown

Platform:

Where is this issue occurring?

• Android

Version Number: 1.2.29-6
Reproducible in staging?: Y
Reproducible in production?: Y
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos:

az_recorder_20221121_114833.1.mp4

android-image-blurry.mov

Expensify/Expensify Issue URL:
Issue reported by: @mananjadhav
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1668928921788569

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0100609c253c2769f4
• Upwork Job ID: 1597637165026803712
• Last Price Increase: 2022-12-08

[melvin-bot]

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

[aldo-expensify]

I remember this same images was causing this a long time ago: #5193

I wonder if it ever got fixed and if this is a regression.

[mananjadhav]

@aldo-expensify I mentioned this in the slack too, it is a regression. I had tested this earlier and it did work at some point when working on another issue.

[melvin-bot]

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

[tjferriss]

I don't have an Android device. How would you suggest reproducing the bug?

[mananjadhav]

@tjferriss do you have an Android emulator or say Browserstack login? You can then reproduce this. This occurs only on Android. Second video on the issue body is from my Android device.

[aldo-expensify]

Maybe this will get fixed once the PR #12648 gets re-done and we use fast-image.. maybe

[mananjadhav]

Well I tested this when #12648 was worked upon and it wasn't resolved. In fact I found this issue, while testing the same PR. We can still put this on hold, and come back again if you think that's the best option.

[aldo-expensify]

come back again if you think that's the best option.

No, given that you already saw that this doesn't get fixed, ignore my previous comment :P

[aldo-expensify]

Reproduced:

Web	Android

[tjferriss]

Thank you @aldo-expensify. This looks ready to go so I'm going to add the External tag.

[melvin-bot]

Current assignee @tjferriss is eligible for the External assigner, not assigning anyone new.

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[markarmanus]

It seems that this is a common issue on android only

here is a few links of people complaining about it.

https://stackoverflow.com/questions/53402308/react-native-0-57-x-image-large-images-low-quality

facebook/react-native#10470

You can consider it a Fresco problem or a react native problem, but regardless the solution is not feasable for a ticket of this size.

I spent the last 5 hours debugging this
I hope my explanation helped !

[aldo-expensify]

Thanks @markarmanus

I was also having a look, what you said matches with explanation on what was happening when it was fixed in the past: #5193 (comment)

Here is the PR that was done to fix it: #6442

Haven't looked further into why now it is not working, but I'm leaving the links here in case they are of use to someone.

[markarmanus]

Proposal

Problem:

The issue is happening on android, when you render an image that the original resolution is massive but you render it with a smaller resolution

Example:

// original image is 14500x3000
<Image style={{width: 300, height: 300, }} resize="contain" />

On IOS this image is going to stay at the original resolution when zooming in.

On Android the image gets downscaled to the resolution sepefied to the component so that results in a blury picture on zoom in.

As i stated above this is a recurring issue in the react native community. There is currently no solution for the issue.

I was able to create a solution. its somewhat hacky but it works.
When rendering the image we render the image in its full resolution. then create a container of the image that scales it down to fit the screen.

Here is how to achieve this.

const imageTransformScale = Math.min(containerHeight / imageHeight, containerWidth / imageWidth);
this.setState({imageHeight, imageWidth, imageTransformScale});
// calculate a imageTransformScale

We also git rid of this code which is attempting to make the resolution the size of the screen.

const aspectRatio = Math.min(containerHeight / imageHeight, containerWidth / imageWidth);

if (imageHeight > imageWidth) {
       imageHeight *= aspectRatio;
} else {
       imageWidth *= aspectRatio;
}

Then Contain the image in a view that uses that scale

<View style={{transform: [{scale: this.state.imageTransformScale}]}}>
     <ImageZoom
         ...
     </ImageZoom>
</View>

We also need to extend ImageZoom with these props

cropWidth={this.props.windowWidth / this.state.imageTransformScale}
cropHeight={this.state.containerHeight / this.state.imageTransformScale}

Here is the result in screen shots.

Behaves exactly the same on ios

The final solution includes a few other line changes but this is mostly it.

[tjferriss]

@marcaaron and @mananjadhav what do we think of @markarmanus proposal?

[mananjadhav]

I am not 100% convinced with @markarmanus's proposal.

When rendering the image we render the image in its full resolution. then create a container of the image that scales it down to fit the screen.

Also I didn't understand this statement. @markarmanus if you check this earlier, it was solved and it worked fine. I think with multiple refactors to the image component, we've lost/remove the change.

[cristipaval]

Not overdue, @ArekChr is going to open an App PR soon.

[cristipaval]

We have our fork ready, we now have to add it to the App. @ArekChr is working on it. We're facing some challenges when building the App with the fork. We'll ask for the team's help if we don't figure it out soon.

[mananjadhav]

I should be free by tomorrow or day after. Do let me know if I can help in anyway for building the App with the fork.

[cristipaval]

We just got past that thing. PR is going to be ready soon, @ArekChr is taking screen recordings now.

[ArekChr]

There is a blocker to finish QA checklist tests for mWeb safari and chrome #2499

[MelvinBot]

This issue has not been updated in over 15 days. @mananjadhav, @tjferriss, @cristipaval, @ArekChr eroding to Monthly issue.

P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!

[cristipaval]

Closing this one, as the fix hit production a few weeks ago.

[mananjadhav]

@cristipaval @tjferriss I did the C+ review and testing on this one. Payout is pending for that .

[cristipaval]

@cristipaval @tjferriss I did the C+ review and testing on this one. Payout is pending for that .

Oh sorry, I missed that! @tjferriss , should we re-open this one and add Awaiting Payment label?

[tjferriss]

@mananjadhav I've sent you a request via Upworks here: https://www.upwork.com/jobs/~01ae27c2191acb5934. I also included the reporting bonus in the amount.

[mananjadhav]

Accepted @tjferriss

[tjferriss]

The payment has been sent.