When resizeMode.contain is it possible not "center" the image?

[rochapablo]

Describe the bug
I'm not sure if this is a bug, but following the code and image bellow, I notice that there's always a white space between the image, like the image it's been centered some how. I tried flex alignments but noting seems to work.

Using resizeMode.contain I got the white spaces; using resizeMode.cover I loose a little of the width.

The white space increase as the image gets taller (huge height).

To Reproduce
Follow the code:

<FastImage
    style={{ flex: 1 }}
    source={{
        priority: FastImage.priority.normal,
        uri: this.props.src
    }}
    resizeMode={this.props.resizeMode || FastImage.resizeMode.contain}
/>

Expected behavior
The image should not have those white spaces at top and bottom of the element <FastImage.

Screenshots

Dependency versions

• React Native version: 0.59.9
• React version: 16.8.3
• React Native Fast Image version: 6.0.3

Note: if these are not the latest versions of each I recommend updating as extra effort will not be taken to be backwards compatible, and updating might resolving your issue.

[acevedo93]

I think you need to assign width and height to your image

[rochapablo]

Like this?

const style: any = {
      backgroundColor: 'red',
      flex: 1,
      height: this.props.height,
      width: this.props.width,
    };

Nothing changes.

[rochapablo]

I believe that StyleSheet.absoluteFill it's centering the image

[papidb]

Hey @rochapablo did you end up solving this?

[BrentRoberson]

I'm having the same issue, I don't want my image to center with the contain resize mode. Have you figured it out?

[mitesh-db]

Hey @rochapablo ,
Any update on this issue, It is really breaking design when we need to show wide images

[Valeriy-Burlaka]

I just faced the same issue, - an image with resizeMode="contain" gets centered and ignored the justifyContent="flex-end" setting of the outer container.
I managed to "fix" this by setting both width and height of the image to undefined and also specifying its aspectRatio, just like this:

    <View
      style={
          justifyContent: 'flex-end',
        }}
    >
      <Image
        source={require('./img/source.png')}
        style={{
          // This is as strange as it gets. The `flex-end` setting works _only_ if I pass the image's aspect ratio
          // and `undefined` for width and height properties. If any of these are missing, the image with `resizeMode="contain"
          // will be centered vertically and ignore the `justifyContent` setting of the outer container.
          aspectRatio: 0.5622, // In my case
          width: undefined,
          height: undefined,
          resizeMode: 'contain',
        }}
      />
    </View>

Hope this may help somebody.

[mitesh-db]

Hey @Valeriy-Burlaka, For me, Images are coming from url. I need to set every image's aspect ratio differently somehow. 🤔

[AdityaBelani]

I just faced the same issue, - an image with resizeMode="contain" gets centered and ignored the justifyContent="flex-end" setting of the outer container. I managed to "fix" this by setting both width and height of the image to undefined and also specifying its aspectRatio, just like this:

    <View
      style={
          justifyContent: 'flex-end',
        }}
    >
      <Image
        source={require('./img/source.png')}
        style={{
          // This is as strange as it gets. The `flex-end` setting works _only_ if I pass the image's aspect ratio
          // and `undefined` for width and height properties. If any of these are missing, the image with `resizeMode="contain"
          // will be centered vertically and ignore the `justifyContent` setting of the outer container.
          aspectRatio: 0.5622, // In my case
          width: undefined,
          height: undefined,
          resizeMode: 'contain',
        }}
      />
    </View>

Hope this may help somebody.

No idea how, but this works! 💯