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

Prop	Description	Type
`user` (required)	The user object containing identity information used to render the avatar. Key fields used: `id` (deterministic background color), `name` (initials for placeholder), `image` (avatar image URL).	`UserResponse`
`size` (required)	The size of the avatar. Passed down to the underlying `Avatar` component.	`'2xl'` \| `'xl'` \| `'lg'` \| `'md'` \| `'sm'` \| `'xs'`
`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. Defaults to `undefined`.	`boolean`
`showBorder`	Whether to show a border around the avatar. Defaults to `!!user.image` (true when the user has a profile image).	`boolean`
`style`	Additional style applied to the outer wrapper `View`.	`StyleProp<ViewStyle>`

Avatar

ChannelAvatar