React Native fit long images to screen width and scroll

Question

I'm having some trouble fitting an image of proportions similar to this . When I use Dimensions to set the width/height, the image fits to the screen by its height, so it becomes really zoomed out. However, if I don't set a height, the image doesn't display at all. What I am attempting to do is set the image to fit to the screens width and have the ability to scroll vertically to see the rest of the image.

I've experimented with resizeModes and ScrollView but can't seem to figure it out. I'm using react-native-image-zoom-viewer which provided easy support for other images that are better proportioned ( like this ) and zoom/scroll works fine. I'm just having some trouble with these long image proportions.

Using the NPM package above, the code looks like this:

const { width, height } = Dimensions.get("window");
pages = [
    {
        url: "https://contently.net/wp-content/uploads/2014/10/how-long-to-read.png",
        props: { width: width, height: height},
    },
    {
        url: "https://product-image.juniqe-production.juniqe.com/media/catalog/product/seo-cache/x800/775/58/775-58-101P/Human-Heart-Flora--Fauna-Poster.jpg",
        props: { width: width, height: height},
    }
]

...

<Modal visible={true} transparent={true}>
    <ImageViewer
        imageUrls={pages}
        enableSwipeDown
        enablePreload
        enableImageZoom
        onSwipeDown={() => {
            navigation.goBack();
        }}
        loadingRender={() => (
            <View style={styles.loaderContainer}>
                <ActivityIndicator
                    size="large"
                    color={colours.text}
                />
            </View>
        )}
    />
</Modal>

Answer 1

What about fitting your image in a scroll view, and applying width 100% height 100% and resizeMode "contain" to your image?

<ScrollView style={{ flex: 1 }}>
  <Image source={url} style={{ width: '100%', height: '100%' }} resizeMode="contain" />
</ScrollView>