CODEWITHSUNDEEP
react-nativereact-native-image
limdev
limdev

Reputation: 825

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

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?

Upvotes: 1

Views: 44

Answers (1)

Tim
Tim

Reputation: 10709

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:

Output

Working Demo:

https://snack.expo.io/SJdlzQTr8

Upvotes: 1

Related Questions