# MessageAuthor

Renders the sender avatar inside [`MessageList`](/chat/docs/sdk/react-native/v9/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

Customize `MessageAuthor` and pass it via the [`MessageAuthor`](/chat/docs/sdk/react-native/v9/core-components/channel#messageauthor/) prop on `Channel`.

Example: reduce avatar size.

```tsx
import { Channel, MessageAuthor } from "stream-chat-react-native";

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

<Channel MessageAuthor={SmallerMessageAuthor} />;
```

## Props

This component reads default values from [`MessageContext`](/chat/docs/sdk/react-native/v9/contexts/message-context/).

### `alignment`

<partial id="chat-sdk/react-native/v9-latest/_partials/common-content/contexts/message-context/alignment"></partial>

### `lastGroupMessage`

<partial id="chat-sdk/react-native/v9-latest/_partials/common-content/contexts/message-context/last_group_message"></partial>

### `message`

<partial id="chat-sdk/react-native/v9-latest/_partials/common-content/contexts/message-context/message"></partial>

### `size`

Avatar image size.

<admonition type="tip">

You can also set avatar size via [theming](/chat/docs/sdk/react-native/v9/customization/theming/).

```tsx
const theme = {
  avatar: {
    BASE_AVATAR_SIZE: 32,
  },
};
```

</admonition>

| Type                                          | Default |
| --------------------------------------------- | ------- |
| `2xl` \| `xl` \| `lg` \| `md` \| `sm` \| `xs` | `md`    |

## UI Component Props

### `ImageComponent`

<partial id="chat-sdk/react-native/v9-latest/_partials/common-content/ui-components/chat/props/image_component"></partial>


---

This page was last updated at 2026-04-03T17:24:30.790Z.

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