# ChannelAvatar

Component to render the avatar of a channel, within the [`ChannelList`](/chat/docs/sdk/react-native/v4/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/v4/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**

Instance of Channel from stream-chat package.

| Type                                                |
| --------------------------------------------------- |
| [Channel](/chat/docs/javascript/creating_channels/) |



---

This page was last updated at 2026-05-14T12:22:45.981Z.

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