0

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.

James Amner
  • 1
  • 1

2 Answers2

0

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?

Gerson Montenegro
  • 446
  • 8
  • 10
  • Thanks for your help, you made me realise that my code was right, so I went on to check the only other possibility, the source image... – James Amner Sep 21 '18 at 08:32
0

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!

James Amner
  • 1
  • 1