This is documentation for the release candidate Stream Chat React Native SDK v6. For the latest stable version, see the latest version (v5).

MessageAvatar

Component to render the avatar of the sender (user) of a message within the MessageList.

Basic Usage

You can customize the MessageAvatar component and provide it back to the SDK via the MessageAvatar prop on Channel if desired.

Reducing the size of user avatar can be easily accomplished.

import {Channel, MessageAvatar} from 'stream-chat-react-native';

const SmallerMessageAvatar = () => <MessageAvatar size={30} />

<Channel MessageAvatar={SmallerMessageAvatar} />

Props

This component uses default values for all the following props, from MessageContext

`alignment`

Sets if the message should be aligned to right or left side of list.

Type	Default
enum(‘right’, ‘left’)	‘right’

`lastGroupMessage`

Whether or not this is the last message in a group of messages.

Type
boolean

`message`

Message object.

Type
`Message` type

`size`

Dimension for avatar image.

You can also set the size for message avatar, using our theming system.

const theme = {
  avatar: {
    BASE_AVATAR_SIZE: 30,
  },
};

Type	Default
Number	32

UI Component Props

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

Type	Default
ComponentType	`Image`

Giphy

MessageBounce