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?

samgak samgak · Accepted Answer · 2017-06-03T05:10:05

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.

React Native png image is pixelated and not hd

2 Answers