AvatarHeader — componente React Native

Instalación

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

npx orn-ui add avatar-header

O instala el paquete completo e impórtalo

pnpm add orn-ui
import { AvatarHeader } from 'orn-ui/avatar-header';

Depende de:core (theme + icons)

Uso

cuándo usarlo — La cabecera de un perfil o una pantalla de detalle: avatar, título y una línea de apoyo.
iconName / initials — Las iniciales cuando hay un nombre; el ícono cuando no lo hay.

Clip del demo todavía sin grabar — ver MEDIA.md

Variantes

With initials

<AvatarHeader initials="JD" title="Jane Doe" subtitle="Customer since 2023" />

With icon

<AvatarHeader iconName="check" title="Order confirmed" subtitle="#A-10492" />

Custom iconColor

<AvatarHeader iconName="info" iconColor="#00cae1" title="Account details" />

Código completo del demo

const variants: VariantDef[] = [
  { label: 'With initials', content: <AvatarHeader initials="JD" title="Jane Doe" subtitle="Customer since 2023" /> },
  { label: 'With icon', content: <AvatarHeader iconName="check" title="Order confirmed" subtitle="#A-10492" /> },
  { label: 'Custom iconColor', content: <AvatarHeader iconName="info" iconColor="#00cae1" title="Account details" /> },
];
return <VariantList variants={variants} />;

Props

Nombre	Tipo	Por defecto	Descripción
`iconName?`	`IconName`	—	Ícono a mostrar dentro del círculo. Si se omite, se usa `initials`.
`iconColor?`	`string`	—	—
`initials?`	`string`	—	Texto corto (ej. 2 letras) que se muestra cuando no se pasa `iconName`.
`title`	`string`	—	—
`subtitle?`	`ReactNode`	—	—
`style?`	`StyleProp<ViewStyle>`	—	—