How to scale different sized images in react native to have the same width

Question

I am trying to create a feed page for an app with posts with images. Images can be different sizes, but they must either stretch or shrink to the correct width the post/screen like something you would see on facebook, or thread thumbnails on reddit.

This is an an example image that I am using: https://cdn.discordapp.com/attachments/469170673533583361/822830018794356736/1.jpg

using the following code:

Style Snippet:

postImageView : {
  flex : 1,
  width : '100%'
},
  postImage : {
  flex : 1,
  resizeMode : 'stretch'
},

Component Snippet:

<View style={styles.postImageView}>
  <Image source={imageList[0]} style={styles.postImage}/>
</View>

I get the following results: https://discord.com/channels/102860784329052160/469170673533583361/822829976616566785

As you can see the image is pushed up against the left side of the screen and expands well over the limits. Hard coding in the width and height can fix the size for a given image size, but does not work for different sizes.

I tested the props from https://reactnative.dev/docs/image-style-props#resizemode and most have no effect on the shape of the image.

Setting flex in the view or image or setting width to a 100% have no effect on the output.

For the full code goto: https://pastebin.com/K1QATwA5. Note that the last two imports are currently not required and so can be deleted if you decide to try and run it.

Is the desired result that the image keeps its original aspect ratio? Or that we fit them all to a specific rectangle? (you would want object-fit: cover and a fixed height in that case). Are the image dimensions known in advance? — Linda Paiste, Mar 20 '21 at 17:48
I think you want “object-fit: contain” and “height: auto” — Linda Paiste, Mar 20 '21 at 17:49
FYI your "I get the following results:" link takes me to a discord login. I'm playing with this on my computer (so react-native-web) and I cannot get the image to show up at all if I do not set an explicit `height` or `minHeight`. Do you know the dimensions for each image? ["Note that for network and data images, you will need to manually specify the dimensions of your image!"](https://reactnative.dev/docs/image) — Linda Paiste, Mar 20 '21 at 19:00
Does this answer your question? [How to set image width to be 100% and height to be auto in react native?](https://stackoverflow.com/questions/39631895/how-to-set-image-width-to-be-100-and-height-to-be-auto-in-react-native) — Linda Paiste, Mar 20 '21 at 19:10

score 1 · Answer 1 · answered Mar 20 '21 at 17:34

1

Have you tried changing the resizeMode parameter? It looks like changing it to center might do the trick.

react native image docs

answered Mar 20 '21 at 17:34

Oskar

346
1
3

Yes, it changes nothing. – Ben Owen Mar 20 '21 at 17:42
Yeah “stretch” is going to lead to a distorted image. Adding “height: auto” to the style might help too. – Linda Paiste Mar 20 '21 at 17:44

score 1 · Accepted Answer · answered Mar 21 '21 at 00:10

You can assign the width and height of the image container relative to the current device's measurements like so:

import {stuff..., Dimensions} from 'react-native';

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

// In your StyleSheet.create

postImageView : {
  width, // This is 100%
  height: height * 0.2 // Or whatever you want as value
},
  postImage : {
  flex : 1,
  resizeMode : 'stretch'
},

For more info check RN Dimensions docs

How to scale different sized images in react native to have the same width

2 Answers2