Sometimes, we want to fit Image in containing View, not the whole screen size with React Native.
In this article, we’ll look at how to fit Image in containing View, not the whole screen size with React Native.
How to fit Image in containing View, not the whole screen size with React Native?
To fit Image in containing View, not the whole screen size with React Native, we set resizeMode to cover.
For instance, we write
const style = StyleSheet.create({
imageStyle: {
alignSelf: "center",
height: "100%",
width: "100%",
},
});
//...
const Comp = () => {
//...
return (
<View>
<Image
style={styles.imageStyle}
resizeMode={"cover"}
source={item.image}
/>
</View>
);
};
to add an Image with the resizeMode prop set to cover.
This will make it fit to the View wrapped around it.
