Skip to content

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

Prop Description Type
items (required) Array of React nodes (typically avatar components) to display in the stack. ReactNode[]
avatarSize The size key used to determine the diameter of each avatar in the stack. Controls the spacing calculations. Defaults to 'sm'. 'md' | 'sm' | 'xs'
maxVisible Maximum number of avatars to display before showing a count badge for the overflow. Defaults to 3. number
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. Defaults to 0. number

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

Prop Description Type
users (required) Array of user objects to display in the avatar stack. UserResponse[]
avatarSize Same as AvatarStack.avatarSize. Defaults to 'sm'. 'md' | 'sm' | 'xs'
maxVisible Same as AvatarStack.maxVisible. Defaults to 3. number
overlap Same as AvatarStack.overlap. Defaults to 0. number