React-native: console.error: "Image source size {28.666666666666668, 25} does not match loaded image size {28, 25}."

[jasonmerino]

I'm getting this error when loading up the main view of the app I'm working on. I've tracked it down to one of the icon images in the tab bar. The dimensions of the image it's trying to load up is 56px x 50px. The funny thing is that it seems to only be happening on the @2x version of the image. The @3x image doesn't show this issue.

I've tried updating the image and resaving it to the exact size of 56 x 50 to no avail. Not sure if this is an issue with React Native, but figured I'd put it up here since the issue just popped up a couple versions ago when I upgraded the version of React Native.

[facebook-github-bot]

Hey jasonmerino, 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!

[coderdave]

I got this error too but only after upgrading to xcode 7.2.1

[jasonmerino]

So I just got a message from the designer I work with that he has resolved this issue. May have been the way the image was saved initially. Who knows.

Going to leave this open, but as of now, this issue has been resolved on our side.

[RoryCombe]

I have the same issue. Commenting out the section in RCTConvert.m is a workaround for me at the moment: https://github.com/facebook/react-native/blob/master/React/Base/RCTConvert.m#L914-L918 but obviously that is not a suitable fix and it may have side effects.

[farzer]

anyone fixed that problem? I met the same problem.

[caoyue]

I had a image that 57px × 57px for @2x and 85px × 85px for @3x, met the same problem.
Guess that 57/2 != 85/3 cause this problem? so I updated the images to 56px × 56px and 84px × 84px, and it was resolved :)

[pppluto]

why this error occured? i got this error in debug but not in release. it's very werid

[geirman]

@facebook-github-bot bugfix

[geirman]

@facebook-github-bot label Help Wanted

[facebook-github-bot]

Hey @jasonmerino, we're a small team and rely on the community to fix issues that don't affect fb apps. If you're sure this is a bug can you send a pull request with a fix?

[joeytat]

I've got the same error message and found out this is because my 3x.png image are not exactly thrice the point size.

[donald-jackson]

Same error for me, only able to get it to work by having exactly 3* and 2* multiples of image sizes.

[objectivesheep]

Same issue. What solved it for me is having a 3x image that doesn't create a 1x image that has decimals other than .0 or .5 otheriwse RCTConvert will do its math and fail because the actual image does have the decimals in its width or height. It's actually fairly easy: just make sure your 3x image has sides that can be divided by 2 and 3 without causing issues.

[piv199]

The same using NavigatorIOS->initalRoute->titleImage. I've just got image from xcode resources and past it to react native project, made reference to the image. And it doesn't display it :( Why it's not automatically resized or why this error is ever shown?

[reactionic127]

I found this solution.
I've got this issue in Tab Bar icon image.
It was my problem. (home.png(25X25), [email protected](50X51), [email protected](75X76))
I solved this issue by resizing [email protected] and [email protected] file.
This is good result.
25X25, 50X50, 75X75
Hope this helps.
Regards.

[anncatton]

I've been getting this issue with the thumbImage for a Slider, but all my images are sized with matching ratios: 1x(40x40), 2x(80x80) and 3x(120x120). But my error says the loaded image size is {0,0} so I'm not sure if it's the same as the above issues?

Anyone else experienced this? It's happened in RN 0.39 and RN 0.44, but occurs only intermittently.

[objectivesheep]

The sizes need to match and be perfect multiplications in their 2x and 3x
forms. If you have img at 20*20 make sure that your 2@ and 3@ are exact
multiplications. If not rn will complain. It might be any one image in the
triplet... not necessarily the 1x

Op wo 17 mei 2017 om 21:21 schreef Ann Catton [e-mail]

I've been getting this issue with the thumbImage for a Slider, but all my
images are sized with matching ratios: 1x(40x40), 2x(80x80) and
3x(120x120). But my error says the loaded image size is {0,0} so I'm not
sure if it's the same as the above issues?
[image: handleslidererror]
https://cloud.githubusercontent.com/assets/5624601/26171342/9bfcdf4c-3b12-11e7-8e20-21c2305de2e1.png

Anyone else experienced this? It's happened in RN 0.39 and RN 0.44, but
occurs only intermittently.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/facebook/react-native/issues/5586#issuecomment-302202140,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAqbukCiH45hjd83J9SjpQ_Q-Lz32njdks5r60jGgaJpZM4HN5Zp
.

[anncatton]

The error complains about the 2x image, although the size it gives is the 1x dimensions. All 3 are definitely exact multiples - 40, 80 and 120.

[hramos]

Hi there! This issue is being closed because it has been inactive for a while. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. Either way, we're automatically closing issues after a period of inactivity. Please do not take it personally!

If you think this issue should definitely remain open, please let us know. The following information is helpful when it comes to determining if the issue should be re-opened:

• Does the issue still reproduce on the latest release candidate? Post a comment with the version you tested.
• If so, is there any information missing from the bug report? Post a comment with all the information required by the issue template.
• Is there a pull request that addresses this issue? Post a comment with the PR number so we can follow up.

If you would like to work on a patch to fix the issue, contributions are very welcome! Read through the contribution guide, and feel free to hop into #react-native if you need help planning your contribution.

[melvynkim]

The error complains about the 2x image, although the size it gives is the 1x dimensions. All 3 are definitely exact multiples - 40, 80 and 120.

I had same issue.

to resolve

Remove the original image asset that has filename without @. This means if you have:

• menu_icon.png
• [email protected]
• [email protected]
• [email protected]

You must remove menu_icon.png.

If you only have:

• menu_icon.png

Then you can just keep that alone (with no ${img_name}@[1-3].png)

[WhoJave]

@anncatton Have you solved this error ? It occurs only intermittently,too ,My react-native version is 0.49.3

[getaaron]

@hramos I still see this issue in React Native 0.55.4. Can we reopen the issue?

[getaaron]

Looks like image may be getting replaced with a 0-sized image here:

https://github.com/facebook/react-native/blob/master/React/Base/RCTConvert.m#L764-L768

Why are we running all images through [UIImage -imageWithCGImage:scale:orientation:]? It seems certain valid, already-scaled images are run obtained from RCTImageFromLocalAssetURL, and then [UIImage -imageWithCGImage:scale:orientation:] is returning nil for some reason?

If I understand this method correctly, images from RCTImageFromLocalAssetURL shouldn't be rescaled through this method anyway.

[amit2908]

@anncatton how did you managed to solve the issue which is giving {0,0} size of loaded image?

[anncatton]

@amit2908 I never did find a solution for this issue, but I haven't had time to look at it recently.

[pribeh]

@getaaron I'm running into this a bunch right now. Any idea how to resolve this? Have you?

[hramos]

You can resolve this by making sure your 2x and 3x images are exact multiples of the 1x image size.

[pribeh]

@hramos thanks. I will make sure to do that.

[getaaron]

@hramos I don’t think that fixes the part of the issue where some images load as 0,0 sized images

[pribeh]

@getaaron that's the error message we're receiving. Perhaps we should create a new issue for this? I'll do some more testing to see if the changes @hramos suggested resolve the issue for us. Are your images all the exact point sizes and the issue still occurs?

[rodrigoelp]

Following this, does anybody has steps to reproduce?

[Niryo]

@anncatton , are you using custom root with the metro bundler?
I have the same problem only in a project with custom root.

[TheSavior]

The solution to the issue reported by the OP is that the 1x, 2x, and 3x images must be exact multiples of the 1x image.

It seems like the 0,0 sized image error is a separate problem. I'm going to close this as it seems like the original issue is resolved, but feel free to create a new issue for the 0,0 problem.

[rupalpatel0008]

why this error occured? i got this error in debug but not in release. it's very werid

@MrPluto We are also facing the same issue in debug mode.