Images with @2x or @3x in their file names are not resolved (breaks static image resources)

[mo-solnet]

Do you want to request a feature or report a bug?

Report a bug

What is the current behavior?

Images with @2x or @3x in the file name are not resolved when doing require('../myImage@2x.png'). If I remove the @ then it loads the file without an issue.

If the current behavior is a bug, please provide the steps to reproduce and a minimal repository on GitHub that we can yarn install and yarn test.

Others have reproduced this behavior as you can see 👉 facebook/react-native#15030

What is the expected behavior?

I expect the files to load and be resolved without an issue. This problem breaks static image resources 👉 https://facebook.github.io/react-native/docs/images.html#static-image-resources

Please provide your exact metro-bundler configuration and mention your metro-bundler, node, yarn/npm version and operating system.

I've used the stock version that comes with react-native 0.47.1.
I've also tried --reset-cache and finally I've also updated metro-bundler to version 0.11.0.
npm 5.0.3
yarn 0.27.5
Mac OSX 10.12.6

The only workaround I've found is to remove the @ when requiring the file

[cpojer]

@jeanlauliac knows about assets.

[jeanlauliac]

Sorry I've been lagging behind quite a lot.

About this issue: in Metro, assets are not meant to be required with a specific scale, since different devices might use different scales. In that example, requiring ./myImage.png would cause either myImage@2x.png or myImage@3x.png to be used depending on the device screen pixel ratio (virtual-pixel to physical-pixel ratio, so to speak).

@mo-solnet can you explain what is the benefit of using require('../myImage@2x.png') over require('../myImage.png')?

[jasperkuperus]

@jeanlauliac Is it an idea to add a better error if someone does use @2x and then refer to this issue?

[jeanlauliac]

Yes, a specific error message sounds good to me. I would not refer to this issue though, I'd just mention that removing the scale specifier solves the problem.

[jeanlauliac]

I haven't got the time to try to fit a hint message somewhere in the stack, but I'll close this issue for now, as this is the expected behaviour, and scale specifiers should not be included in the name when requiring assets. Do feel free to send a PR to tweak error messages however.

The documentation mentions having different densities and does have the example without the density specifier, so I don't think it needs updating? (https://facebook.github.io/react-native/docs/images.html#static-image-resources)