Avatar — 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

O instala el paquete completo e impórtalo

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

Depende de:core (theme + icons)

Uso

cuándo usarlo — Representar a una persona o entidad: cabeceras de perfil, filas de lista, hilos de comentarios.
size — Un número en puntos (44 por defecto). Conviene un solo tamaño por contexto.
backgroundColor — Override del círculo; sirve para codificar por color según el tipo de entidad.

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

Variantes

With icon

<Avatar size={44}>
  <Icon name="check" size={20} />
</Avatar>

With initials

<Avatar size={44}>
  <Body style={{ fontWeight: '700' }}>JD</Body>
</Avatar>

Sizes

<VariantRow>
  <Avatar size={28}>
    <Body style={{ fontWeight: '700', fontSize: 11 }}>SM</Body>
  </Avatar>
  <Avatar size={44}>
    <Body style={{ fontWeight: '700' }}>MD</Body>
  </Avatar>
  <Avatar size={64}>
    <Body style={{ fontWeight: '700', fontSize: 18 }}>LG</Body>
  </Avatar>
</VariantRow>

Custom color

<Avatar size={44} backgroundColor="#00cae130">
  <Icon name="info" size={22} color="#00cae1" />
</Avatar>

Código completo del demo

const variants: VariantDef[] = [
  {
    label: 'With icon',
    content: (
      <Avatar size={44}>
        <Icon name="check" size={20} />
      </Avatar>
    ),
  },
  {
    label: 'With initials',
    content: (
      <Avatar size={44}>
        <Body style={{ fontWeight: '700' }}>JD</Body>
      </Avatar>
    ),
  },
  {
    label: 'Sizes',
    content: (
      <VariantRow>
        <Avatar size={28}>
          <Body style={{ fontWeight: '700', fontSize: 11 }}>SM</Body>
        </Avatar>
        <Avatar size={44}>
          <Body style={{ fontWeight: '700' }}>MD</Body>
        </Avatar>
        <Avatar size={64}>
          <Body style={{ fontWeight: '700', fontSize: 18 }}>LG</Body>
        </Avatar>
      </VariantRow>
    ),
  },
  {
    label: 'Custom color',
    content: (
      <Avatar size={44} backgroundColor="#00cae130">
        <Icon name="info" size={22} color="#00cae1" />
      </Avatar>
    ),
  },
];
return <VariantList variants={variants} />;

Props

Nombre	Tipo	Por defecto	Descripción
`size?`	`number`	44	—
`backgroundColor?`	`string`	—	—
`style?`	`StyleProp<ViewStyle>`	—	—