Image sizes for android and iOS in react-native

react-native react-native-android react-native-ios
JiteshW picture JiteshW · Feb 16, 2017 · Viewed 9.9k times · Source

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.

Answer

RRikesh picture RRikesh · Feb 17, 2017

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.

Related questions

React Native version mismatch

Getting the following message when I init a new project and then launch the Xcode emulator: React-Native Version Mismatch Javascript Version 0.50.1 Native version: 0.50.0 Make sure you have rebuilt the native code. ... Does anyone know what is going on here and …

Read More
How do I make text bold, italic, or underline in React Native?

Surprisingly there isn't one question that groups these all together yet on Stack Overflow; there hasn't been an answer on SO for italics or underline, in fact, only this question for bold. I self-answered this quesiton below.

Read More
What is the difference between Expo and React Native?

From the Expo website Expo lets web developers build truly native apps that work across both iOS and Android by writing them once in just JavaScript. Isn't this what React Native does? What's the difference?

Read More