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

ChannelsContext

ChannelPreviewMessage