# ChannelAvatar

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

## General Usage

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

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

```jsx {12}
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/) |


## UI Component Props

### `ImageComponent`

Drop in replacement of all the underlying [`Image`](https://reactnative.dev/docs/next/image) components within SDK.
This is useful for the purpose of offline caching of images. Please check the [Offline Support Guide](/chat/docs/sdk/react-native/v5/basics/offline-support/) for usage.

| Type          | Default                                            |
| ------------- | -------------------------------------------------- |
| ComponentType | [`Image`](https://reactnative.dev/docs/next/image) |



---

This page was last updated at 2026-05-13T13:38:45.159Z.

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