# AvatarHeader

> Molecule — orn-ui

> ⚠️ Requiere <UIProvider>: Este componente (como todos los de orn-ui) debe renderizarse dentro de un ancestro <UIProvider>, o lanza un error en runtime. See https://orn-ui-docs.vercel.app/getting-started.md

> Corre en Expo SDK 54, 55, 56 y 57, y en React Native puro >=0.81 con react >=19.1. Sin módulos nativos — funciona en Expo Go, sin prebuild.

## Instalación

Instala solo este componente (copia el código fuente a tu proyecto, sin dependencia npm)
```bash
npx orn-ui add avatar-header
```

O instala el paquete completo e impórtalo
```tsx
pnpm add orn-ui
import { AvatarHeader } from 'orn-ui/avatar-header';
```

Depende de: core (theme + icons)

## Variantes

### With initials

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

### With icon

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

### Custom iconColor

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

## Código completo del demo

```tsx
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>` | — | — |