# rn-avatar-thumbnail
URL: /docs/native/docyrus/avatar-thumbnail

Avatar display component that renders an image, an emoji or a DocyrusIcon on a Tailwind-coloured background with a configurable shape.

## Installation

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

## Usage

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

```

### With Image

```tsx

```

### With Emoji

```tsx

```

### Shapes

```tsx

```

## 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 [rn-docyrus-icon](/docs/native/docyrus/docyrus-icon) 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

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `size` | `number` | `32` | Width and height in pixels (web: Tailwind step). |
| `icon` | `string \| null` | — | Emoji, or a DocyrusIcon string such as `"fal star"`. |
| `color` | `string \| null` | — | Background colour — Tailwind name (`"indigo-500"`) or raw colour. Falls back to `bg-muted`. |
| `image` | `{ signed_url?: string \| null; file_name?: string } \| null` | — | Image object. When `signed_url` is present the image is displayed and other fallbacks are skipped. |
| `shape` | `'rounded' \| 'circle' \| 'square'` | `'rounded'` | Border radius (`rounded-md`, `rounded-full`, `rounded-none`). |
| `ref` | `Ref<View>` | — | Ref to the container `View`. |
| `className` | `string` | — | Additional classes for the container. |

## Exports

| Export | Description |
|--------|-------------|
| `AvatarThumbnail` | The avatar component |
| `avatarThumbnailVariants` | `tv()` definition of the container (`shape` variant) |

## Type Exports

| Type | Description |
|------|-------------|
| `AvatarThumbnailProps` | Props for the AvatarThumbnail component. |
| `AvatarThumbnailShape` | Shape variant: `'rounded' \| 'circle' \| 'square'`. |