'Why large images are blur (or downsampled) using React Native <Image/>?

My app needs to display images from the web, basic stuff right? But I found large images are terribly downsampled. Here are some screenshots:

Android, resize mode: contain (left), cover (right)

iOS, resize mode: contain (left), cover (right)

The image is a 292KB 435×7225 png, I had the same issue with smaller images as well.

On iOS, images are displayed correctly when resize mode is not contain. On Android, it's always bad regardless of resize mode.

Problem happens in both simulators and devices.

I checked the downloaded image in the image cache directory in device internal storage, it's the full size file, so I think the downsampling happened during rendering.

I also tried react-native-fast-image, same issue happened on Android, didn't test iOS though.

The code I used for testing, basic stuff, nothing complex.

<Image
    style={{
      flex: 1
    }}
    containerStyles={{
      backgroundColor: 'red'
    }}
    resizeMode={'contain'}
    source={{ uri: 'https://i.imgur.com/Er0ulHk.png' }}
/>

Since it's such a basic use case, I'm guessing it must be something stupid I did (or forgot doing), but can't find any clues.

react-native

Solution 1:^[1]

I ended up using webview as it displays images as is.

<WebView source={{ html: `<img src=${image_url} style="width: 100%;" />` }} />

It works for my usecase.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	ramkumar2098

'Why large images are blur (or downsampled) using React Native <Image/>?

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]