react-native: [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

react-native -v: 0.46.1
node -v: 8.1.4
npm -v: 5.2.0
yarn --version (if you use Yarn): none

Then, specify:

Target Platform (e.g. iOS, Android): both
Development Operating System (e.g. macOS Sierra, Windows 10): macOS Sierra
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/logo@2x.png'

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

Expected Behavior

Image loaded correctly and displayed.

Actual Behavior

screenshot 2017-07-12 14 29 13

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.

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 8
Comments: 19 (2 by maintainers)

Most upvoted comments

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

stigi on Jan 30, 2018

Did some more digging.

<Image source={require('./my-icon@2px.png')} /> 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.

codebymikey on Feb 13, 2018

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. It is always trying to get 1x image.

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

hassanrazakhalid on Nov 30, 2017

This should remain open because it’s a regression and ‘@’ is a common character in image filenames.

timmywil on Oct 23, 2017

@pavanpodila Rename images. image@2x.png -> image-x2.png

iegik on Aug 23, 2017

Any solution for this? Its still a blocker on 0.47.1

pavanpodila on Aug 19, 2017