resizeMode=“contain” takes up space of the original image

[alishehzad2017]

Description

The style below correctly resizes the image. However, it takes up the space of the original image and the resized image is center aligned. I've added the backgroundColor to make it easier to visualize the screenshot attached.

image: {
  width: '100%',
  resizeMode: 'contain',
  backgroundColor: 'black',
},

React Native version:

0.61

Expected Results

I'm expecting the "resized image" to take up the size of the resized image

Screenshot:

[github-actions[bot]]

:warning:	Using Old Version
:information_source:	It looks like you are using an older version of React Native. Please upgrade to the latest version, and verify if the issue persists. If it does not, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the current release.

[github-actions[bot]]

:warning:	Missing Reproducible Example
:information_source:	It looks like your issue is missing a reproducible example. Please provide a Snack or a repository that demonstrates the issue you are reporting in a minimal, complete, and reproducible manner.

[chrisglein]

Isn't the expected meaning of contain? If you want the image to fill you'd want cover or stretch (depending on whether you want to preserve aspect ratio or not). https://reactnative.dev/docs/image#resizemode

It'd be helpful to put together a Snack like this one to demonstrate your issue in context: https://snack.expo.io/@chrisglein/repro29491

[ahtierney]

@chrisglein I believe I've updated the snack you've provided to demonstrate @alishehzad2017's issue: https://snack.expo.io/FbQZQbcVO

From my understanding, the expectation is that "contain" would preserve the aspect ratio, take 100% width, and adjust the height of the image container so it mirrors the height of the rendered image – without specifically setting a height style.

[chrisglein]

I'm not positive what the expectation is. The documentation for height implies it should behave like CSS. But if you look at react-native-web in that Snack... it doesn't display the un-heighted items at all (behaving differently from iOS and Android). And if I put together the CSS equivalent of what I think this React Native markup intends, it behaves similarly (put together a fiddle here).

It makes sense to me that an image should infer the unspecified dimensions from the source image... but I don't actually know where that's specified. Do you?

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[ezrogha]

ImageBackground does the trick for me

[Biplovkumar]

please suggest the answer

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[wouterh-dev]

This issue is still present in the latest react native. The expectation is that images should be resized according to their aspect ratio without additional padding/margins.

[xApep]

This issue is still present in the latest react native.

[github-actions[bot]]

This issue is waiting for author's feedback since 24 days. Please provide the requested feedback or this will be closed in 7 days.

[github-actions[bot]]

This issue was closed because the author hasn't provided the requested feedback after 7 days.

[iain-neirfeno]

did this just get ignored until the bot closed it? Even though plenty of others commented to say it was still an issue...

[InkAndSteel]

Also an issue for me... I'd expect the <Image> component to shrink to the size of the actual Image it displays... otherwise there is no way to render overlays that rely on getting that size