UserAvatar

UserAvatar extends the base Avatar component to render user-specific avatars. It automatically generates initials from the user's name, assigns a deterministic background color based on the user ID hash, and optionally displays an OnlineIndicator.

If the user has an image property, their profile picture is rendered. Otherwise, the component displays their name initials as a placeholder. For smaller sizes (xs, sm), only one initial is shown; for larger sizes, two initials are used.

When no name is available, a PeopleIcon is rendered as the fallback.

Usage

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

<UserAvatar
  user={{ id: "john", name: "John Doe", image: "https://example.com/john.png" }}
  size="xl"
  showOnlineIndicator
/>;

Without an image (renders initials):

<UserAvatar user={{ id: "jane", name: "Jane Smith" }} size="lg" />

Props

user (required)

The user object containing identity information used to render the avatar.

Key fields used from the user object:

• id — used to generate a deterministic background color
• name — used to derive initials for the placeholder
• image — used as the avatar image URL

size (required)

The size of the avatar. Passed down to the underlying Avatar component.

showOnlineIndicator

Whether to display the online presence indicator in the top-right corner of the avatar. When enabled, renders an OnlineIndicator component. The indicator size is automatically derived from the avatar size.

showBorder

Whether to show a border around the avatar. Defaults to true when the user has a profile image.

style

Additional style applied to the outer wrapper View.