AvatarThumbnail

Installation

pnpm dlx @docyrus/cli add @docyrus/rn-avatar-thumbnail

Usage

import { AvatarThumbnail } from '@/components/docyrus-native/avatar-thumbnail';

<AvatarThumbnail size={48} icon="fal rocket" color="indigo-500" />

With Image

<AvatarThumbnail
  size={64}
  image={{ signed_url: 'https://example.com/avatar.jpg', file_name: 'avatar.jpg' }}
  shape="circle"
/>

With Emoji

<AvatarThumbnail size={40} icon="🚀" color="violet-200" shape="circle" />

Shapes

<AvatarThumbnail icon="fal star" color="blue-500" shape="rounded" />
<AvatarThumbnail icon="fal star" color="green-500" shape="circle" />
<AvatarThumbnail icon="fal star" color="red-500" shape="square" />

Rendering rules

1. image.signed_url present → the image fills the avatar (other props are ignored except shape).
2. icon is an emoji → rendered as text at 62.5% of size.
3. icon is any other string ("fal star", "huge notification-01", …) → rendered through DocyrusIcon at 62.5% of size.
4. No icon → a muted ?.

Icon colour follows the web rule: a Tailwind colour name with level <= 300 (blue-200, amber-300) gets a black icon, any higher level (blue-400, indigo-500) a white one; a hex colour picks black or white by luminance; anything else uses the theme foreground.

Background — color accepts a Tailwind name ("indigo-500", resolved via resolveColorHex then the theme's full shade palette) or any raw colour. Without color the avatar uses bg-muted.

Size semantics (native vs web)

size is a pixel value on native (default 32). On web it is a Tailwind size step (default 8 → size-8 = 32px). A value shared between platforms must be multiplied by 4 for native (web size={10} ↔ native size={40}).

API Reference

Exports

Type Exports