# MessageAvatar

Renders the sender avatar inside [`MessageList`](/chat/docs/sdk/react-native/v8/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 `MessageAvatar` and pass it via the [`MessageAvatar`](/chat/docs/sdk/react-native/v8/core-components/channel#messageavatar/) prop on `Channel`.

Example: reduce avatar size.

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

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

<Channel MessageAvatar={SmallerMessageAvatar} />;
```

## Props

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

### `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](#groupstyles).

| Type    |
| ------- |
| boolean |


### `message`

Message object.

| Type           |
| -------------- |
| `Message` type |


### `size`

Avatar image size.

<admonition type="tip">

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

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

</admonition>

| Type   | Default |
| ------ | ------- |
| Number | 32      |

## UI Component Props

### `ImageComponent`

Drop-in replacement for all underlying [`Image`](https://reactnative.dev/docs/next/image) components in the SDK. Useful for offline image caching. See the [Offline Support Guide](/chat/docs/sdk/react-native/v8/basics/offline-support/).

| Type          | Default                                            |
| ------------- | -------------------------------------------------- |
| ComponentType | [`Image`](https://reactnative.dev/docs/next/image) |



---

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

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