---
id: message-avatar
title: MessageAvatar
---

import Alignment from '../common-content/contexts/message-context/alignment.mdx';
import MessageProp from '../common-content/contexts/message-context/message.mdx';
import LastGroupMessage from '../common-content/contexts/message-context/last_group_message.mdx';

Component to render the avatar of the sender (user) of a message within the [`MessageList`](./message_list.mdx).

## Basic Usage

You can customize the `MessageAvatar` component and provide it back to the SDK via the [`MessageAvatar`](../core-components/channel.mdx#messageavatar) prop on `Channel` if desired.

Reducing the size of user avatar can be easily accomplished.

```tsx
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`](../contexts/message_context.mdx)

### <div class="label description">_overrides the value from [MessageContext](../contexts/message_context.mdx#alignment)_</div> alignment {#alignment}

<Alignment />

### <div class="label description">_overrides the value from [MessageContext](../contexts/message_context.mdx#lastgroupmessage)_</div> lastGroupMessage {#lastgroupmessage}

<LastGroupMessage />

### <div class="label description">_overrides the value from [MessageContext](../contexts/message_context.mdx#message)_</div> message {#message}

<MessageProp />

### size

Dimension for avatar image.

:::tip
You can also set the size for message avatar, using our [theming system](../customization/theming.mdx).

```tsx
const theme = {
  avatar: {
    BASE_AVATAR_SIZE: 30
  }
}
```
:::

| Type | Default |
| - | - |
| number | 32 |