Image

Image, a React Native component for iOS, Android and web: An image with a loading state, alt text and a failure fallback.

Usage

import { Image } from './components/ui/image';
import { Stack } from './components/ui/stack';

const photo = require('./assets/sample.png');

export default function Example() {
  return (
    <Stack direction="horizontal" gap={3} wrap>
      <Image source={photo} alt="A generated landscape" aspectRatio={1.6} style={{ width: 280 }} />
      <Image source={null} alt="No source, so this shows the fallback" aspectRatio={1.6} style={{ width: 280 }} />
    </Stack>
  );
}

Props

Prop	Type	Default	Description
`source`	`ImageSourcePropType \| string \| null`		URL or a bundled `require()`. A missing source shows the fallback.
`alt`	`string`		What the image shows. Use `""` for purely decorative images, which screen readers then skip.
`aspectRatio`	`number`
`radius`	`'none' \| 'sm' \| 'md' \| 'lg' \| 'full'`	'md'
`fallback`	`ReactNode`		Shown when the source is missing or fails. Defaults to a muted box with the alt text, or a small image mark when the image is decorative.
`style`	`StyleProp<ViewStyle>`