Big images render in very low resolution on Android devices

Hello guys, I’m having a problem rendering big images on Android. For big, I mean images with a very big height (around 15000 pixels of height. Width is around 800 pixels).

On iOS, everything works fine, but on Android, the image gets rendered in a very low quality.

Here’s a snack showing that. I put the image inside a ScrollView so you can scroll it till the end.

On the Snack, you can see that on the iOS simulator, the image is fine, but on the Android simulator, the problem happens.

Snack showing the problem: Snack Source Code

The size of the file is 1.4 MB. The problem is the height, not the file size. If I render an even bigger file size image that has a regular height (for example 800x800), the problem doesn’t occur.

I also tried caching the image, but it doesn’t change anything. The only way I got it to work is if I split the images in chunks of height = 1000. Then, they show fine on Android. But since I have many images like this, I wanted to show the image without having to slice it.

I also tried changing resizeMethod and resizeMode, but that doesn’t help as well.

Any help on how to address this issue? There are other libs for images on React Native, but since I’m using expo, I don’t want to detach it, so I didn’t find many other things I could do!

iOS simulator:

Android simulator:

Thanks a lot!

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.