skip to content

In React Native, what do Image's resizeMode values do, which is the default, and which would you use for listing photos versus a floor plan?

level: juniorimportance: must knowfreq 58%

answer

  1. the box is fixed, the image adapts
  2. default cover: fill and crop
  3. contain: whole image, maybe bars
  4. stretch distorts, repeat tiles
  5. objectFit style wins over resizeMode

basics

~20 s

resizeMode sets how an Image fits a box of a different shape: cover (the default) fills and crops, contain shows everything with bands, stretch distorts, repeat tiles, center never enlarges. Listing photos suit cover; a floor plan needs contain.

solid answer

~50 s

`resizeMode` applies when the `Image`'s frame does not match the picture's proportions. `cover`, the **default**, scales uniformly until both dimensions are at least the frame's, so the box is filled and the overflow cropped. `contain` scales uniformly until the whole image fits, leaving empty bands. `stretch` scales width and height independently and distorts the aspect ratio. `repeat` tiles the image at its own size, scaling it down only if it is larger than the view. `center` centres the image and only scales it down if it is too large. Listing photos in a fixed-height card want `cover`, which fills the card, since cropping the edges of a room shot is acceptable. A floor plan wants `contain`, because every room must stay visible. It also exists as a style, and the `objectFit` style takes precedence over both.

code

tsx · 17 lines
tsx
import {Image, StyleSheet, View} from 'react-native';

export function ListingMedia({photo, floorPlan}: {photo: string; floorPlan: string}) {
  return (
    <View>
      {/* Fills the card; edges of the room may be cropped. */}
      <Image source={{uri: photo}} style={styles.card} resizeMode="cover" />
      {/* Every room must stay visible, even if bands appear. */}
      <Image source={{uri: floorPlan}} style={styles.plan} resizeMode="contain" />
    </View>
  );
}

const styles = StyleSheet.create({
  card: {width: '100%', aspectRatio: 16 / 9},
  plan: {width: '100%', height: 320},
});

go deeper

for a junior

Recall that cover is the default and crops, contain shows everything, and stretch distorts.

for a middle

Explain how repeat and center treat images smaller or larger than the frame, and the precedence between objectFit, the resizeMode prop and the style.

for a senior

Choose modes per surface in a real app and recognise when the real fix is a server-side crop or a correctly sized variant, not a different mode.

for a principal

Standardise image surfaces and their aspect ratios with design and backend teams, so fit behaviour is predictable across every screen.

## The problem resizeMode solves An `Image` has a frame set by layout (`width`, `height`, `aspectRatio`, flex), and a picture with its own proportions. When they differ, something has to give. `resizeMode` decides what. ## The documented values | Value | Scaling | Aspect ratio | Result | |---|---|---|---| | `cover` (default) | uniform, until both sides are at least the frame | kept | frame filled, overflow **cropped** | | `contain` | uniform, until both sides are at most the frame | kept | whole image visible, empty bands | | `stretch` | width and height independently | **changed** | frame filled, image distorted | | `repeat` | none, unless larger than the frame (then scaled down) | kept | image **tiled** across the frame | | `center` | none, unless larger than the frame (then scaled down) | kept | image centred, never enlarged | Two details interviewers like: - **`cover` is the default.** An `Image` with no `resizeMode` crops rather than letterboxes. Candidates who expect the whole picture by default are surprised when a tall photo loses its top and bottom. - **`center` never scales up.** A small image stays small in a large frame, which suits placeholder artwork that would blur if enlarged. ## Picking modes in a listing app A real-estate app mixes very different images: 1. **Listing cards**: remote photos in a fixed 16:9 card. `cover` fills every card identically; losing a strip of ceiling is acceptable. 2. **Full-screen gallery**: users want the whole photo. `contain` shows it entirely, with bands on photos whose shape differs from the screen. 3. **Floor plans**: `contain`, always. Cropping would hide rooms, and distortion would misrepresent them. 4. **Bundled amenity icons**: usually drawn at their exact size, so the mode rarely matters; `contain` protects against a mismatched box. 5. **A subtle background pattern**: `repeat` tiles a small texture across a header without a large asset. 6. **Never `stretch` a photo.** Distorted rooms look wrong immediately; `stretch` suits only images designed to be stretched. ## Prop, style, and objectFit `resizeMode` is accepted in more than one place, and React Native resolves them in a fixed order: 1. the **`objectFit`** style, if set, mapped to a resize mode (`cover`, `contain`, `fill` as `stretch`, `scale-down` as `contain`, `none`); 2. the **`resizeMode` prop**; 3. the **`resizeMode` style**; 4. otherwise **`cover`**. `objectFit` is the web-aligned name. Mixing forms in one codebase makes it hard to see which one applies; pick one. ## Traps interviewers probe - **An image that is smaller than its frame.** With `cover` or `contain` it is scaled up and can blur; `center` keeps it at its own size. - **An image with padding around it.** The documented behaviour measures against the view minus padding, so padding shrinks the area the image is fitted into. - **Per-corner border radius on iOS.** The docs warn that corner-specific radius styles such as `borderTopLeftRadius` may be ignored by iOS's image component; wrap the `Image` in a `View` with `overflow: 'hidden'` for per-corner rounding. - **Cropping a subject.** When the important part of a photo is near an edge, no mode fixes it; the server must supply a better crop. ## What resizeMode does not do - It does **not give an image a size**. A remote image with no width and height is still zero-sized, whatever its mode. - It does **not** reduce download size; the full image is still fetched. Requesting an appropriately sized variant from the server matters more for performance. - It does **not** choose the focal point of a crop: `cover` crops evenly from the centre, so a subject near an edge can be cut off. Art-directed crops come from the server.

  • In React Native, which applies when an Image sets resizeMode="contain" as a prop and objectFit: 'cover' in its style?
    `objectFit` wins. `Image` resolves the mode from the `objectFit` style first, then the `resizeMode` prop, then a `resizeMode` style, and falls back to `cover`. Here the image is cropped to fill the frame. Using one form consistently avoids this kind of silent override.
  • In React Native, why does a small placeholder look sharp with resizeMode="center" but blurry with contain in a large frame?
    `contain` scales uniformly to fit, so a small image is enlarged to fill as much of the frame as it can, and enlarging a bitmap blurs it. `center` never scales up: it only scales down images larger than the view, so a small placeholder stays at its own size and stays crisp.

cover is a photo trimmed to fit a picture frame, contain is the same photo placed in the frame with a mat around it, and stretch is the photo printed on rubber and pulled until it reaches the edges.

saying these in an interview costs you the question

  • contain is the default, so an Image shows the whole picture unless told otherwise.
  • cover distorts the photo to fill the frame.
  • resizeMode gives a remote Image a size, so width and height become optional.
  • stretch keeps the aspect ratio while filling the frame.
  • A smaller resizeMode lowers the image's download size.