Looking to make images span the full width of the device screen? I've tried various CSS codes, but none seem to fill the entire width.
Here is the code snippet:
<View style={styles.container}>
<View>
<Image source={require('./Images/rectangle/rectangle.png')} style={styles.backgroundImage}>
</Image>
</View>
</View>
const styles = StyleSheet.create({
container: {
flex: 1
},
backgroundImage: {
height: 200,
flexDirection: 'column',
alignSelf: 'stretch'
}
});
The CSS above doesn't achieve the desired effect, leaving white space on the right side of the image as shown in this screenshot:
https://i.sstatic.net/6yUGz.png
To ensure the images work across different screens, I have included variations with different suffixes. See the screenshot below for reference: