Avatar

Avatar renders user profile photos, fallback initial letters, status indicator badges (online, busy, away, offline), shape options, and stacked avatar group rings.

Basic Usage

import { Avatar, AvatarImage, AvatarFallback, AvatarBadge } from '@masumdev/rn-ui';

export function AvatarExample() {
  return (
    <Avatar size="xl" shape="circle">
      <AvatarImage source={{ uri: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb' }} />
      <AvatarFallback>JD</AvatarFallback>
      <AvatarBadge status="online" />
    </Avatar>
  );
}

Shape Variants

Avatars support three shapes: circle (default), rounded, and square:

import { Avatar, AvatarImage, AvatarFallback, Box } from '@masumdev/rn-ui';

export function AvatarShapesExample() {
  return (
    <Box row gap="md">
      <Avatar size="lg" shape="circle">
        <AvatarImage source={{ uri: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb' }} />
        <AvatarFallback>JD</AvatarFallback>
      </Avatar>

      <Avatar size="lg" shape="rounded">
        <AvatarImage source={{ uri: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d' }} />
        <AvatarFallback>AM</AvatarFallback>
      </Avatar>

      <Avatar size="lg" shape="square">
        <AvatarImage source={{ uri: 'https://images.unsplash.com/photo-1492562080023-ab3db95bfbce' }} />
        <AvatarFallback>WL</AvatarFallback>
      </Avatar>
    </Box>
  );
}

Avatar Group Stacks

Group multiple avatars into an overlapping horizontal ring stack with <AvatarGroup>:

import { AvatarGroup, Avatar, AvatarImage, AvatarFallback, AvatarGroupCount } from '@masumdev/rn-ui';

export function AvatarStackExample() {
  return (
    <AvatarGroup size="lg" shape="rounded">
      <Avatar>
        <AvatarImage source={{ uri: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb' }} />
        <AvatarFallback>JD</AvatarFallback>
      </Avatar>
      <Avatar>
        <AvatarImage source={{ uri: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d' }} />
        <AvatarFallback>AM</AvatarFallback>
      </Avatar>
      <AvatarGroupCount count={8} />
    </AvatarGroup>
  );
}

Props API

Avatar

Prop	Type	Default	Description
`size`	`'sm' \| 'default' \| 'lg' \| 'xl' \| number`	`'default'`	Avatar diameter size (sm=28px, default=36px, lg=44px, xl=56px).
`shape`	`'circle' \| 'square' \| 'rounded'`	`'circle'`	Border radius shape profile.
`children`	`ReactNode`	—	Sub-components (AvatarImage, AvatarFallback, AvatarBadge).

AvatarBadge

Prop	Type	Default	Description
`status`	`'online' \| 'busy' \| 'away' \| 'offline'`	`'online'`	Predefined status indicator color (online=success, busy=danger, away=warning, offline=muted).
`bg`	`string`	—	Custom background color override.

AvatarGroup

Prop	Type	Default	Description
`size`	`'sm' \| 'default' \| 'lg' \| 'xl' \| number`	`'default'`	Uniform size for all child avatars in group.
`shape`	`'circle' \| 'square' \| 'rounded'`	`'circle'`	Uniform shape profile for all child avatars in group.