Introduction
Images are fundamental to mobile app user experience. The resizeMode prop controls how images scale when their container dimensions differ from the source image. Understanding these modes creates consistent interfaces across all device sizes.
Modern mobile applications often need to display images in constrained spaces while maintaining visual quality. Whether building a photo gallery, product display, or profile picture component, the right resize mode ensures images look professional and intentional. React Native's Image component offers five distinct resize modes, each serving different design requirements.
This guide is part of our comprehensive React Native development resources and covers everything you need to know about image scaling in cross-platform mobile applications.
Understanding the Five Resize Modes
Cover Mode
The cover mode scales the image uniformly to maintain aspect ratio while ensuring both dimensions are equal to or larger than the container. At least one dimension matches the container exactly. This mode crops excess image content, similar to CSS background-size: cover, which we also cover in our CSS positioning and layout guide.
Cover mode works excellently for hero images, backgrounds, and thumbnail previews where filling the space completely takes priority over showing the entire image. The image centers within the container, with any overflow hidden. For portrait images in landscape containers, the sides get cropped; for landscape images in portrait containers, the top and bottom get cropped.
Cover mode is the default because it produces visually complete results in most scenarios. The entire container appears filled with image content, preventing awkward empty spaces or borders around images.
Contain Mode
The contain mode scales the image uniformly to fit entirely within the container. Both dimensions will be equal to or less than container dimensions. This mirrors CSS background-size: contain, as documented in the React Native official Image documentation.
Use contain mode when preserving the full image matters more than filling the space. Product photos, artwork displays, and user-generated content often benefit from contain mode since viewers want to see the complete image without cropping. The image centers within the container, with potential empty space around it depending on aspect ratio differences.
Contain mode requires careful container styling since uncovered areas remain visible. These areas display whatever background color or content exists behind the image, which designers often address with centering containers or decorative borders.
Stretch Mode
The stretch mode scales width and height independently, potentially changing the image's aspect ratio. This mode corresponds to CSS background-size: 100% 100% and ignores aspect ratio preservation entirely.
Stretch mode suits cases where distortion is acceptable or desired, such as patterned backgrounds or gradient overlays. It's inappropriate for photographs or images where maintaining proportions matters. The stretched image may appear squashed or elongated, which viewers typically perceive as an error rather than a stylistic choice.
Repeat Mode
The repeat mode tiles the image to cover the container while maintaining the image's original size and aspect ratio. If the image is larger than the container, it scales down uniformly to fit.
Pattern backgrounds, texture overlays, and decorative elements benefit from repeat mode. The image repeats both horizontally and vertically, creating seamless tiled effects. This approach reduces bandwidth costs since small images can cover large areas through repetition.
Center Mode
The center mode centers the image without scaling if it fits within the container, or scales it down uniformly if the image exceeds container dimensions. This mode ensures the image displays at its natural size when possible, centering it within the available space.
Center mode suits scenarios where showing the full image at natural size takes priority, but the container might be smaller than the source image. Gallery viewers, image preview components, and document scanners commonly use center mode.
1import { Image, StyleSheet, View } from 'react-native';2 3const ImageDisplay = () => {4 return (5 <View style={styles.container}>6 <Image7 source={require('./assets/sample-image.jpg')}8 style={styles.image}9 resizeMode="cover"10 />11 </View>12 );13};14 15const styles = StyleSheet.create({16 container: {17 width: 200,18 height: 200,19 overflow: 'hidden',20 },21 image: {22 width: '100%',23 height: '100%',24 },25});Android-Specific: resizeMethod
On Android, the resizeMethod prop provides additional control over native-level resizing. This prop accepts four values: auto, resize, scale, and none. The default is auto, which uses heuristics to choose between resize and scale.
The resize method performs a software operation that changes the encoded image in memory before decoding. This approach produces higher quality results when the image is significantly larger than the display size, reducing memory usage and improving rendering performance. The scale method relies on hardware-accelerated drawing operations, which run faster but may introduce quality artifacts when downscaling substantially.
Use resize when displaying thumbnails or images significantly smaller than their source dimensions. The quality improvement from downsampling at the encoded level outweighs the slower processing time. Use scale for images close to their display size, where the performance benefit of hardware acceleration matters more than marginal quality differences.
The none option disables sampling entirely, displaying the image at full resolution. This mode risks memory issues with large images since Android must allocate memory for the full decoded bitmap regardless of display size. Only use none in rare cases where full-resolution display is essential and you control image dimensions carefully.
For production applications requiring optimal image performance, consider integrating with our AI automation services that can help optimize image delivery and processing pipelines across your mobile application.
Key techniques for optimal image handling
Image Prefetching
Use Image.prefetch() to download images for future use, ensuring instant display when needed.
Cache Management
Check cache status with Image.queryCache() to avoid redundant downloads.
Get Dimensions
Use Image.getSize() to retrieve dimensions before rendering for informed layout decisions.
FastImage Library
Use react-native-fast-image for production apps with aggressive caching and priority loading.
1import FastImage from 'react-native-fast-image';2 3const OptimizedImage = () => (4 <FastImage5 style={{ width: 200, height: 200 }}6 source={{7 uri: 'https://example.com/image.jpg',8 headers: { Authorization: 'Bearer token' },9 }}10 resizeMode={FastImage.resizeMode.cover}11 priority={FastImage.priority.high}12 />13);Profile Pictures
Use cover mode with borderRadius for circular cropping. Container overflow hidden ensures clean corners.
Product Thumbnails
Contain mode preserves complete product visibility. Center with light background for clean presentation.
Hero Backgrounds
Cover mode fills entire area. Add overlay view for text readability regardless of image brightness.