Image in React Native ScrollView is too big and goes off the screen-CodePudding

I am at a loss, my image is huge and just goes off the screen and you can't see it. It's just a ScrollView that shows a bunch of scans of pages from a book. I can vertically scroll and see the rest of the image but I just cannot get it to be contained within the view. I'm using iOS, My code is below

import React from 'react';
import { WebView } from 'react-native-webview'
import { ScrollView, Image, View, StyleSheet, Dimensions } from 'react-native';


const StandardizationScreen = ({ navigation }) => {
    return (
        <ScrollView style={{flex: 1}} contentContainerStyle={{alignItems: "center"}}>
            <View style={{flex: 1}}><Image style={styles.image} source={require('../assets/standardization/3982243bbc574ccbad697528ff26f605-52.png')}/></View>
        </ScrollView>
    )
}

const win = Dimensions.get('window');

const styles = StyleSheet.create({
    image: {
        width: win.width
    }
})

export default StandardizationScreen;

CodePudding user response：

You can use resizeMode = 'contain'

const styles = StyleSheet.create({
    image: {
        width: win.width,
        resizeMode:'contain'
    }
})

CodePudding user response：

Setting resizeMode="cover" on Image would work, like so :

<Image style={styles.image} resizeMode="cover" source={require('../assets/standardization/3982243bbc574ccbad697528ff26f605-52.png')}/>

You could read here on React Native's official documentation for others value of resizeMode.