Image sizes for android and iOS in react-native

Question

While making iOS Apps, we generally used to supply @x,@2x,@3x images. And based on my knowledge in case of android, there was some approx six different sizes

I have started working on react-native and came across the image issue.

My Question are: Do I need to provide images with all different sizes (i.e. approx 6-7 image sets by combining iOS and android) Or only 1 image and rest will be taken care internally? Will it look blurred on higher resolution phones?

Thanks.

Solution

You still need to provide multiple images. According to the Images documentation, if you are using an image named check.png, you also have to include [email protected] and [email protected].

Quoting:

The packager will bundle and serve the image corresponding to device's screen density. For example, [email protected], will be used on an iPhone 7, [email protected] will be used on an iPhone 7 Plus or a Nexus 5. If there is no image matching the screen density, the closest best option will be selected.

Comments

[Richard Le Mesurier]

hdpi is not a 2x scale. hdpi is 150% of mdpi. See here

[Richard Le Mesurier]

Here are the React docs on PixelRatio which explains the image sizing from their point of view.

[dehamzah]

is this worked for android with different screen size too?

[Mortada]

same question here, is it applies for android?

[Jo Momma]

Yes this convention works the same for Android. Notice the documents say "[email protected] will be used on an iPhone 7 Plus or a Nexus 5." Well, Nexus 5 is an Android device. React Native makes managing assets real easy. Also, read this article for an even better way to store your static assets: willowtreeapps.com/ideas/…

[instanceof]

Just to be clear, yes, it does work on Android as well without need of any changes. From the docs: "Same system on Android and iOS."