The below is my code of react native app code. But its not showing the image. i Moved the container style from scroll view to image the the image showed in an incorrect way.

<ScrollView vertical={true} style={styles.container} >
  <Image
    style={{ width: '100%', height: '100%' }}
    source={{ uri: this.props.navigation.state.params.PassedURL }}>
  </Image>
</ScrollView>

here the container style

container: {
  flex: 1,
  backgroundColor: 'gray',
  padding: 10
},

There is nothing other to render on the screen

Answer

Don't use flex:1 in ScrollView, if that doesn't fix it try to set specific width and height as suggested by others

<ScrollView vertical={true} style={styles.container} >
   <Image
     style={{ width: 200, height: 200 }}
     source={{ uri: this.props.navigation.state.params.PassedURL }}>
    />
</ScrollView>

The container style

container: {
  backgroundColor: 'gray',
  padding: 10
},
  • 1
Reply Report
    • This doesn't work as I need responsive sizing, I don't know the height or width of the image, I just want the image to span the full width, while keeping aspect ratio for the height
      • 1
    • if you want it to fill to full width just set with to 100% and the height will be ajusted accordingly and maybe put resizeMode="contain" or "cover" depending on your need @conor909

Warm tip !!!

This article is reproduced from Stack Exchange / Stack Overflow, please click

Trending Tags

Related Questions