# MessageAvatar

Renders the sender avatar inside [`MessageList`](https://getstream.io/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`](https://getstream.io/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`](https://getstream.io/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](https://getstream.io/chat/docs/sdk/react-native/v8/contexts/message-context/#groupstyles).

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

### `message`

Message object.

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

### `size`

Avatar image size.

>
> **Tip:** You can also set avatar size via [theming](https://getstream.io/chat/docs/sdk/react-native/v8/customization/theming/).
>
> ```tsx
> const theme = {
>   avatar: {
>     BASE_AVATAR_SIZE: 30,
>   },
> };
> ```
>

| 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](https://getstream.io/chat/docs/sdk/react-native/v8/basics/offline-support/).

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

---

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/).