orn-ui
← Todos los componentes
Ver como Markdown
Atom

Image

Requiere <UIProvider> — Primeros pasos →

Instalación

Instala solo este componente (copia el código fuente a tu proyecto, sin dependencia npm)

npx orn-ui add image

O instala el paquete completo e impórtalo

pnpm add orn-ui
import { Image } from 'orn-ui/image';
Depende de:core (theme + icons)spinner

Uso

  • cuándo usarlo — Imágenes remotas que necesitan estado de carga y de error — o sea, casi todas.
  • radius — Mismo patrón que Avatar/Card. Se define aquí, no con un wrapper con overflow.
  • loading / fallback — Qué mostrar mientras carga y si falla. Ambas aceptan un nodo, así que un skeleton con forma de imagen entra bien.
  • priority — `high` hace prefetch al montar — para la imagen principal de una pantalla, no para cada ítem de una lista.
Clip del demo todavía sin grabar — ver MEDIA.md

Variantes

Basic

<Image
  source={{ uri: 'https://picsum.photos/200' }}
  width={120}
  height={120}
  radius={12}
/>

Sizes & radius

<VariantRow>
  <Image source={{ uri: 'https://picsum.photos/200' }} width={48} height={48} radius={24} />
  <Image source={{ uri: 'https://picsum.photos/200' }} width={72} height={72} radius={12} />
  <Image source={{ uri: 'https://picsum.photos/200' }} width={96} height={96} radius={0} />
</VariantRow>

Custom fallback

<Image
  source={{ uri: 'https://example.com/broken.png' }}
  width={120}
  height={120}
  radius={12}
  fallback={<Body style={{ textAlign: 'center', padding: 8 }}>Couldn’t load</Body>}
/>

Above-the-fold (priority="high")

<Image
  source={{ uri: 'https://picsum.photos/400' }}
  width={160}
  height={90}
  radius={8}
  priority="high"
/>
Código completo del demo
const variants: VariantDef[] = [
  {
    label: 'Basic',
    content: (
      <Image
        source={{ uri: 'https://picsum.photos/200' }}
        width={120}
        height={120}
        radius={12}
      />
    ),
  },
  {
    label: 'Sizes & radius',
    content: (
      <VariantRow>
        <Image source={{ uri: 'https://picsum.photos/200' }} width={48} height={48} radius={24} />
        <Image source={{ uri: 'https://picsum.photos/200' }} width={72} height={72} radius={12} />
        <Image source={{ uri: 'https://picsum.photos/200' }} width={96} height={96} radius={0} />
      </VariantRow>
    ),
  },
  {
    label: 'Custom fallback',
    content: (
      <Image
        source={{ uri: 'https://example.com/broken.png' }}
        width={120}
        height={120}
        radius={12}
        fallback={<Body style={{ textAlign: 'center', padding: 8 }}>Couldn’t load</Body>}
      />
    ),
  },
  {
    label: 'Above-the-fold (priority="high")',
    content: (
      <Image
        source={{ uri: 'https://picsum.photos/400' }}
        width={160}
        height={90}
        radius={8}
        priority="high"
      />
    ),
  },
];
return <VariantList variants={variants} />;

Props

Además acepta testID, que se reenvía al nodo raíz. Existe para los tests end-to-end (Maestro maneja la app por el árbol de accesibilidad) y no cambia en nada cómo se ve ni cómo se comporta el componente.

NombreTipoPor defectoDescripción
sourceImageSourcePropType——
width?number——
height?number——
resizeMode?'cover' | 'contain' | 'stretch' | 'repeat' | 'center' | 'none'cover—
radius?number0Radio de las esquinas, mismo patrón que Avatar/Card.
loading?ReactNodetrueQué mostrar mientras carga. `false` para no mostrar nada.
fallback?ReactNodea gray placeholder, no contentQué mostrar si la carga falla.
priority?'low' | 'normal' | 'high'normal'high' dispara Image.prefetch() al montar, antes de que <Image> arranque su propio ciclo de carga — pensado para la imagen above-the-fold de una pantalla (la primera que ve el usuario). Sin costo si ya está en caché.
style?StyleProp<ViewStyle>——
onLoadEnd?() => void——
onError?(error: NativeSyntheticEvent<ImageErrorEventData>) => void——
AnteriorIconButtonSiguienteInput