AvatarGroup

Component to display multiple avatars together in a compact, overlapping group layout.

The following avatars data will be used in the below demos:

const AVATAR_GROUP_DATA = Array.from({ length: 8 }).map((_, index) => ({
  url: `https://picsum.photos/200/300?random=${index}`,
}));

Usage

+5

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

Max Count

Limits the number of avatars displayed and shows a counter for the remaining ones.

+5

function AvatarGroupMaxCount() {
  return (
    <View>
      <AvatarGroup avatars={AVATAR_GROUP_DATA} />
      <Spacer />
      <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} />
      <Spacer />
      <AvatarGroup size="medium" avatars={AVATAR_GROUP_DATA} />
      <Spacer />
      <AvatarGroup size="large" avatars={AVATAR_GROUP_DATA} />
    </View>
  )
}

Bring to Front

Display the Avatar components with increasing z-index i.e. last Avatar item will be on the top.

+5

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

Spacing

Adjusts the horizontal overlap or spacing between grouped avatars.

+5

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

Custom Z-Index

Manually sets the z-index order of avatars for precise overlap control.

+3

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

Custom

+5

function AvatarGroupCustom() {
  return (
    <View>
      <AvatarGroup
        avatars={AVATAR_GROUP_DATA}
        onPress={() => alert('Avatar Pressed')}
        size={40}
        style={{alignSelf: 'center', borderWidth: 2, borderColor: 'yellow'}}
        renderCount={(count) => (
          <View
            style={{
              backgroundColor: 'gray',
              width: 40,
              height: 40,
              borderRadius: 20,
              justifyContent: 'center',
              alignItems: 'center',
            }}>
            <Text style={{color: 'white'}}>+{count}</Text>
          </View>
        )}
      />
    </View>
  )
}

Props

Prop	Data Type	Default Value	Description
Extends	AvatarProps	--	Inherits properties from AvatarProps
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