[$1000] [HOLD for payment 2023-08-28] [HOLD for payment 2023-08-16] Find solution to low resolution large images on Android, and the Canvas crash

[Julesssss]

Problem

While attempting to solve an issue with low-quality Android images, we disabled hardware acceleration and introduced a major performance regression.

@terrysahaidak noticed this while running performance testing and outlined a plan for re-enabling and trying an alternative fix.

Solution

• Revert the PR for an immediate performance gain
• Investigate the possibility of disabling hardware acceleration for images
• Figure our our long term solution: Either accept lower quality images, or find an alternative

Example big image

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01fe4797a997c161ea
• Upwork Job ID: 1696867422937661440
• Last Price Increase: 2023-08-30

[mountiny]

cc @fabioh8010 @ArekChr

[ArekChr]

Hi, I'm working on an image transform that will allow the display of large images that will allow re-enabling hardware acceleration in this PR

[Julesssss]

Awesome, look forward to this @ArekChr 👍

[Julesssss]

My first step is to revert the original PR, which I'll do this afternoon after finishing higher priority work.

[terrysahaidak]

@ArekChr I also looking into this, and i found that if we render the image as is with fast image and use scale it down with transform we can get pretty decent performance. I used Reanimated zoom component, fast image (our Image component) and just use scale as scale.value * 0.1:

gallery_long_image_test.mov

[Julesssss]

First step was taken here: revert the PR that disabled hardware acceleration

[ArekChr]

@terrysahaidak looks like downscale is working great in your example 👌 What was the reason for changing zoom-in to the custom reanimated component? Asking because I have some issues with displaying large images with my changes in react-native-fast-image I can't get it working well with react-native-image-pan-zoom