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>

