[ios] Cannot run retina images with Image component?

[aksonov]

When I specify @1, @2, @3 suffixes for retina devices, like it done for UIImage, packager runs with error that png file is not found. When I specify <Image source={require("image@1.png")}> it is displayed in non-retina density. How to specify density?

Here it is said that it should be supported: https://facebook.github.io/react-native/docs/images.html

[facebook-github-bot]

Hey aksonov, thanks for reporting this issue!

React Native, as you've probably heard, is getting really popular and truth is we're getting a bit overwhelmed by the activity surrounding it. There are just too many issues for us to manage properly.

• If you don't know how to do something or something is not working as you expect but not sure it's a bug, please ask on StackOverflow with the tag react-native or for more real time interactions, ask on Discord in the #react-native channel.
• If this is a feature request or a bug that you would like to be fixed, please report it on Product Pains. It has a ranking feature that lets us focus on the most important issues the community is experiencing.
• We welcome clear issues and PRs that are ready for in-depth discussion. Please provide screenshots where appropriate and always mention the version of React Native you're using. Thank you for your contributions!

[nicklockwood]

The convention is actually to use image@2x.png, image@3x.png, (and there's no such things a @1x) but in any case that should not be necessary because require manages that logic internally.

Make sure that your image files are named image.png, image@2x.png and image@3x.png on disk, then just use the following code to display them, and it should select the correct image automatically:

<Image source={require('image.png')}/>

[aksonov]

Thank you very much! Probably docs should be updated to note that image.png is REQUIRED to avoid errors.

[aksonov]

Hm, it doesn't work - it just displays png file without suffix!

[nicklockwood]

@aksonov I'm not sure that's actually the case. It should work fine if you only include @2x version. I think the problem was just that you were missing the 'x'.

[nicklockwood]

Basically no iOS devices still have non-retina screens anymore, so we shouldn't be forcing people to include @1x assets. If the packager is failing without them, let me know and I'll file a bug.

[aksonov]

@nicklockwood Ogh, most stupid I've ever made (forget about 'x')

[aksonov]

Everything works fine, thanks...

[hassanrazakhalid]

I am facing same issue. I have invest-icon.png, invest-icon@2x.png, invest-icon@3x.png. But each time when i use require. It always show 1x or invest-icon.png image. I have tested one scenario that if i removed invest-icon.png then it will divide @2x image by 2 and show that and i delete @2x image then it will devide @3x image by 3 and use that image. I am testing Iphone 7 and 7 plus. Why it is not picking @2x for iphone 7 and for plus @3x. It is always trying to get 1x image.

<Image
              source={require('../resources/images/invest-icon.png')}
            />

[dennis-tra]

Same for me @hassanrazakhalid. Could you find a solution?

[hassanrazakhalid]

i couldn't find the solution. for now im using react-native-responsive-dimensions. It basically resizes the icons and fonts according to screen width and height