# MessageSpacer

`MessageSpacer` is an optional prop-less override slot inside the outer message row in [`MessageList`](/chat/docs/sdk/react-native/v9/ui-components/message-list/).

If you do not provide a `MessageSpacer` override through [`Channel`](/chat/docs/sdk/react-native/v9/core-components/channel#messagespacer/), nothing is rendered. The SDK does not export a built-in default `MessageSpacer` component.

## Best Practices

- Use `MessageSpacer` for layout spacing or structure, not message content rendering.
- Prefer `MessageSpacer` over replacing the full `MessageItemView` when you only need row-level whitespace.
- Read message state from `useMessageContext()` inside the component instead of expecting props.
- Keep spacer components lightweight to avoid affecting list performance.
- Return `null` when you do not need custom spacing.

## Props

`MessageSpacer` does not receive props.

If you need message state such as alignment, read it from `useMessageContext()`.

## Example

```tsx
import { Channel, useMessageContext } from "stream-chat-react-native";
import { View } from "react-native";

const CustomMessageSpacer = () => {
  const { alignment } = useMessageContext();

  return <View style={{ flex: alignment === "left" ? 1 : 0.25 }} />;
};

<Channel MessageSpacer={CustomMessageSpacer} />;
```


---

This page was last updated at 2026-04-03T17:24:31.312Z.

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