Image

A responsive image component with loading states, error handling, and flexible styling options.

Installation


pnpm dlx bna-ui add image

import { Image } from '@/components/ui/image';

<Image
  source={{ uri: 'https://picsum.photos/400/300' }}
  width={400}
  height={300}
/>

A responsive image component with loading states and error handling.

Prop	Type	Default	Description
`source`	`ImageSource`	-	The image source (required).
`full`	`boolean`	`true`	Whether the image should fill its container.
`variant`	`'rounded' \| 'circle'`	`'rounded'`	The border radius variant.
`width`	`number \| string`	-	The width of the image.
`height`	`number \| string`	-	The height of the image.
`aspectRatio`	`number`	-	The aspect ratio of the image.
`contentFit`	`ContentFit`	`'cover'`	How the image should fit within its bounds.
`showLoadingIndicator`	`boolean`	`true`	Whether to show loading indicator.
`showErrorFallback`	`boolean`	`true`	Whether to show error fallback.
`errorFallbackText`	`string`	`'Failed to load image'`	The error fallback text.
`loadingIndicatorSize`	`'small' \| 'large'`	`'small'`	The size of the loading indicator.
`loadingIndicatorColor`	`string`	-	The color of the loading indicator.
`transition`	`number`	`200`	The transition duration in milliseconds.
`style`	`ImageProps['style']`	-	Additional styles to apply to the image.
`containerStyle`	`ViewStyle`	-	Additional styles to apply to the container.
`onLoadStart`	`() => void`	-	Callback when image starts loading.
`onLoadEnd`	`() => void`	-	Callback when image finishes loading.
`onError`	`() => void`	-	Callback when image fails to load.

The contentFit prop accepts the following values:

The Image component is built with accessibility in mind:

The Image component uses Expo Image under the hood, which provides:

On This Page