Image Component

Image Component

The Image component is used to display images from local assets, remote URLs, or local device storage in React Native applications.

Displaying a Local Image

Local images are typically bundled with the app and referenced using the require function.

javascript import { Image } from 'react-native';

Displaying a Remote Image

Remote images are loaded using a URI object, and you must always specify explicit width and height styles since React Native cannot automatically determine remote image dimensions.

javascript

Resize Modes

The resizeMode prop controls how an image scales within its container, with common values including cover, contain, stretch, and center.

javascript

Handling Loading and Errors

The onLoad and onError props allow you to run custom logic when an image successfully loads or fails to load, such as displaying a placeholder or fallback image.

javascript console.log('Failed to load image')} style={{ width: 100, height: 100 }} />

Rounded and Circular Images

Applying a borderRadius equal to half the width creates circular images, a common pattern for profile pictures and avatars.

javascript

Conclusion

The Image component provides flexible options for displaying both local and remote images. Understanding resize modes, error handling, and styling patterns like circular avatars is essential for building polished, professional mobile interfaces.