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
.