MessageSpacer

MessageSpacer is an optional prop-less override slot inside the outer message row in MessageList.

If you do not provide a MessageSpacer override through WithComponents, 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

import { WithComponents, 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 }} />;
};

<WithComponents overrides={{ MessageSpacer: CustomMessageSpacer }}>
  <Channel channel={channel}>
    <MessageList />
    <MessageComposer />
  </Channel>
</WithComponents>;