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

additionalPressableProps

enableMessageGroupingByUser

Whether message grouping by user is enabled.

backgroundColor

Message content background color.

goToMessage

Scrolls to a specific message in the chat.

groupStyles

isMessageAIGenerated

Whether a message should be treated as AI-generated.

isMyMessage

True if the message was sent by the current user.

isMessageReceivedOrErrorType

Whether the message is incoming or in an error state.

message

messageContentOrder

Order of message content.

Example: ['quoted_reply', 'attachments', 'file', 'gallery', 'text']

messageGroupedSingleOrBottom

Whether the message group style is single or bottom.

myMessageTheme

noBorder

If true, the message content has no border.

isVeryLastMessage

Whether the message is the very last item in the list.

onLongPress

onPress

onPressIn

otherAttachments

preventPress

Disable press interactions for this message content.

threadList

hidePaddingTop

Hide top padding in content container.

hidePaddingHorizontal

Hide horizontal padding in content container.

hidePaddingBottom

Hide bottom padding in content container.

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

MessageContentTopView

Renders an optional prop-less component above the main message content body.

MessageContentBottomView

Renders an optional prop-less component below the main message content body.

MessageContentLeadingView

Renders an optional prop-less component to the left of the main message content body.

If neither MessageContentLeadingView nor MessageContentTrailingView is provided, MessageContent does not create the horizontal wrapper around the body.

MessageContentTrailingView

Renders an optional prop-less component to the right of the main message content body.

If neither MessageContentLeadingView nor MessageContentTrailingView is provided, MessageContent does not create the horizontal wrapper around the body.

Attachment

Renders attachments in MessageList.

Available props:

• attachment {object}

FileAttachmentGroup

Renders a group of file attachments when a message has multiple files.

Gallery

MessageLocation

Renders location content for messages with location attachments.

Reply

StreamingMessageView

Renders AI-streamed text when isMessageAIGenerated(message) is true.