AvatarGroup

Component to show an image, initials or icon with different shapes.

Usage

+5

function AvatarGroupUsage() {
  return (
    <View>
      <AvatarGroup avatars={AVATAR_GROUP_DATA} />
    </View>
  )
}

Max Count

+5

function AvatarGroupMaxCount() {
  return (
    <View>
      <AvatarGroup avatars={AVATAR_GROUP_DATA} />
      <AvatarGroup max={2} avatars={AVATAR_GROUP_DATA.slice(0, 2)} />
    </View>
  )
}

Size

+5

+5

+5

function AvatarGroupSizes() {
  return (
    <View style={{justifyContent: 'space-evenly'}}>
      <AvatarGroup size="small" avatars={AVATAR_GROUP_DATA} />
      <AvatarGroup size="medium" avatars={AVATAR_GROUP_DATA} />
      <AvatarGroup size="large" avatars={AVATAR_GROUP_DATA} />
    </View>
  )
}

Bring to Front

+5

function AvatarGroupBringToFront() {
  return (
    <View>
      <AvatarGroup avatars={AVATAR_GROUP_DATA} bringToFront />
    </View>
  )
}

Spacing

+5

function AvatarGroupSpacing() {
  return (
    <View>
      <AvatarGroup bringToFront avatars={AVATAR_GROUP_DATA} spacing={-32} />
    </View>
  )
}

Custom Z-Index

+3

function AvatarGroupCustomZIndex() {
  return (
    <View>
      <AvatarGroup
        max={5}
        avatars={AVATAR_GROUP_DATA.map((avatar, index) => ({
          ...avatar,
          zIndex: index % 2 === 0 ? 10 : -10,
        }))}
      />
    </View>
  )
}

Status

+5

+5

+5

+5

+5

+5

function AvatarGroupStatuses() {
  return (
    <View style={{justifyContent: 'space-evenly'}}>
      <AvatarGroup status="primary" avatars={AVATAR_GROUP_DATA} />
      <AvatarGroup status="accent" avatars={AVATAR_GROUP_DATA} />
      <AvatarGroup status="success" avatars={AVATAR_GROUP_DATA} />
      <AvatarGroup status="info" avatars={AVATAR_GROUP_DATA} />
      <AvatarGroup status="warning" avatars={AVATAR_GROUP_DATA} />
      <AvatarGroup status="error" avatars={AVATAR_GROUP_DATA} />
    </View>
  )
}

Custom

+5

function AvatarGroupCustomZIndex() {
  return (
    <View>
      <AvatarGroup
        max={5}
        avatars={AVATAR_GROUP_DATA.map((avatar, index) => ({
          ...avatar,
          zIndex: index % 2 === 0 ? 10 : -10,
        }))}
      />
    </View>
  )
}

Props

Prop	Data Type	Default Value	Description
Extends	Omit<AvatarProps, 'source' | 'url' | 'initials'>	--	Inherits properties from Omit<AvatarProps, 'source' | 'url' | 'initials'>
avatars	AvatarGroupItem[]	--	List of avatar items to show in the group
max	number	3	Maximum avatars to show in the group
spacing	number	-10	Spacing between the avatars
bringToFront	boolean	--	Control the zIndex of the Avatar item
renderCount	(extraCount: number) => ReactNode	--	Render custom view for the extra count