Categories
React Native Answers

How to resize image with React Native?

Spread the love

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'.

Leave a Reply

Your email address will not be published.

If you like the content of this blog, subscribe to my email list to get exclusive articles not available to anyone else.