resizeMode

Learn image scaling with resizeMode.

What is resizeMode?

The resizeMode prop decides how the image is resized inside its box. There are three common values: cover, contain and stretch.

cover scales the image up so it fills the box; overflowing edges get cropped. contain fits the whole image inside the box; there may be empty space. stretch stretches the image to the box; the aspect ratio breaks.

You write it as resizeMode="cover". The default value is cover, so most of the time you get cover behavior even without writing it.

Which mode when?

For a card cover image cover is a good pick; the box fills completely and looks neat. When you want the whole product photo visible, use contain.

For background images cover is also preferred. stretch is rarely used; it only suits patterns or color blocks.

When the aspect ratio matters, never use stretch; faces warp and logos break. In most UI situations cover is a safe starting point.

Exercise Show a cover image

Write a 200x200 <Image>. Give it source={'{ uri: 'https://example.com/cover.png' }'} and set the resizeMode attribute to "cover". Export the App function.

Show example solution

function App() {
  return (
    <Image
      source={{ uri: 'https://example.com/cover.png' }}
      resizeMode="cover"
      style={{ width: 200, height: 200 }}
    />
  );
}
export default App;

Test yourself

Match the resizeMode values

cover

Fills the box, overflow cropped
contain

Whole image, may have gaps
stretch

Stretches, ratio breaks
default

Is cover
Which mode shows the whole image?
- contain
- stretch
- cover
- repeat
Show answer

stretch — contain fits the whole image into the box.

resizeMode value

import { Image } from 'react-native';

function App() {
  return (
    <Image
      source={{ uri: 'cat.png' }}
      resizeMode="____"
      style={{ width: 200, height: 200 }}
    />
  );
}

Show answer

import { Image } from 'react-native';

function App() {
  return (
    <Image
      source={{ uri: 'cat.png' }}
      resizeMode="cover"
      style={{ width: 200, height: 200 }}
    />
  );
}

Next lesson: ImageBackground

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies