MessageAvatar

Renders the sender avatar inside MessageList.

Best Practices

Show avatars only when it adds context (for example, last message in a group).
Keep avatar sizes consistent across the app for visual rhythm.
Use theming for size changes when possible.
Avoid heavy image processing in render; rely on caching components.
Provide a fallback image or initials when message.user.image is missing.

Basic Usage

Customize MessageAvatar and pass it via the MessageAvatar prop on Channel.

Example: reduce avatar size.

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

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

<Channel MessageAvatar={SmallerMessageAvatar} />;

Props

This component reads default values from MessageContext.

`alignment`

Sets whether the message aligns left or right in the 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`

Avatar image size.

You can also set avatar size via theming.

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

Type	Default
Number	32

UI Component Props

`ImageComponent`

Drop-in replacement for all underlying Image components in the SDK. Useful for offline image caching. See the Offline Support Guide.

Type	Default
ComponentType	`Image`

Giphy

MessageBounce