AvatarStack

AvatarStack renders a horizontal row of overlapping avatars, commonly used to display a list of participants. When the number of items exceeds maxVisible, the remaining count is shown via a BadgeCount component.

A higher-level UserAvatarStack wrapper is also available for convenience when working with user objects.

Usage

import { AvatarStack, UserAvatar } from "stream-chat-react-native";

<AvatarStack
  avatarSize="sm"
  maxVisible={3}
  overlap={0.3}
  items={[
    <UserAvatar user={user1} size="sm" />,
    <UserAvatar user={user2} size="sm" />,
    <UserAvatar user={user3} size="sm" />,
    <UserAvatar user={user4} size="sm" />,
    <UserAvatar user={user5} size="sm" />,
  ]}
/>;

Props

items (required)

Array of React nodes (typically avatar components) to display in the stack.

avatarSize

The size key used to determine the diameter of each avatar in the stack. This controls the spacing calculations.

maxVisible

Maximum number of avatars to display before showing a count badge for the overflow.

overlap

A value between 0 and 1 that controls how much each avatar overlaps the previous one. 0 means no overlap (avatars side by side); higher values increase the overlap.

UserAvatarStack

UserAvatarStack is a convenience wrapper around AvatarStack that accepts an array of user objects instead of raw React nodes. Each user is automatically rendered as a UserAvatar.

Usage

import { UserAvatarStack } from "stream-chat-react-native";

<UserAvatarStack
  users={[user1, user2, user3, user4, user5]}
  avatarSize="sm"
  maxVisible={3}
  overlap={0.25}
/>;

Props

users (required)

Array of user objects to display in the avatar stack.

avatarSize

Same as AvatarStack.avatarSize.

maxVisible

Same as AvatarStack.maxVisible.

overlap

Same as AvatarStack.overlap.