Avatar

Avatar displays a user or entity representation. It supports images, text initials, or icon fallbacks, and can be grouped for showing multiple users.

Preview

☯

Variants

Icon (Default)

Displays an icon or emoji when no image or initials are provided.

☯

☰

⚋

<Avatar icon="☯" />
<Avatar icon="☰" />
<Avatar icon="⚋" />

Initials

Displays up to 2 characters when no image is available.

<Avatar initials="JD" />
<Avatar initials="AB" />
<Avatar initials="YI" />

Image

Displays a user photo or profile image.

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

Sizes

Size	Dimension	Usage
`xs`	24px	Inline mentions, compact lists
`sm`	32px	Comments, notifications
`md`	40px	Default, list items
`lg`	56px	Profile headers
`xl`	80px	Full profile view

Avatar Group

Display multiple avatars in a stacked layout with overlap.

<AvatarGroup max={3}>
  <Avatar initials="JD" />
  <Avatar initials="AB" />
  <Avatar initials="CD" />
  <Avatar initials="EF" />
  <Avatar initials="GH" />
  <Avatar initials="IJ" />
</AvatarGroup>

Group Sizes

<AvatarGroup size="sm">...</AvatarGroup>
<AvatarGroup size="lg">...</AvatarGroup>

Custom Background

Override the default background color for initials/icon avatars.

☯

✓

<Avatar icon="☯" backgroundColor={colors['gold-muted']} />
<Avatar icon="✓" backgroundColor={colors['support-success']} />
<Avatar icon="!" backgroundColor={colors['support-error']} />

API Reference

Avatar Props

Prop	Type	Default	Description
`source`	`ImageSourcePropType`	-	Image source
`initials`	`string`	-	Fallback initials (max 2 chars)
`icon`	`string`	`'☯'`	Fallback icon/emoji
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	Avatar size
`backgroundColor`	`string`	-	Custom background color
`style`	`ViewStyle`	-	Custom styles
`accessibilityLabel`	`string`	-	A11y label

AvatarGroup Props

Prop	Type	Default	Description
`children`	`ReactNode`	Required	Avatar elements
`max`	`number`	`4`	Max visible avatars
`size`	`AvatarSize`	`'md'`	Size for all avatars
`style`	`ViewStyle`	-	Custom styles

Complete Example

import { Avatar, AvatarGroup, Card, Badge } from '@synchronicity/react-native';
import { View, Text } from 'react-native';

function ReadingParticipants({ participants }) {
  return (
    <Card variant="outlined" padding="md">
      <View style={styles.header}>
        <Text style={styles.title}>Shared Reading</Text>
        <Badge variant="info" size="sm">{participants.length}</Badge>
      </View>

      <AvatarGroup max={4} size="sm">
        {participants.map((p) => (
          <Avatar
            key={p.id}
            source={p.avatar ? { uri: p.avatar } : undefined}
            initials={p.initials}
            accessibilityLabel={p.name}
          />
        ))}
      </AvatarGroup>

      <Text style={styles.names}>
        {participants.map(p => p.name).join(', ')}
      </Text>
    </Card>
  );
}