ChannelAvatar

Renders a channel avatar inside ChannelList.

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 on ChannelList.

Example with an onPress handler:

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
`showOnlineIndicator`	Indicates if the online indicator should be shown. Defaults to the channel's computed online-presence value (from `useChannelPreviewDisplayPresence`).	`boolean`
`size`	Size of the avatar. Defaults to `xl`.	`lg` \| `xl` \| `2xl`
`showBorder`	Indicates if the border should be shown. Defaults to `true`.	`boolean`
`isPreview`	When `true`, the avatar renders based on `previewUri` instead of the channel's stored image. Useful for previewing a pending image change before it is saved. Defaults to `false`.	`boolean`
`previewUri`	Image to display while in preview mode (`isPreview` is `true`). A `string` shows that image; `null` shows the no-image fallback (member/user avatar).	`string` \| `null`