Components
iOSAndroid
Installation
pnpm dlx @docyrus/cli add @docyrus/rn-avatarUsage
import { Avatar } from '@/components/docyrus-native/avatar';
<Avatar uri="https://i.pravatar.cc/150?img=1" size="lg" />
<Avatar name="John Doe" variant="soft" status="online" />
<Avatar name="AB" shape="rounded" variant="outline" />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
uri | string | — | Image URI for the avatar |
name | string | — | Name used to generate initials fallback |
shape | 'circle' | 'rounded' | 'circle' | Avatar shape |
size | 'xs' | 'sm' | 'md' | 'lg' | 'md' | Avatar size |
variant | 'solid' | 'soft' | 'outline' | 'solid' | Background style variant |
status | 'none' | 'online' | 'offline' | 'busy' | 'away' | 'none' | Status indicator dot |
onPress | () => void | — | Press handler (wraps in Pressable) |
className | string | — | Additional CSS classes |
textClassName | string | — | Initials text CSS classes |
Type Exports
| Type | Description |
|---|---|
AvatarProps | Props for Avatar component |
AvatarShape | 'circle' | 'rounded' |
AvatarSize | 'xs' | 'sm' | 'md' | 'lg' |
AvatarVariant | 'solid' | 'soft' | 'outline' |
AvatarStatus | 'none' | 'online' | 'offline' | 'busy' | 'away' |