Avatar — React Native component

Installation

Install just this component (copies the source into your project, no npm dependency)

npx orn-ui add avatar

Or install the whole package and import it

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

Depends on:core (theme + icons)

Usage

when to use — Representing a person or entity: profile headers, list rows, comment threads.
size — A number in points (44 by default). Keep one size per context.
backgroundColor — Override for the circle; useful to color-code by entity type.

Demo clip not recorded yet — see MEDIA.md

Variants

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>

Full demo source

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

Name	Type	Default	Description
`size?`	`number`	44	—
`backgroundColor?`	`string`	—	—
`style?`	`StyleProp<ViewStyle>`	—	—