Master React Native Image Component

Last update: 2025-04-24
Type
Quick Win's logo Quick Win
Membership
🆓
Tech
TypeScript TypeScript
TypeScript
Share:

The Image component is a fundamental part of React Native that allows you to display various types of images in your mobile applications. In this guide, you’ll learn how to use the Image component effectively with practical examples.

Basic Image Usage

Let’s start with the basics of displaying images:

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

const ImageExample = () => {
	return (
		<View style={styles.container}>
			{/* Local Image */}
			<Image source={require('./assets/local-image.png')} style={styles.image} />

			{/* Remote Image */}
			<Image source={{ uri: 'https://picsum.photos/200/300' }} style={styles.image} />
		</View>
	);
};

const styles = StyleSheet.create({
	container: {
		flex: 1,
		alignItems: 'center',
		padding: 20
	},
	image: {
		width: 200,
		height: 200,
		marginVertical: 10,
		borderRadius: 10
	}
});

export default ImageExample;

This example demonstrates:

  • Loading local images using require()
  • Loading remote images using uri
  • Basic image styling with width, height, and border radius

Image Resizing Modes

React Native provides several resizing modes to control how images fit their containers:

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

const ResizeModeExample = () => {
	const imageUri = 'https://picsum.photos/400/200';

	return (
		<View style={styles.container}>
			{/* Cover - fills the container while maintaining aspect ratio */}
			<Text>resizeMode: 'cover'</Text>
			<Image source={{ uri: imageUri }} style={styles.image} resizeMode="cover" />

			{/* Contain - fits within container while maintaining aspect ratio */}
			<Text>resizeMode: 'contain'</Text>
			<Image source={{ uri: imageUri }} style={styles.image} resizeMode="contain" />

			{/* Stretch - stretches to fill container */}
			<Text>resizeMode: 'stretch'</Text>
			<Image source={{ uri: imageUri }} style={styles.image} resizeMode="stretch" />
		</View>
	);
};

const styles = StyleSheet.create({
	container: {
		flex: 1,
		alignItems: 'center',
		padding: 20
	},
	image: {
		width: 300,
		height: 150,
		marginVertical: 20,
		backgroundColor: '#f0f0f0'
	}
});

export default ResizeModeExample;

Key resizeMode options:

  • cover: Image scales to fill container, may crop
  • contain: Image scales to fit container entirely
  • stretch: Image stretches to fill container
  • center: Image centers in container without scaling
  • repeat: Image repeats to fill container (iOS only)

Handling Image Loading States

Implement loading states and error handling for better user experience:

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

const LoadingStateExample = () => {
	const [loading, setLoading] = useState(true);
	const [error, setError] = useState(false);

	return (
		<View style={styles.container}>
			<View style={styles.imageContainer}>
				<Image
					source={{ uri: 'https://picsum.photos/300/300' }}
					style={styles.image}
					onLoadStart={() => setLoading(true)}
					onLoadEnd={() => setLoading(false)}
					onError={() => {
						setError(true);
						setLoading(false);
					}}
				/>

				{loading && <ActivityIndicator style={styles.loader} size="large" color="#0000ff" />}

				{error && <Text style={styles.errorText}>Failed to load image</Text>}
			</View>
		</View>
	);
};

const styles = StyleSheet.create({
	container: {
		flex: 1,
		alignItems: 'center',
		padding: 20
	},
	imageContainer: {
		position: 'relative'
	},
	image: {
		width: 300,
		height: 300,
		borderRadius: 10
	},
	loader: {
		position: 'absolute',
		top: '50%',
		left: '50%',
		marginLeft: -20,
		marginTop: -20
	},
	errorText: {
		position: 'absolute',
		top: '50%',
		left: '50%',
		transform: [{ translateX: -50 }, { translateY: -10 }],
		color: 'red'
	}
});

export default LoadingStateExample;

This implementation shows:

  • Loading indicator while image loads
  • Error handling with fallback message
  • Proper positioning of loading and error states
  • Use of image events (onLoadStart, onLoadEnd, onError)

Background Images

Create components with background images:

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

const BackgroundImageExample = () => {
	return (
		<View style={styles.container}>
			<ImageBackground
				source={{ uri: 'https://picsum.photos/400/600' }}
				style={styles.backgroundImage}
				imageStyle={styles.backgroundImageStyle}
			>
				<View style={styles.content}>
					<Text style={styles.text}>Content with Background Image</Text>
				</View>
			</ImageBackground>
		</View>
	);
};

const styles = StyleSheet.create({
	container: {
		flex: 1
	},
	backgroundImage: {
		flex: 1,
		justifyContent: 'center'
	},
	backgroundImageStyle: {
		opacity: 0.7 // Adjust image opacity
	},
	content: {
		padding: 20,
		backgroundColor: 'rgba(0,0,0,0.5)'
	},
	text: {
		color: 'white',
		fontSize: 24,
		textAlign: 'center'
	}
});

export default BackgroundImageExample;

The ImageBackground component allows you to:

  • Use images as backgrounds for other components
  • Style both the container and image separately
  • Add overlays and content on top of the image
  • Adjust image opacity and blending

Performance Optimization

Implement performance best practices for image loading:

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

const OptimizedImage = memo(({ uri, style }) => (
	<Image
		source={{
			uri,
			// Cache the image
			cache: 'force-cache',
			// Specify width and height in source
			width: 300,
			height: 300
		}}
		style={style}
		// Prioritize image loading
		loading="eager"
		// Prefetch the image
		prefetch={true}
	/>
));

const PerformanceExample = () => {
	return (
		<View style={styles.container}>
			<OptimizedImage uri="https://picsum.photos/300/300" style={styles.image} />
		</View>
	);
};

const styles = StyleSheet.create({
	container: {
		flex: 1,
		alignItems: 'center',
		padding: 20
	},
	image: {
		width: 300,
		height: 300,
		borderRadius: 10
	}
});

export default PerformanceExample;

Performance optimization techniques:

  • Memoize image components to prevent unnecessary re-renders
  • Use image caching
  • Specify dimensions in source object
  • Prefetch important images
  • Use appropriate loading priorities

Best Practices

  1. Image Sizing

    • Always specify image dimensions
    • Use appropriate resizeMode
    • Consider screen density and resolution

  2. Loading States

    • Show loading indicators
    • Handle errors gracefully
    • Provide fallback images

  3. Performance

    • Optimize image sizes before loading
    • Implement caching strategies
    • Use image compression when appropriate
    • Lazy load non-critical images

  4. Accessibility

    • Add meaningful accessibility labels
    • Ensure sufficient contrast
    • Provide text alternatives

Common Use Cases

  • Profile pictures
  • Product images
  • Background images
  • Image galleries
  • Banner images
  • Icon displays

Summary

The React Native Image component is versatile and powerful when used correctly. By following these patterns and best practices, you can create efficient and visually appealing image displays in your apps.

Key takeaways:

  • Choose appropriate image loading methods
  • Implement proper error handling
  • Optimize for performance
  • Follow platform-specific guidelines
  • Consider user experience in your implementation

Now you’re ready to implement beautiful and performant images in your React Native apps! 🚀

Zero to Hero React Native Mission
Simon Grimm