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

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`](https://getstream.io/chat/docs/sdk/react-native/v9/ui-components/message-item-view/) renders the full row.
- [`MessageContent`](https://getstream.io/chat/docs/sdk/react-native/v9/ui-components/message-content/) renders the main bubble/body.
- [`MessageHeader`](https://getstream.io/chat/docs/sdk/react-native/v9/ui-components/message-header/) renders the header area above the body.
- [`MessageFooter`](https://getstream.io/chat/docs/sdk/react-native/v9/ui-components/message-footer/) renders timestamp and status metadata below the body.

## Supporting Components

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

## Decoration Slots

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

- [`MessageContentTopView`](https://getstream.io/chat/docs/sdk/react-native/v9/ui-components/message-content-top-view/)
- [`MessageContentBottomView`](https://getstream.io/chat/docs/sdk/react-native/v9/ui-components/message-content-bottom-view/)
- [`MessageContentLeadingView`](https://getstream.io/chat/docs/sdk/react-native/v9/ui-components/message-content-leading-view/)
- [`MessageContentTrailingView`](https://getstream.io/chat/docs/sdk/react-native/v9/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.

---

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