Avatar

Display

Displays a user image with auto-generated initials + color fallback. Supports status indicators, square shape, and an AvatarGroup stack.

GitHub

Installation

bash

npx native-mate add avatar

Examples

#FAFAFA

Radius100%

Usage

tsx

import { Avatar, AvatarGroup } from '~/components/ui/avatar'

// Auto-color from name
<Avatar name="Alice Smith" size="md" />

// With image + status
<Avatar src="https://example.com/alice.jpg" name="Alice" status="online" />

// Avatar group stack
<AvatarGroup avatars={[{ name: 'Alice' }, { name: 'Bob' }, { name: 'Carol' }]} max={3} />

Props

Prop	Type	Default	Description
src	string	—	URI of the avatar image.
name	string	—	Full name used to auto-generate initials and a consistent background color.
fallback	string	—	Override initials text (max 2 chars).
size	"xs" \| "sm" \| "md" \| "lg" \| "xl"	"md"	Controls the width, height, and font size.
status	"online" \| "offline" \| "busy" \| "away"	—	Shows a coloured status dot in the bottom-right corner.
shape	"circle" \| "square"	"circle"	Circle or rounded-square shape.
color	string	—	Override the auto-generated background color.

Example

tsx

import { Avatar, AvatarGroup } from '~/components/ui/avatar'
import { View } from 'react-native'

export function AvatarExamples() {
  return (
    <View style={{ gap: 20, padding: 16 }}>
      <View style={{ flexDirection: 'row', gap: 12, alignItems: 'center' }}>
        <Avatar size="xs" name="John Doe" />
        <Avatar size="sm" name="Jane Smith" status="online" />
        <Avatar size="md" src="https://i.pravatar.cc/100?img=1" name="Alice" status="busy" />
        <Avatar size="lg" name="Sam Lee" status="away" />
        <Avatar size="xl" name="Chris Park" />
      </View>
      <AvatarGroup
        avatars={[{ name: 'Alice B' }, { name: 'Bob C' }, { name: 'Carol D' }, { name: 'Dave E' }, { name: 'Eve F' }]}
        max={4}
      />
    </View>
  )
}

Tabs

Checkbox