# ChannelAvatar

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

## Best Practices

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

## General Usage

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

Example with an `onPress` handler:

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

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

<WithComponents overrides={{ ChannelPreviewAvatar: CustomPreviewAvatar }}>
  <ChannelList />
</WithComponents>;
```

## Props

| Prop                  | Description                                                            | Type                                                |
| --------------------- | ---------------------------------------------------------------------- | --------------------------------------------------- |
| `channel`             | Channel instance from the Stream Chat client.                          | [Channel](/chat/docs/javascript/creating_channels/) |
| `showOnlineIndicator` | Indicates if the online indicator should be shown. Defaults to `true`. | `boolean`                                           |
| `size`                | Size of the avatar. Defaults to `xl`.                                  | `lg` \| `xl` \| `2xl`                               |
| `showBorder`          | Indicates if the border should be shown. Defaults to `true`.           | `boolean`                                           |


---

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

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