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
import { ChannelAvatar } from "stream-chat-react-native";
<ChannelAvatar channel={channel} size="xl" showBorder />;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 |
isPreview |
When true, the avatar renders from previewUri instead of the channel's image. Useful for showing a locally picked image before it is uploaded. Defaults to false. |
boolean |
previewUri |
Image to display while in preview mode (isPreview is true). Defaults to null. |
string | null |