REACT-NATIVES

WIRED FOR SPEED

react-natives v2.1.2

Theme

Light

Dark

Get Started

Components

Core Primitives

Image

A styled image component with built-in size presets and border-radius options, requiring an accessible alt label.

Example

Preview

Code

Props

Image Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes to apply to the image element.

size

'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'

'md'

Preset dimensions for the image.

borderRadius

'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'

'none'

Preset border radius for the image.

alt *

string

—

Accessible text describing the image content.

source *

ImageSourcePropType

—

The image source (require() or { uri }).

Usage Guidelines

When to use

Use Image when you need to display raster images with consistent sizing and rounding.

Best practices

•

Always provide a meaningful alt prop for accessibility.

•

Use size presets for consistent image dimensions across the app.

•

Consider borderRadius="full" for circular profile-style images.

Accessibility

The alt prop is used as the accessible label. Screen readers will announce the alt text when the image is focused.

Related Components

Avatar

A compound component for displaying user profile images, initials fallback, online badges, and grouped avatar stacks.

Card

A compound container component with header, body, and footer sections for grouping related content.

Badge

A compound component for displaying short status labels, counts, or tags with semantic color and variant options.

React-Natives

A comprehensive React Native component library.

Documentation

Getting Started

Components

Theming

Community

GitHub

Discord

Twitter

Blog

Support

FAQ

Contact

Contributing

License