[Image] Retina Assets - Image component does not resolve images with filenames that include '@' symbol

Is this a bug report?

Yes, this worked in previous versions.

Have you read the Bugs section of the Contributing to React Native Guide?

Yes

Environment

1. react-native -v: 0.46.1
2. node -v: 8.1.4
3. npm -v: 5.2.0
4. yarn --version (if you use Yarn): none

Then, specify:

1. Target Platform (e.g. iOS, Android): both
2. Development Operating System (e.g. macOS Sierra, Windows 10): macOS Sierra
3. Build tools (Xcode or Android Studio version, iOS or Android SDK version, if relevant): Xcode 8.3.3, Android Studio 2.3, iOS 10.3, Android 7.1.1

Steps to Reproduce

(Write your steps here:)

import React from 'react'
import { Image } from 'react-native'
import logo from '../images/[e-mail]'

export default function Example () {
  return <Image source={logo} />
}

Expected Behavior

Image loaded correctly and displayed.

Actual Behavior

Reproducible Demo

The demo is made from create-react-native-app, eject, and react-native-git-upgrade.

https://github.com/timmywil/react-native-bug-example

I realize the workaround is simple, but I figure a regex got edited somewhere and this is a one-line fix.

[stigi]

It’s 2018 and I am seeing the exact same issue as @hassanrazakhalid and the others above described. I’m on version 0.51.0.

I have icon.png, [e-mail] and [e-mail] and am using it a la

import icon from `./icon.png`

<Image source={icon} />

The dimensions of icon.png are 12x12px. The @2x dimensions are 24x24px, @3x are 36x36px. I would expect the Image to render in 12x12pt but it renders in 6x6pt. I’m testing on an iPhone 6 Simulator running iOS 11.2. PixelRatio.get() gives 2.

I believe I followed the instructions on https://facebook.github.io/react-native/docs/image.html exactly, but either there’s a small nuance I’m missing, or this is a bug. But since there’s not a huge outcry it’s hard for me to believe the later.

[codebymikey]

Did some more digging.

<Image source={require('./[e-mail]')} /> should now be replaced with <Image source={require('./my-icon.png')} />. React Native/Metro Bundler will pick the correct one based on the device’s screen density.

Relevant documentation: https://facebook.github.io/react-native/docs/0.53/images.html

I think it’s definitely related to the move from react-native/packager to metro.