React Native png image is pixelated and not hd

Question

I'm trying to display a png icon in my React Native app, on Android for now, using the below code

<Image
  style={styles.wtrhIcon}
  source={{uri: "clearmoon"}}/>

and the style for it

wtrhIcon: {
width: 96,
height: 96,
}

This is how it's being rendered

The big moon seems to be pixelated and doesn't show in hd. The actual png image is 96x96, the exact width and height defined in the style for it.

I have all the png images in android/app/src/main/res/(drawable, drawable-xhdpi, mipmap-hdpi, mipmap-mdpi, mipamp-xhdpi, mipmap-xxhdpi) and i experience the same issue no matter which 96x96 image i chose.

The smaller icons at the bottom seem to be displayed in hd form, i'm guessing because the size is a lot smaller.

So my question is, why is the big image pixelated when the witdh and height defined for it are the same as the actual png image?

Solution 1

The actual png image is 96x96,

That's 96 x 96 pixels.

the exact width and height defined in the style for it.

That's 96 x 96 size units. These units can be a lot larger than an actual physical screen pixel (in this case 4 times as large) and depend on the pixel density of the screen. See the answer to this question for more information.

If you measure the actual size of the moon in that image, it's around 375 x 375 pixels. It's being scaled up by a factor of 4 so it looks blurry. You just need to use larger images.

Solution 2

The germane way which i follow is :

It seems you are using the large image and trying to use it as a small image, what should be done is:

add resizeMode: 'contain' and flex: 1 in image style object.

The resizeMode: 'contain' helps in Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding).

Cheers :)

Comments

[Andrew Li]

Is the actual PNG blurry?

[Admin]

Okay, that makes sense to me. I tried different png images and looks like I just need larger ones as you said. Will mark as correct answer. Cheers