15

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.

JiteshW
  • 2,195
  • 4
  • 32
  • 61

1 Answers1

11

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 check@2x.png and check@3x.png.

Quoting:

The packager will bundle and serve the image corresponding to device's screen density. For example, check@2x.png, will be used on an iPhone 7, whilecheck@3x.png 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.

RRikesh
  • 14,112
  • 5
  • 49
  • 70
  • 7
    is this worked for android with different screen size too? – dehamzah Oct 05 '17 at 06:40
  • same question here, is it applies for android? – Mortada Jul 01 '18 at 13:32
  • 1
    Yes this convention works the same for Android. Notice the documents say "check@3x.png 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: https://willowtreeapps.com/ideas/react-native-tips-and-tricks-2-0-managing-static-assets-with-absolute-paths – Jo Momma Jul 08 '20 at 19:14
  • Just to be clear, yes, it does work on Android as well without need of any changes. From the [docs](https://reactnative.dev/docs/images): "Same system on Android and iOS." – instanceof May 27 '21 at 12:48