MessageContent

Renders message content inside MessageList. This is the default component for the MessageContent prop.

For lightweight decoration around the main content body, use MessageContentTopView, MessageContentBottomView, MessageContentLeadingView, and MessageContentTrailingView instead of replacing MessageContent entirely.

Best Practices

• Keep content rendering lightweight to avoid list performance issues.
• Prefer the MessageContent*View slot overrides for lightweight decoration around the body instead of replacing MessageContent.
• Use useMessageContext() inside prop-less content slot overrides when you need message state such as alignment, message, or isMyMessage.
• Respect messageContentOrder so attachments, polls, and text appear consistently.
• Keep press handlers fast and side-effect free.
• Keep padding overrides predictable across message types.

Props

Slot Overrides

MessageContentTopView, MessageContentBottomView, MessageContentLeadingView, and MessageContentTrailingView are optional prop-less slots rendered around the main message content body.

If a slot is not provided, nothing is rendered for that position. MessageContent only creates the horizontal wrapper for Leading and Trailing when at least one of those overrides is provided, so the default render tree stays unchanged otherwise.

If your custom slot needs message state such as alignment, message, or isMyMessage, read it with useMessageContext() inside the component.

Example

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

const CustomContentTopView = () => {
  const { isMyMessage } = useMessageContext();

  return isMyMessage ? null : <Text>Incoming</Text>;
};

const CustomContentBottomView = () => {
  const { message } = useMessageContext();

  return message.pinned ? <Text>Pinned</Text> : null;
};

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

  return <View style={{ width: alignment === "left" ? 8 : 0 }} />;
};

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

  return <View style={{ width: alignment === "right" ? 8 : 0 }} />;
};

<Channel
  MessageContentTopView={CustomContentTopView}
  MessageContentBottomView={CustomContentBottomView}
  MessageContentLeadingView={CustomContentLeadingView}
  MessageContentTrailingView={CustomContentTrailingView}
/>;

UI Component Props