Sometimes, we want to resize image with React Native.
In this article, we’ll look at how to resize image with React Native.
How to resize image with React Native?
To resize image with React Native, we set the width and height of the image to percentages and set resizeMode to 'cover'.
For instance, we write
<View
style={{
width: 180,
height: 200,
aspectRatio: 1 * 1.4,
}}
>
<Image
source={{ uri: item.image.url }}
style={{
resizeMode: "cover",
width: "100%",
height: "100%",
}}
/>
</View>;
to set the style of the Image to an object with resizeMode set to 'cover' to make the image fit the container.
We set the width and height to '100%' so it fills the whole container.
Conclusion
To resize image with React Native, we set the width and height of the image to percentages and set resizeMode to 'cover'.
