MessageAuthor

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

Replace the default UI via WithComponents.

Example: reduce avatar size.

import { WithComponents, MessageAuthor } from "stream-chat-react-native";

const SmallerMessageAuthor = () => <MessageAuthor size={30} />;

<WithComponents overrides={{ MessageAuthor: SmallerMessageAuthor }}>
  <Channel channel={channel}>
    <MessageList />
    <MessageComposer />
  </Channel>
</WithComponents>;

Props

This component reads default values from MessageContext.

Prop	Description	Type
`alignment`	Sets whether the message aligns left or right in the list. Defaults to `'right'`.	`enum('right', 'left')`
`lastGroupMessage`	Whether or not this is the last message in a group of messages.	`boolean`
`message`	Message object.	`Message` type
`size`	Avatar image size. You can also set avatar size via theming. Defaults to `'md'`.	`'2xl'` \| `'xl'` \| `'lg'` \| `'md'` \| `'sm'` \| `'xs'`

ImageComponent is provided through WithComponents and read internally via useComponentsContext().

Overview

MessageHeader