# Message Overview

The `message` docs cover the UI rendered for each row inside [`MessageList`](/chat/docs/sdk/react-native/ui-components/message-list/). The current API surface is broad because the SDK lets you replace the full row, the message body, attachment rendering, reactions, metadata, and several special-case headers independently.

Use this page as the entry point before drilling into the individual component docs.

## Mental Model

Think about message rendering in layers:

1. [`MessageList`](/chat/docs/sdk/react-native/ui-components/message-list/) renders a list of messages.
2. [`MessageItemView`](/chat/docs/sdk/react-native/ui-components/message-item-view/) renders one message row.
3. [`MessageContent`](/chat/docs/sdk/react-native/ui-components/message-content/) renders the bubble/body inside that row.
4. Attachments, reactions, replies, headers, status, and timestamps hang off that row/body structure.
5. [`MessageContext`](/chat/docs/sdk/react-native/contexts/message-context/) exposes the message-specific state used by the render tree.

If you only need lightweight decoration around the bubble, prefer the `MessageContent*View` slots instead of replacing the whole message row.

## Start Here

- Change the overall message row layout: [`MessageItemView`](/chat/docs/sdk/react-native/ui-components/message-item-view/)
- Change the bubble/body layout: [`MessageContent`](/chat/docs/sdk/react-native/ui-components/message-content/)
- Read message-specific state in custom components: [`MessageContext`](/chat/docs/sdk/react-native/contexts/message-context/)
- Add lightweight UI around the bubble: [Layout & Structure](/chat/docs/sdk/react-native/ui-components/message/layout/)
- Customize attachments and previews: [Attachments & Rich Content](/chat/docs/sdk/react-native/ui-components/message/attachments/)
- Customize replies and reactions: [Replies & Reactions](/chat/docs/sdk/react-native/ui-components/message/replies-and-reactions/)
- Customize timestamps, status, and message states: [Status & Message State](/chat/docs/sdk/react-native/ui-components/message/status-and-state/)
- Customize pinned, reminder, and saved-for-later labels: [Special Headers](/chat/docs/sdk/react-native/ui-components/message/special-headers/)

## Common Tasks

- Add UI above or below the message bubble: [`MessageContentTopView`](/chat/docs/sdk/react-native/ui-components/message-content-top-view/) and [`MessageContentBottomView`](/chat/docs/sdk/react-native/ui-components/message-content-bottom-view/)
- Add inline spacing or decoration beside the bubble: [`MessageContentLeadingView`](/chat/docs/sdk/react-native/ui-components/message-content-leading-view/) and [`MessageContentTrailingView`](/chat/docs/sdk/react-native/ui-components/message-content-trailing-view/)
- Replace attachment rendering: [`Attachment`](/chat/docs/sdk/react-native/ui-components/attachment/) and [Custom Attachments](/chat/docs/sdk/react-native/guides/custom-attachment/)
- Customize reaction rendering: [Replies & Reactions](/chat/docs/sdk/react-native/ui-components/message/replies-and-reactions/) and [Customize Message Reactions](/chat/docs/sdk/react-native/guides/customize-message-reactions/)
- Customize timestamps or read state: [`MessageStatus`](/chat/docs/sdk/react-native/ui-components/message-status/) and [`MessageTimestamp`](/chat/docs/sdk/react-native/ui-components/message-timestamp/)
- Customize special message labels: [`MessageHeader`](/chat/docs/sdk/react-native/ui-components/message-header/) and [Special Headers](/chat/docs/sdk/react-native/ui-components/message/special-headers/)

## Best Practices

- Start with the smallest override that solves the problem.
- Prefer dedicated subcomponent overrides over replacing `MessageItemView` wholesale.
- Use [`WithComponents`](/chat/docs/sdk/react-native/customization/custom_components/) for cross-screen UI overrides.
- Use [`Channel`](/chat/docs/sdk/react-native/core-components/channel/) props when the customization belongs to one chat surface.
- Keep custom message rendering lightweight to avoid list performance regressions.

## Related Docs

- [`MessageList`](/chat/docs/sdk/react-native/ui-components/message-list/)
- [`Channel`](/chat/docs/sdk/react-native/core-components/channel/)
- [Message Customization](/chat/docs/sdk/react-native/guides/message-customization/)


---

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

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