# 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 base [`Avatar`](/chat/docs/sdk/react-native/ui-components/base-ui/avatar/) with that image.
- If the channel is a group with multiple members (excluding the current user), it renders a [`UserAvatarGroup`](/chat/docs/sdk/react-native/ui-components/base-ui/avatar-group/) showing members' avatars.
- For direct message channels (single other member), it renders a [`UserAvatar`](/chat/docs/sdk/react-native/ui-components/base-ui/user-avatar/).

The component also determines online presence from channel state and shows an online indicator when applicable.

## Usage

```tsx
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`                   |


---

This page was last updated at 2026-04-17T17:33:46.408Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react-native/ui-components/base-ui/channel-avatar/](https://getstream.io/chat/docs/sdk/react-native/ui-components/base-ui/channel-avatar/).