8

Here's the simplest code possible:

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Image resizeMode={'contain'} source={imageSource}/>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
})

If the resizeMode is set on 'center', it's working nearly as expected, but when in 'contain', the image does not resize. The image is really huge, but it does not resize... Where am I wrong? :)

2
  • Can you show the current result ? It should be the correct way of doing it. Also, you don't need the curly braces, you can simply write resizeMode="contain" Commented May 9, 2018 at 17:23
  • Did you set the style for image? Every image should have a height and width
    – K.Wu
    Commented May 9, 2018 at 18:18

2 Answers 2

12

Your image does not have the context of height and width. You need to specify it.

This should fix your issue:

 <Image
style={{ width: "100%", height: "100%" }}
resizeMode={"contain"}
source={imageSource}
/>;
0
1

If you want that your image to be as width as your page you can use the code below:

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Image
          style={styles.image}
          resizeMode={'contain'}
          source={imageSource}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  image: {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
  },
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.