React native Image in two scrollView not showing

Question

I started react-native and I am having a hard time finding how I can load a picture from an uri and show it into two scrollView (seems I need that, one for vertical and one for horizontal scrolls). I could make it works for a local file, but as soon as I get it from internet, the picture never show up except if I give a specific size.

  <View style={{ flex: 1 }}>
    <ScrollView contentContainerStyle={{ flex: 0, alignContent: "stretch" }}>
      <ScrollView horizontal={true} contentContainerStyle={{ flex: 0, alignContent: "stretch" }}>
        <Image
          style={{ flex: 1, backgroundColor: 'white' }}
          resizeMode='cover'
          source={{ uri: 'https://cdn.pixabay.com/photo/2017/02/15/11/15/wintry-2068298_960_720.jpg' }}
        />
      </ScrollView>
    </ScrollView>
  </View>

The same code without the scrollViews shows the image perfectly but with them the image never shows. I tried, the alignSelf:'stretch', or to set top/bottom/right/left to 0 and also width:'100%' and height:'100%' for the image nothing giving the expected result which is take all the space possible showing the image and be able to scroll inside it horizontally and vertically

Thanks for your help.

Answer 1

Finally found the answer :

var myUri = 'https://cdn.pixabay.com/photo/2017/02/15/11/15/wintry-2068298_960_720.jpg';
var mode = 'cover'
Image.getSize(myUri, (width, height) => { this.setState({ width, height }) });
return (
  <ScrollView contentContainerStyle={{ flex: 0 }}>
    <ScrollView horizontal={true} contentContainerStyle={{ flex: 0 }}>
      <Image
        style={{ width: width, height: height }}
        resizeMode={mode}
        source={{ uri: myUri }}
      />
    </ScrollView>
  </ScrollView>
);