Skip to main content
Version: v4

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

overrides the value from MessageContext
alignment​

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

TypeDefault
enum('right', 'left')'right'

overrides the value from MessageContext
lastGroupMessage​

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

Type
boolean

overrides the value from MessageContext
message​

Message object

Type
object

size​

Dimension for avatar image.

success

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

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

Did you find this page helpful?