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

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

---

Action Performed:

1. Launch app
2. Tap on any report
3. Tap plus button to add few image/attachments
4. Tap on a image
5. 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?

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

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

[OSBotify]

👋 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:

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

[melvin-bot]

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

[puneetlath]

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

[akinwale]

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.

[kosmydel]

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?

[aimane-chnaif]

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.

[kosmydel]

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.

[Li357]

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!

[lanitochka17]

@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

[GabiHExpensify]

This issue hasn't been commented on in two weeks, should it still be labeled an hourly? If it's something that can go two weeks without progress without many consequences, then hourly seems like overkill. And if it's something that needs to be fixed within the next hour, then could you comment on progress @Li357? thanks!

[GabiHExpensify]

Sounds like this is no longer a deploy blocker, so I'm updating it to a daily.

[Li357]

Going to look into this tomorrow. I hadn't gotten to this because I had some wave 8 things to prioritize and hadn't been able to build Android for the past few days. Will reprioritize!

[melvin-bot]

@Li357 Whoops! This issue is 2 days overdue. Let's get this updated quick!

[Li357]

Fighting android emulator issues, but testing this now.

[akinwale]

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.

[melvin-bot]

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

[Li357]

Adjusting the bounty

[paultsimura]

@Li357 please check this comment: #24337 (comment)

[melvin-bot]

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

[Li357]

@paultsimura Do you think this issue will get absorbed by those? This instability would require some extra code to show thumbnails instead of the full image

[paultsimura]

@Li357 my bad, I wasn't attentive enough to the discussion above. There just was a storm of "Attachments are crashing" dupe issues at the time I posted my initial comment. For this specific scenario, I don't think the linked issues will help.

[melvin-bot]

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

[melvin-bot]

Upwork job price has been updated to $1000

[Li357]

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

[chrispader]

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? :)

[mvtglobally]

Issue not reproducible during KI retests. (First week)

[melvin-bot]

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

[giltron]

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

[chrispader]

@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

[mvtglobally]

Issue not reproducible during KI retests. (Second week)

[melvin-bot]

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

[Li357]

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