ChannelAvatar

Renders a channel avatar inside ChannelList.

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

Example with an onPress handler:

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

showOnlineIndicator

Indicates if the online indicator should be shown.

size

Size of the avatar. Default: xl.

showBorder

Indicates if the border should be shown.