# Overview

This section covers the parts that define how a message row is laid out: the outer row, the main bubble/body, the header and footer areas, and the lightweight slot components you can use to decorate the message without replacing the entire render tree.

## Use This Group When

- You need to change the overall row layout.
- You want to add or remove UI around the message bubble.
- You want to control header, footer, avatar, or swipe-to-reply presentation.
- You are deciding between replacing `MessageItemView` and using smaller slot overrides.

## Core Building Blocks

- [`MessageItemView`](/chat/docs/sdk/react-native/ui-components/message-item-view/) renders the full row.
- [`MessageContent`](/chat/docs/sdk/react-native/ui-components/message-content/) renders the main bubble/body.
- [`MessageHeader`](/chat/docs/sdk/react-native/ui-components/message-header/) renders the header area above the body.
- [`MessageFooter`](/chat/docs/sdk/react-native/ui-components/message-footer/) renders timestamp and status metadata below the body.

## Supporting Components

- [`MessageAuthor`](/chat/docs/sdk/react-native/ui-components/message-author/)
- [`MessageTextContainer`](/chat/docs/sdk/react-native/ui-components/message-text-container/)
- [`MessageSwipeContent`](/chat/docs/sdk/react-native/ui-components/message-swipe-content/)
- [`MessageSpacer`](/chat/docs/sdk/react-native/ui-components/message-spacer/)

## Decoration Slots

Use these when you want to add small pieces of UI without replacing `MessageContent`:

- [`MessageContentTopView`](/chat/docs/sdk/react-native/ui-components/message-content-top-view/)
- [`MessageContentBottomView`](/chat/docs/sdk/react-native/ui-components/message-content-bottom-view/)
- [`MessageContentLeadingView`](/chat/docs/sdk/react-native/ui-components/message-content-leading-view/)
- [`MessageContentTrailingView`](/chat/docs/sdk/react-native/ui-components/message-content-trailing-view/)

## Recommendation

Start with the slot components first. Move to `MessageContent`, and only replace `MessageItemView`, when you truly need to change row structure, grouping behavior, or where overlays anchor.


---

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

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