How can I adapt the width of an Image retrieved by URL to a View container in React Native?

Question

I would like to retrieve an image from an url, and insert it inside a View adapting the size to the container.

This is an expo where I tried to do it.
https://snack.expo.io/Hk1rsfaHU

How you can see there are 3 columns having the same width(flex 1), in the first there is the image.

I wish this Image was contained inside the View, adapting the width to the container and maintaining the correct aspect ratio.

Any suggestions?

score 1 · Accepted Answer · answered Mar 16 '20 at 15:59

You need to change src to source in your <Image />:

  <Image source={{uri: 'https://i2.wp.com/www.xpeppers.com/wp-content/uploads/2016/06/react-native-preview.png?resize=580%2C357'}} 
    resizeMode='contain' style={styles.image}
  />

Output:

Working Demo:

https://snack.expo.io/SJdlzQTr8

How can I adapt the width of an Image retrieved by URL to a View container in React Native?

1 Answers1