CODEWITHSUNDEEP
react-native
SDB_1998
SDB_1998

Reputation: 365

Set an image width to the screen width and the height of the original image height (LIKE INSTAGRAM) in react-native

I want to implement like instagram to show the images/video on full width of the device and the original image height. How can I do that ?

Upvotes: 2

Views: 800

Answers (1)

nithinpp
nithinpp

Reputation: 2025

Simply put the image with width as device width and height as device height. Then specify the resizeMode property to contain. This will make the whole image fit the screen.

<Image style={styles.image} source={{ uri: img_url }} />;

image style,

const {width, height} = Dimensions.get('window');

image: {
  width,
  height,
  resizeMode: 'contain'
},

Or check this Live Snack Example

Upvotes: 1

Related Questions