React Native: print full image in a Scrollview

Question

I have an image that is very tall, but not very large. I want to print it in a scrollview, so you can see it all on one screen, but nothing works.

after playing with widths and heights and flexs for my scrollview and my image, the best result I get is when I have on of them with style={{width='100%'}}, like that

<ScrollView style={{width: '100%'}}>
    <Image
      source={require('./assets/skeleton/fullSkeleton.png')}
      resizeMode='cover'
      />
  </ScrollView>

which prints the image at full width, but the scrollview's height is the original image's height, which doesn't let me see the whole resized image.

Here, a bad drawing to represent my image, and what I want to see on my phone screen

EDIT: With this bit of code:

<ScrollView
  contentContainerStyle={{alignItems: 'center'}}>
    <Image
      source={require('./fullSkeleton.png')}
      resizeMode='cover'
      />
</ScrollView>

I end up with

Which can be scrolled down to see the rest of the Image. As you can see, it can be navigated vertically, but doesn't take the whole screen's width

Answer 1

This kind of thing in Reat Native is actually quite tricky. But you can do it easily; First get picture dimensions:

const FullWidthPicture = ({ uri }) => {
  const [ratio, setRatio] = useState(1);
  useEffect(() => {
    if (uri) {
      Image.getSize(uri, (width, height) => {
         setRatio(width / height);
      });
   }
  }, [uri]);

  return (
   <Image
     style={{ width: '100%', height: undefined, aspectRatio: ratio }}
     resizeMode="contain"
     source={{ uri }}
   />
 );
};

And use it like this:

<ScrollView style={{flex: 1}}>
  <FulWidthImage uri={pictureUri} />
</ScrollView>