# Image > Atom — orn-ui > ⚠️ Requires : This component (like every orn-ui component) must render inside a ancestor, or it throws at runtime. See https://orn-ui-docs.vercel.app/getting-started.md > Runs on Expo SDK 54, 55, 56 and 57, and on bare React Native >=0.81 with react >=19.1. No native modules — works in Expo Go, no prebuild. ## Installation Install just this component (copies the source into your project, no npm dependency) ```bash npx orn-ui add image ``` Or install the whole package and import it ```tsx pnpm add orn-ui import { Image } from 'orn-ui/image'; ``` Depends on: core (theme + icons), spinner ## Variants ### Basic ```tsx ``` ### Sizes & radius ```tsx ``` ### Custom fallback ```tsx Couldn’t load} /> ``` ### Above-the-fold (priority="high") ```tsx ``` ## Full demo source ```tsx const variants: VariantDef[] = [ { label: 'Basic', content: ( ), }, { label: 'Sizes & radius', content: ( ), }, { label: 'Custom fallback', content: ( Couldn’t load} /> ), }, { label: 'Above-the-fold (priority="high")', content: ( ), }, ]; return ; ``` ## Props | Name | Type | Default | Description | |---|---|---|---| | `source` | `ImageSourcePropType` | — | — | | `width?` | `number` | — | — | | `height?` | `number` | — | — | | `resizeMode?` | `'cover' \| 'contain' \| 'stretch' \| 'repeat' \| 'center' \| 'none'` | cover | — | | `radius?` | `number` | 0 | Corner radius, same pattern as Avatar/Card. | | `loading?` | `ReactNode` | true | What to show while loading. `false` shows nothing. | | `fallback?` | `ReactNode` | a plain grey placeholder, no content | What to show if loading fails. | | `priority?` | `'low' \| 'normal' \| 'high'` | normal | 'high' fires Image.prefetch() on mount, before starts its own loading cycle — meant for the above-the-fold image of a screen (the first one the user sees). Free if it is already cached. | | `style?` | `StyleProp` | — | — | | `onLoadEnd?` | `() => void` | — | — | | `onError?` | `(error: NativeSyntheticEvent) => void` | — | — |