[$1000] Attachments- App crashes when user navigate attachments

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:

Launch app
Tap on any report
Tap plus button to add few image/attachments
Tap on a image
Use side arrow to navigate and view attachments

Expected Result:

When user navigate attachments using side arrows, he must be able to view all attachments without problem

Actual Result:

When user navigate attachments using side arrows, the app crashes while trying to view below attached images

Workaround:

Unknown

Platforms:

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

Version Number: 1.3.52.1

Reproducible in staging?: Yes

Reproducible in production?: No

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

Bug6159108_deploy.mp4

Expensify/Expensify Issue URL:

Issue reported by: Applause - Internal Team

Slack conversation:

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~01938fb39d08874250
Upwork Job ID: 1712662082191142912
Last Price Increase: 2023-11-27

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open StagingDeployCash deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

Identify the pull request that introduced this issue and revert it.
Find someone who can quickly fix the issue.
Fix the issue yourself.

@Li357

Triggered auto assignment to @Li357 (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

@lanitochka17

@lanitochka17 is this an android-only issue? I'm not able to reproduce it on iOS.

I am also unable to reproduce this issue. Can we get more specifics on the environment like the version of Android being tested on? Also, if we could get the exact same set of images used to test, that may prove to be helpful. Thanks.

Hey, it might be related to this issue.

Your workspace name contains HTML characters (&), which is also the cause of the mentioned issue. More details in my proposal.

Can you try to reproduce it on a new workspace, with a name without any special characters?

Hey, it might be related to this issue.

Your workspace name contains HTML characters (&), which is also the cause of the mentioned issue. More details in my proposal.

Can you try to reproduce it on a new workspace, with a name without any special characters?

If so, it should be reproducible on production as well and not deploy blocker.

Hey, it might be related to this issue.
Your workspace name contains HTML characters (&), which is also the cause of the mentioned issue. More details in my proposal.
Can you try to reproduce it on a new workspace, with a name without any special characters?

If so, it should be reproducible on production as well and not deploy blocker.

You are right. It was just a guess. I'm sorry for the confusion.

Can't reproduce on iOS and Android either. I'm going to close this out for now, if you can provide extra details that would be great!

@Li357

@Li357 Issue is still reproducible on Android
I have added an attachment that is causing the app to crash and there is one attachment that needs to be added that is larger than 10MB

Screen_Recording_20230921_135617_New.Expensify.mp4

Upwork job price has been updated to $1000

Bounty increased, I think this is valuable to work on because images get to this size pretty easily

@ArekChr

I spent some time trying to figure this out and was finally able to reproduce (you have to test with the attached image in #24337 (comment)). The crash is due to an out of memory error due to the number of pixels in the image, I think it's some insanely huge number (9000x9000, iirc but it may be higher). The solution would probably be to try to scale the image down before displaying it.

@ArekChr was working on a PR in react-native-fast-image a few months ago, which should fix this problem by downsampling images.

@ArekChr do you fix your PR could fix this problem and what's the status on the PR? :)

Issue not reproducible during KI retests. (First week)

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

This was proposed as solution with 31204 that can fix crash with reproducible image attached

Proposal

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

App crashes after attempting to view a large uploaded image attachment that is beyond the size supported for the device.

What is the root cause of that problem?

The image size (below), which is 7724 x 5148, is too large for the rendering on the screen.
This causes the app to crash with the following in logcat on Android:

 Canvas: trying to draw too large(159052608bytes) bitmap.

This image is too large for the container it is being rendered on the device.

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

Make sure the image height and size are not out of bounds (for the canvas size) what is supported by the device display within AttachmentCarouselPage

Within AttachmentCarouselPage, the components' onLoad should size dimensions similar to existing approach in ImageView. This component is used for the initial image preview during adding the attachment:

  // Resize the image to max dimensions possible on the Native platforms to prevent crashes on Android. To keep the same behavior, apply to IOS as well.
        const maxDimensionsScale = 11;
        imageZoomWidth = Math.min(imageZoomWidth, roundedContainerWidth * maxDimensionsScale);
        imageZoomHeight = Math.min(imageZoomHeight, roundedContainerHeight * maxDimensionsScale);

The solution is to adjust the imageHeight and imageWidth calculation within the onLoad events in [AttachmentCarouselPage](https://github.com/Expensify/App/blob/5e7022d8cc519ab8787aa0e0d70d5692c6c27945/src/components/Attachments/AttachmentCarousel/Pager/AttachmentCarouselPage.js( with similar approach as ImageView. AttachmentCarouselPage to ensure the maximum dimensions are not too large for the canvas:

imageWidth = Math.min(imageWidth, canvasWidth * maxDimensionsScale);
imageHeight = Math.min(imageHeight, canvasHeight * maxDimensionsScale);

What alternative solutions did you explore? (Optional)

Additionally, if there are an intended maximum dimensions for general image attachments this validation can be added before the image is uploaded. (personally don't like this solution unless there is a different need to scale down images)

In AttachmentPicker, we can add a function to check the size dimensions for an image (can check by height, width, and overall size):

isValidResolution(image) {
        return getImageResolution(image).then(
            (resolution) =>
                resolution.height >= CONST.ATTACHMENT_MIN_HEIGHT_PX &&
                resolution.width >= CONST.ATTACHMENT_WIDTH_PX &&
                resolution.height <= CONST.ATTACHMENT_MAX_HEIGHT_PX &&
                resolution.width <= CONST.ATTACHMENT_MAX_WIDTH_PX,
        );
    }

For native Android/iOS, we can also configure react-native-image-picker to automatically resize the image:

maxWidth
maxHeight

For informing the user, a similar message could be displayed (if it is not desirable to automatically resize) as with the Avatar image upload

@giltron

@giltron There should be no need for this change anymore. We're completely overhauling the native ImageView component with a new MultiGestureCanvas/Lightbox component in this PR.

The crash with large images has also been fixed by a patch: #28159 (comment)

cc @akinwale @Li357 @mvtglobally

Issue not reproducible during KI retests. (Second week)

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

@chrispader

Awesome @chrispader! I'll close this out then!

Navigation Menu

Repository navigation

[$1000] Attachments- App crashes when user navigate attachments #24337

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

56 remaining items

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[$1000] Attachments- App crashes when user navigate attachments #24337

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Activity

OSBotify commented on Aug 9, 2023

melvin-bot commented on Aug 9, 2023

puneetlath commented on Aug 9, 2023

akinwale commented on Aug 10, 2023

kosmydel commented on Aug 10, 2023

aimane-chnaif commented on Aug 10, 2023

kosmydel commented on Aug 10, 2023

Li357 commented on Aug 10, 2023

lanitochka17 commented on Sep 21, 2023

56 remaining items

melvin-bot commented on Nov 13, 2023

Li357 commented on Nov 13, 2023

chrispader commented on Nov 15, 2023

mvtglobally commented on Nov 18, 2023

melvin-bot commented on Nov 20, 2023

giltron commented on Nov 20, 2023

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

chrispader commented on Nov 21, 2023

mvtglobally commented on Nov 23, 2023

melvin-bot commented on Nov 27, 2023

Li357 commented on Nov 27, 2023

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions