React Native Image ResizeMode: A Visual Guide
đź‘‹ As an Android developer, I found myself checking a visual guide over and over when it came to deciding which ScaleType makes sense for my ImageViews.
Since I’ve been working on a React Native application for a while now, I thought it might be helpful to have a similar visual guide to choose a resizeMode for Image components.
Below are screenshots of all the different resizeModes placed side-by-side:
The difference between contain and center
As you might have noticed, the results from contain and center are the same in our example. That’s because I’m using an image that is bigger than the <Image> component (in this example, 200 x 200).
If we resize the image to a smaller size than the <Image> component, we will see a difference:
As you can see, contain will scale the image (up or down) so that the whole image is “contained” in the view component at the maximum scale possible. However, center will scale the image down only if it’s bigger than the component. Otherwise, it will just show the image in the original scale.
I will also include all resizeMode definitions from the official React Native docs here:
cover: Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding).contain: Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding).stretch: Scale width and height independently, This may change the aspect ratio of the src.repeat: Repeat the image to cover the frame of the view. The image will keep its size and aspect ratio, unless it is larger than the view, in which case it will be scaled down uniformly so that it is contained in the view.center: Center the image in the view along both dimensions. If the image is larger than the view, scale it down uniformly so that it is contained in the view.
Hopefully this post will make it easier to choose from different resizeModes. Let me know what you think 🙂
