# Message Overview

> **Info:** This is documentation for **Stream Chat React Native SDK v9**, which is no longer actively maintained. For up-to-date documentation, see the [latest version (v10)](https://getstream.io/chat/docs/sdk/react-native/).

The `message` docs cover the UI rendered for each row inside [`MessageList`](https://getstream.io/chat/docs/sdk/react-native/v9/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`](https://getstream.io/chat/docs/sdk/react-native/v9/ui-components/message-list/) renders a list of messages.
2. [`MessageItemView`](https://getstream.io/chat/docs/sdk/react-native/v9/ui-components/message-item-view/) renders one message row.
3. [`MessageContent`](https://getstream.io/chat/docs/sdk/react-native/v9/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`](https://getstream.io/chat/docs/sdk/react-native/v9/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`](https://getstream.io/chat/docs/sdk/react-native/v9/ui-components/message-item-view/)
- Change the bubble/body layout: [`MessageContent`](https://getstream.io/chat/docs/sdk/react-native/v9/ui-components/message-content/)
- Read message-specific state in custom components: [`MessageContext`](https://getstream.io/chat/docs/sdk/react-native/v9/contexts/message-context/)
- Add lightweight UI around the bubble: [Layout & Structure](https://getstream.io/chat/docs/sdk/react-native/v9/ui-components/message/layout/)
- Customize attachments and previews: [Attachments & Rich Content](https://getstream.io/chat/docs/sdk/react-native/v9/ui-components/message/attachments/)
- Customize replies and reactions: [Replies & Reactions](https://getstream.io/chat/docs/sdk/react-native/v9/ui-components/message/replies-and-reactions/)
- Customize timestamps, status, and message states: [Status & Message State](https://getstream.io/chat/docs/sdk/react-native/v9/ui-components/message/status-and-state/)
- Customize pinned, reminder, and saved-for-later labels: [Special Headers](https://getstream.io/chat/docs/sdk/react-native/v9/ui-components/message/special-headers/)

## Common Tasks

- Add UI above or below the message bubble: [`MessageContentTopView`](https://getstream.io/chat/docs/sdk/react-native/v9/ui-components/message-content-top-view/) and [`MessageContentBottomView`](https://getstream.io/chat/docs/sdk/react-native/v9/ui-components/message-content-bottom-view/)
- Add inline spacing or decoration beside the bubble: [`MessageContentLeadingView`](https://getstream.io/chat/docs/sdk/react-native/v9/ui-components/message-content-leading-view/) and [`MessageContentTrailingView`](https://getstream.io/chat/docs/sdk/react-native/v9/ui-components/message-content-trailing-view/)
- Replace attachment rendering: [`Attachment`](https://getstream.io/chat/docs/sdk/react-native/v9/ui-components/attachment/) and [Custom Attachments](https://getstream.io/chat/docs/sdk/react-native/v9/guides/custom-attachments/)
- Customize reaction rendering: [Replies & Reactions](https://getstream.io/chat/docs/sdk/react-native/v9/ui-components/message/replies-and-reactions/) and [Customize Message Reactions](https://getstream.io/chat/docs/sdk/react-native/v9/guides/customize-message-reactions/)
- Customize timestamps or read state: [`MessageStatus`](https://getstream.io/chat/docs/sdk/react-native/v9/ui-components/message-status/) and [`MessageTimestamp`](https://getstream.io/chat/docs/sdk/react-native/v9/ui-components/message-timestamp/)
- Customize special message labels: [`MessageHeader`](https://getstream.io/chat/docs/sdk/react-native/v9/ui-components/message-header/) and [Special Headers](https://getstream.io/chat/docs/sdk/react-native/v9/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`](https://getstream.io/chat/docs/sdk/react-native/v9/customization/custom-components/) for cross-screen UI overrides.
- Use [`Channel`](https://getstream.io/chat/docs/sdk/react-native/v9/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`](https://getstream.io/chat/docs/sdk/react-native/v9/ui-components/message-list/)
- [`Channel`](https://getstream.io/chat/docs/sdk/react-native/v9/core-components/channel/)
- [Message Customization](https://getstream.io/chat/docs/sdk/react-native/v9/guides/message-customization/)

---

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