# ChannelAvatar

Component to render the avatar of a channel, within the [`ChannelList`](/chat/docs/sdk/react-native/v3/core-components/channel-list/) component.

## Basic Usage

You can customize this component and provide it back to the SDK via the [`PreviewAvatar`](/chat/docs/sdk/react-native/v3/core-components/channel-list#previewavatar/) prop on `ChannelList` if desired.

In the following sample we add an `onPress` handler on avatar.

```jsx
import { TouchableOpacity } from "react-native-gesture-handler";
import { ChannelList, ChannelAvatar } from "stream-chat-react-native";

<ChannelList
  PreviewAvatar={({ channel }) => (
    <TouchableOpacity
      disallowInterruption={true}
      onPress={() => {
        /** Handler for press action */
      }}
    >
      <ChannelAvatar channel={channel} />
    </TouchableOpacity>
  )}
/>;
```

## Props

### **channel**

<partial id="chat-sdk/react-native/v3/_partials/common-content/ui-components/channel-preview-messenger/props/channel"></partial>

---

This page was last updated at 2025-08-15T14:16:09.747Z.

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