# MessageAuthor

Renders the sender avatar inside [`MessageList`](/chat/docs/sdk/react-native/ui-components/message-list/).

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

```tsx
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`](/chat/docs/sdk/react-native/contexts/message-context/).

| 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](/chat/docs/sdk/react-native/customization/theming/). Defaults to `'md'`. | `'2xl'` \| `'xl'` \| `'lg'` \| `'md'` \| `'sm'` \| `'xs'` |

`ImageComponent` is provided through [`WithComponents`](/chat/docs/sdk/react-native/customization/custom_components/) and read internally via `useComponentsContext()`.


---

This page was last updated at 2026-04-17T17:33:45.927Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react-native/ui-components/message-author/](https://getstream.io/chat/docs/sdk/react-native/ui-components/message-author/).