React
iOS
Android
Flutter
Angular
JavaScript
Unity
Unreal
Node
Python
Ruby
PHP
Java
.NET
Go
RESTimport { ChannelAvatar } from "stream-chat-react-native";
<ChannelAvatar channel={channel} size="xl" showBorder />;ChannelAvatar
ChannelAvatar renders the avatar for a chat channel. It intelligently selects the appropriate avatar representation based on channel data:
- If the channel has a custom image (
channel.data.image), it renders a baseAvatarwith that image. - If the channel is a group with multiple members (excluding the current user), it renders a
UserAvatarGroupshowing members' avatars. - For direct message channels (single other member), it renders a
UserAvatar.
The component also determines online presence from channel state and shows an online indicator when applicable.
Usage
Props
| Prop | Description | Type |
|---|---|---|
channel (required) | The Stream Chat Channel instance to render the avatar for. The component reads channel.data.image, channel.state.members, and channel.cid to determine the rendering strategy. | Channel |
showOnlineIndicator | Whether to display an online presence indicator. Defaults to the channel's online presence status derived from the useChannelPreviewDisplayPresence hook. | boolean |
size | The size of the avatar. Defaults to 'xl'. | 'lg' | 'xl' | '2xl' |
showBorder | Whether to show a border around the avatar. Defaults to true. | boolean |