# ChannelAvatar

Renders a channel avatar inside [`ChannelList`](/chat/docs/sdk/react-native/v8/core-components/channel-list/).

## Best Practices

- Keep avatar rendering lightweight to avoid list performance issues.
- Use `PreviewAvatar` to wrap interactions without altering `ChannelAvatar` internals.
- Ensure touch targets are accessible when adding custom `onPress`.
- Use the context-provided `ImageComponent` for consistent image handling.
- Avoid inline handlers when rendering large lists; memoize where possible.

## General Usage

Customize it and pass it via [`PreviewAvatar`](/chat/docs/sdk/react-native/v8/core-components/channel-list#previewavatar/) on `ChannelList`.

Example with an `onPress` handler:

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

Channel instance from the Stream Chat client.

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


## UI Component Props

### `ImageComponent`

Drop-in replacement for all underlying [`Image`](https://reactnative.dev/docs/next/image) components in the SDK. Useful for offline image caching. See the [Offline Support Guide](/chat/docs/sdk/react-native/v8/basics/offline-support/).

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



---

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

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