Make Image fill parent, but keep ratio in react-native (dynamic/network images)

Question

I want my image to fit as best as possible into its parent, while keeping its width/height ratio. I fetch the image at runtime, so I don't know the width/height of my images beforehand, so it needs to be dynamic.

In the web I can achieve this with:

.image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

This is how it should look like (simplified):
https://codepen.io/laurentsmohr/pen/OBEGRG?fbclid=IwAR1-dFcTC7vvXwd0m2NTeCMxm6A6Uzv0lFx2UUCNpgFnpSgEm9aHhr14LK4

Have you tried setting resizeMode to contain to image element with height and width 100% — Ashwin Mothilal, Oct 21 '18 at 12:19
@AshwinMothilal yeah. Won't do it. Will not show anything. If manually set width and height it does, but again, thats not what I want — Laurents Mohr, Oct 21 '18 at 12:47
@LaurentsMohr , take a look at this , https://stackoverflow.com/a/42170351/2083099 — Nima, Oct 22 '18 at 01:52

score 8 · Answer 1 · answered Oct 22 '18 at 05:06

8

According to this official React-Native guide, if you want to make an image scale dynamically according to its parent element dimensions, you have to set the width and height of the image to undefined, and perhaps also add resizeMode="contain" to the image props. You can use this following styling to your image:

import { StyleSheet, Dimensions } from 'react-native;

// Get device width
const deviceWidth = Dimensions.get('window').width;

/*
image container dimension is dynamic depending on the device width
image will dimension will follow imageContainer's dimension
*/
const styles = StyleSheet.create({
  imageContainer: {
    height: deviceWidth * 0.8,
    width: deviceWidth * 0.8
  },
  image: {
    flex: 1,
    height: undefined,
    width: undefined
  }
});

export default styles;

answered Oct 22 '18 at 05:06

Yusuf Siregar

89
5

2

This might work for static images, but not for dynamic images. – Laurents Mohr Oct 28 '18 at 11:43
This worked like a charm for me for a remote image. Although I added resizeMode: 'cover' for good measure. RN 0.60 – Augusto Samamé Barrientos May 16 '20 at 22:55
I try to use `deviceWidth` in the styles like so and I get `ReferenceError: Can't find variable: deviceWidth` – Mote Zart Sep 10 '22 at 03:22

score 1 · Answer 2 · answered Oct 21 '18 at 11:01

1

I always use StyleSheet.absoluteFillObject. It will fill the parent's size. resizeMode can be contain, cover, stretch, center, repeat. Like this:

  image: {
    resizeMode: 'cover',
    ...StyleSheet.absoluteFillObject,
  },

answered Oct 21 '18 at 11:01

vemund

1,667
4
29
43

1

Doesn't work for me. It won't show the image at all. The image is a network image, I might add. Not a local one – Laurents Mohr Oct 21 '18 at 11:53

score 0 · Accepted Answer · answered Oct 28 '18 at 11:49

While the solutions posted above work for local images, they don't work for network images. Here is why: https://facebook.github.io/react-native/docs/images#why-not-automatically-size-everything

The simplest solution for me was to calculate the height off my component based on the Dimensions height and the flex-portion my component takes in the view.
E.g. in my view the image component has a .85 flex, in a parent that has a 1 flex. So 100% height of the parent equals to:

Dimensions.get('window').height * 0.85

score 0 · Answer 4 · answered Jan 23 '23 at 15:02

0

This styling works for me:

 image: {
    flex: 1,
    resizeMode: "contain",
  },

:shipit:

answered Jan 23 '23 at 15:02

Marc

101
1
5

score 0 · Answer 5 · answered Mar 03 '23 at 19:29

React Next set up for an image that fills its parent container:

  image={
          <Image
            src="https://picsum.photos/1174/611?random=65411"
            alt="mandatory alt text goes here"
            quality={100}
            layout="fill"
          />
        }

Make Image fill parent, but keep ratio in react-native (dynamic/network images)

5 Answers5