React Native Image Resizemode – The right way to do

image: {
     aspectRatio: 1, 
     flex: 1, 
     maxWidth: 300, 
     resizeMode: 'contain',
}

image: {
     width: '100%', 
     height: 300, 
     resizeMode: 'contain'
}

<Image
     resizeMode={'contain'}
     style={{flex: 1, height: undefined, width: undefined}}
     source={require('/path/to/local/image')}
 />

How resizing works in React-Native?

Always remember, in react native, there is no way to work with remote images without providing height, width values. You need to know these values. There is also a way by which you can work with only one value of either width or height. In that case you will need the value of aspect ratio.

For example,

Suppose size of your image is – 800 x 300 px

So, aspect ratio of image will be (width/height) – 800/300 = 8/3 = 2.67

Now, if you want to display the image of width 400 then you can use the code –

image: {
     aspectRatio: 2.67, 
     flex: 1, 
     width: 400, 
     resizeMode: 'contain',
}

You can also use maxWidth if you want the image to be responsive and within the maximum bounds.

What are different ResizeModes in React-native?

There are 5 types of ResizeModes in React Native – cover, contain, stretch, repeat, and center. The default value is cover. Let’s understand each of them one by one –

1. center – We will start with center. It places the image in the center of view, both horizontally and vertically. If the image is larger than the view, then it scaled down to fit. If it is smaller then it is centered. Check this code –

import React from 'react';
import { Text, View, Image } from 'react-native';

const HelloWorldApp = () => {
  return (
    <View
      style={{
        flex: 1,
        backgroundColor:'yellow',
      }}>
      <Image source={{uri: 'https://lh3.googleusercontent.com/c9puzeJmFQ7hqQyxv1Epda1qUjS1yGk99bbxHKurBlwN9f1f6ILXK6zQ-jxu2n5Nwg=s180-rw'}}
        style={{
          flex:1,
          resizeMode: 'center', 
        }}
       />
    </View>
  )
}
export default HelloWorldApp;

2. repeat – As the name indicates, repeat resizemode is used to fill the parent frame with image repeatedly. Check this code and see the output –

import React from 'react';
import { Text, View, Image } from 'react-native';

const HelloWorldApp = () => {
  return (
    <View
      style={{
        flex: 1,
        backgroundColor:'repeat',
      }}>
      <Image source={{uri: 'https://lh3.googleusercontent.com/c9puzeJmFQ7hqQyxv1Epda1qUjS1yGk99bbxHKurBlwN9f1f6ILXK6zQ-jxu2n5Nwg=s180-rw'}}
        style={{
          flex:1,
          resizeMode: 'repeat', 
        }}
       />
    </View>
  )
}
export default HelloWorldApp;

3. stretch – This resizemode scales up/down an image to cover the frame. Due to this, the aspect ratio is not maintained and image is distorted. Code Example –

import React from 'react';
import { Text, View, Image } from 'react-native';

const HelloWorldApp = () => {
  return (
    <View
      style={{
        flex: 1,
        backgroundColor:'repeat',
      }}>
      <Image source={{uri: 'https://lh3.googleusercontent.com/c9puzeJmFQ7hqQyxv1Epda1qUjS1yGk99bbxHKurBlwN9f1f6ILXK6zQ-jxu2n5Nwg=s180-rw'}}
        style={{
          flex:1,
          resizeMode: 'stretch', 
        }}
       />
    </View>
  )
}
export default HelloWorldApp;

4. contain – It will scale the image up or down and try to cover the frame at least in one direction. If height is greater than width and frame is landscape, then this mode will scale height up or down to match the height of frame and vice versa. Check the below code –

import React from 'react';
import { Text, View, Image } from 'react-native';

const HelloWorldApp = () => {
  return (
    <View
      style={{
        flex: 1,
        backgroundColor:'repeat',
      }}>
      <Image source={{uri: 'https://lh3.googleusercontent.com/c9puzeJmFQ7hqQyxv1Epda1qUjS1yGk99bbxHKurBlwN9f1f6ILXK6zQ-jxu2n5Nwg=s180-rw'}}
        style={{
          flex:1,
          resizeMode: 'contain', 
        }}
       />
    </View>
  )
}
export default HelloWorldApp;

5. cover – This one is like contain mode but unlike contain it may expand out of the frame. cover mode tries to fit both height and width with frame keeping the aspect ratio. It keeps scaling the image up or down till both the axes are either equal or greater than frame. Code –

import React from 'react';
import { Text, View, Image } from 'react-native';

const HelloWorldApp = () => {
  return (
    <View
      style={{
        flex: 1,
        backgroundColor:'repeat',
      }}>
      <Image source={{uri: 'https://lh3.googleusercontent.com/c9puzeJmFQ7hqQyxv1Epda1qUjS1yGk99bbxHKurBlwN9f1f6ILXK6zQ-jxu2n5Nwg=s180-rw'}}
        style={{
          flex:1,
          resizeMode: 'cover', 
        }}
       />
    </View>
  )
}
export default HelloWorldApp;

Conclusion

There are 5 types of resizemodes in react native image – cover, contain, stretch, repeat and center. In this article we saw the definition of each of these along with code examples. You can read more about resizeMode in the react native documentation. Images are bulky and needs optimization so always look out these optimization techniques.

Live Demo