Skip to main content
Version: v5

ChannelAvatar

Component to render the avatar of a channel, within the ChannelList component.

General Usage​

You can customize this component and provide it back to the SDK via the PreviewAvatar prop on ChannelList if desired.

In the following sample we add an onPress handler on avatar.

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​

required
channel​

Instance of Channel from stream-chat package.

Type
Channel

UI Component Props​

overrides the value from ChatContext
ImageComponent​

Drop in replacement of all the underlying Image components within SDK. This is useful for the purpose of offline caching of images. Please check the Offline Support Guide for usage.

TypeDefault
ComponentTypeImage

Did you find this page helpful?