1

Within my react native app I have a simple ScrollView with containers which should stretch horizontally to 100% width. Each of these containers should display an image. I receive the image for each container from a web API (but I could send the actual image as byte64 string too if it makes any difference).

Now the problem I have is that the Image component needs me to set the height and width style attributes in order to display the image. I understand the reasoning for that, since the actual dimensions of the image are only available at runtime and it would cause the UI to behave strange when the images are loaded.

However I would like to set the width of the image to 100% of the parent container, eventhough that means that the the containers height will change when each image are loaded.

Any advice on how to solve this issue?

Eddi
  • 782
  • 1
  • 7
  • 20

2 Answers2

1

Not sure if I'm completely understanding the scenario you're describing, so this idea may not work. But if you know the width of the container, you can use that to scale the image's height based on the ratio of the container's width to the image's original width.

I've actually answered a recent question about this by providing a component I coded up for a similar purpose:

Auto scale image height with React Native

Hope this helps.

Community
  • 1
  • 1
TheJizel
  • 1,864
  • 1
  • 15
  • 14
  • Yes, that's what I actually want. But (this may be not related to the actual question), I have to set the width to 100% of the parent container. And that's where I am stuck right now. – Eddi Feb 21 '17 at 08:11
  • @Eddi Ok. So you don't know the width of the container? Is it smaller than the width of the device? – TheJizel Feb 21 '17 at 16:09
0

You can do something like

 resizemode="stretch"

with this the image will stretch in the whole container irrespective of the size of the image

Ujjwal Nepal
  • 546
  • 5
  • 13