React Native Image resizeMode='contain' not working

Question

I can't get resizeMode='contain' to work for images loaded remotely, wondering if there's something I've done wrong.

Render Method:

return (
    <View style={styles.internal_button_avatar_container}>
      <Image
        style={styles.internal_button_avatar_image}
        source={{ uri: this.state.imageURL }}
        loadingIndicatorSource={require('../assets/icons/PageLink-Loading.png')}
        resizeMode={'contain'}
      />
    </View>
  );

Styles (relevant section):

internal_button_avatar_container: {
  marginRight: 10,
  width: 40,
  height: 40,
},
internal_button_avatar_image: {
  width: 40,
  height: 40,
},

I've tried resizeMode='contain' and resizeMode='center' but the image always is cropped around the outside of it's frame. Screenshot showing cropped icon.. I've also tried with undefined height and width on the image.

The cropping only appears to happen if the source image is not the same aspect ratio as the frame, a square source will result in perfectly scaled image.

Answer 1

I tried to reproduce your situation, but I haven't problems with that in this snack:

https://snack.expo.io/@gersonmontenegro/resizemode

The original size of the image is bigger than the container, even it has a different aspect radio, and it has loaded according to the internal_button_avatar_image.

Is ok for you?

Answer 2

Turns out I was getting the image from an endpoint in an API that auto-cropped the original image - should've checked the source image before everything else!