Avatar

A circular avatar component for displaying user profile images with initials fallback support.

Basic Usage

import { Avatar } from '@multinaire/ui';

// With image source
<Avatar source={{ uri: 'https://example.com/avatar.jpg' }} />

// With name fallback (shows initials when no image)
<Avatar name="John Doe" />

// With both (shows initials while loading or if image fails)
<Avatar
  source={{ uri: 'https://example.com/avatar.jpg' }}
  name="John Doe"
/>

Props

Prop	Type	Default	Description
source	ImageSource	—	Image source. Falls back to initials when not provided
name	string	—	Full name used to generate initials when no image source is provided
size	number	theme medium	Diameter of the avatar in pixels
isLoading	boolean	false	Show a circular loading skeleton in place of the avatar

Examples

Different Sizes

<Avatar name="John Doe" size={32} />
<Avatar name="John Doe" size={48} />
<Avatar name="John Doe" size={64} />

Loading State

<Avatar isLoading size={48} />

With Remote Image

<Avatar
  source={{ uri: user.avatarUrl }}
  name={user.displayName}
  size={56}
/>

Features

• Circular shape: Automatically renders as a circle
• Initials fallback: Shows user initials when no image is provided or while loading
• Theme-aware sizing: Uses theme variables for consistent sizing
• Loading state: Built-in skeleton loading support