React Native Scroll View not showing image

Question

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 1

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
},

EDIT:

If you want it to fill to full width just set width to 100% and the height will be ajusted accordingly and maybe put resizeMode="contain" or "cover" depending on your need

Answer 2

it is because you configure image height and weight with percentage

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

try to set it with exact number ,percentage only work with only one width or heigth not both

<Image
    style={{ width: 100, height: 100 }}
    source={{ uri: this.props.navigation.state.params.PassedURL }}>
</Image>