[$500] Android- Attachment - Image clicked from Whatsapp zoomed too much in preview

[kbecciv]

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. Click and send a image to any user in Whatsapp
2. Open any report
3. Send image clicked from Whatsapp as attachment
4. Observe the how much is the image zoomed

Expected Result:

The image preview should be displayed properly.

Actual Result:

The image preview is zoomed too much.

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: 1.3.57.5
Reproducible in staging?: n/a
Reproducible in production?: n/a
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
Notes/Photos/Videos: Any additional supporting documentation

WhatsApp.Video.2023-08-19.at.18.35.52.1.mp4

Expensify/Expensify Issue URL:
Issue reported by: krishna2323
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1692464365619889

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0170c628d9805f4ad5
• Upwork Job ID: 1701870392946663424
• Last Price Increase: 2023-09-20

[melvin-bot]

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

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[Krishna2323]

Proposal

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

Android- Attachment - Image clicked from Whatsapp zoomed too much in preview

What is the root cause of that problem?

The issue is predominantly observed with photos taken using the WhatsApp camera on Android when rendered in the React Native app. This suggests that there might be unique attributes or peculiarities associated with these images, such as their format, metadata, or encoding differences. Additionally, given the platform specificity of the problem, there are likely platform-specific behaviors or quirks in React Native's image handling on Android that exacerbate the issue, especially when combined with the nuances of images from the WhatsApp camera.

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

Option 1

To address the unusual rendering behavior observed with images taken from the WhatsApp camera on Android, I recommend employing a dynamic resizing strategy based on the image's load state.

App/src/components/ImageWithSizeCalculation.js

Line 78 in 7d1f5c6

resizeMode={Image.resizeMode.cover}

The solution involves setting the resizeMode property of the React Native Image component as:
resizeMode={isLoadedRef.current ? Image.resizeMode.contain : Image.resizeMode.cover}

This approach ensures that once the image has finished loading , it will display using the contain mode. The contain mode scales the image to fit within its container dimensions, guaranteeing the entire image is visible without distortion or cropping. Given that the container's dimensions are already set, leveraging contain will yield consistent and predictable rendering across different images and scenarios. In contrast, during the loading phase or if the image isn't cached, the cover mode is employed to fill the container's bounds, which can be a suitable placeholder behavior.

Option 2

We can also create a state variable to track if the image size is calculated or not and based on that we can set renderSize="contain"

Result

fixed_demo.mp4

[melvin-bot]

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

[Krishna2323]

I can reproduce with these images also, these are clicked from Whatsapp but downloaded from Expensify.

https://github.com/Expensify/App/assets/85894871/2a4678d0-80fe-45bd-87d3-c1af570d1ac6
https://github.com/Expensify/App/assets/85894871/5830d047-1ccf-4d77-a080-675aacf1a2fa

[melvin-bot]

@JmillsExpensify 6 days overdue. This is scarier than being forced to listen to Vogon poetry!

[JmillsExpensify]

Hmm, I agree that we should treat copied images, and just as importantly, we should show cropped images equivalently. Though for clarity, is this only the case for WhatsApp images or can you reproduce more generally. If WhatsApp only, I don't think that counts as a bug, as it's just one app (sure a very popular one). If this is possible more generally for all images, I think we should address

[Krishna2323]

@JmillsExpensify, I will try to reproduce it in other cases as well but IMO this should be valid bug because:

1. Even after downloading the zoomed image from Expensify and sharing downloaded image to any report, the image is zoomed.
2. The sender and the receiver both gets zoomed attachments.
3. it only happens in android.

For testing you can download these images, it is downloaded from Expensify.

Pls check my proposal result demo.

[melvin-bot]

@JmillsExpensify this issue was created 2 weeks ago. Are we close to a solution? Let's make sure we're treating this as a top priority. Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[melvin-bot]

@JmillsExpensify this issue was created 2 weeks ago. Are we close to a solution? Let's make sure we're treating this as a top priority. Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[melvin-bot]

@JmillsExpensify Eep! 4 days overdue now. Issues have feelings too...

[JmillsExpensify]

I'll add the external label to see what C+ thinks about this report.

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[JmillsExpensify]

Do we know which agency is interested in picking this up?

[melvin-bot]

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

[situchan]

Maybe callstack

[Krishna2323]

@situchan, Could you please take a look at this issue? It has been open since 2016 in react-native repo, and there is only a workaround that works, very similar to our issue. I believe we can add the workaround I suggested, as it is a very minor change that only adds a key prop and triggers a re-render once we change the width and height.

[situchan]

If it's old RN issue, I was fine to apply workaround. But this obviously came from react-native-fast-image

[Krishna2323]

I'll check again. I've seen in react-native-fast-image GH issue that they mentioned it as an upstream issue in react-native.

[JmillsExpensify]

Still discussing

[JmillsExpensify]

Same

[JmillsExpensify]

Same

[Krishna2323]

@JmillsExpensify @situchan, we can assign someone else from callstack if we don't want to add a key prop as suggested in my proposal because I have spent enough time on this and couldn't find any better solution.

[Krishna2323]

DylanVann/react-native-fast-image#762, this is a similar issue related to re-rendering and only solution they found is to switch to native images or add a key prop.

[situchan]

@Krishna2323 we're no longer using react-native-fast-image but expo-image

[Krishna2323]

Maybe, then, the issue should be resolved already. will check

[situchan]

@Krishna2323 did you check already?

[Krishna2323]

@situchan, yes the issue has been resolved.

[situchan]

ok so it's 100% issue from react-native-fast-image package.

@JmillsExpensify let's close