resizeMode
- React Native course
- Beginner
- Lesson 67/116
- 5 min
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.
Practice 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.
Starter code
import { Image } from 'react-native';
// write the cover image hereSample solution
function App() {
return (
<Image
source={{ uri: 'https://example.com/cover.png' }}
resizeMode="cover"
style={{ width: 200, height: 200 }}
/>
);
}
export default App;Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Match the resizeMode values
| Term | Meaning |
|---|---|
cover |
Fills the box, overflow cropped |
contain |
Whole image, may have gaps |
stretch |
Stretches, ratio breaks |
default |
Is cover |
2 Which mode shows the whole image?
- contain
- stretch Correct answer
- cover
- repeat
Explanation: contain fits the whole image into the box.
3 resizeMode value
import { Image } from 'react-native';
function App() {
return (
<Image
source={{ uri: 'cat.png' }}
resizeMode="____"
style={{ width: 200, height: 200 }}
/>
);
}import { Image } from 'react-native';
function App() {
return (
<Image
source={{ uri: 'cat.png' }}
resizeMode="cover"
style={{ width: 200, height: 200 }}
/>
);
}Explanation: It is the default value.