Skip to content

MessageItemView

Renders a message inside MessageList. Optimized to reduce unnecessary re-renders. This is the default component for the MessageItemView prop.

When enableSwipeToReply is enabled, swipe-to-reply wraps the full MessageItemView row rather than only the inner message bubble.

Best Practices

  • Keep custom message components lightweight to preserve list performance.
  • Use context-provided props (alignment, groupStyles) instead of re-computing them.
  • Avoid deep ChannelContext usage inside message rows to prevent re-renders.
  • Respect showMessageStatus and onlyEmojis when customizing UI.
  • Override subcomponents instead of replacing MessageItemView unless necessary.
  • Use MessageSpacer for row-level whitespace instead of replacing the full message row.
  • Use MessageContentTopView, MessageContentBottomView, MessageContentLeadingView, and MessageContentTrailingView for lightweight decoration around the message body instead of replacing MessageContent.

Props

Prop Description Type
alignment Sets whether the message aligns left or right in the list. Defaults to 'right'. enum('right', 'left')
channel Channel instance from the Stream Chat client. Channel
enableMessageGroupingByUser If false, consecutive messages from the same user won't be grouped. Available in SDK version >= v3.9.0. Defaults to true. boolean
groupStyles Position of the message within a group of consecutive messages from the same user. Use groupStyles to style messages based on position (for example, avatars show only on the last message). array of enum('top', 'bottom', 'middle', 'single')
hasReactions True if the message has at least one reaction. boolean
isMyMessage True if the message was sent by the current user. boolean
lastGroupMessage Whether or not this is the last message in a group of messages. boolean
members Members of current channel. Returns only up to 100 members; use client.queryMembers() for larger channels. object
message Message object. Message type
onlyEmojis True if the message text contains only emojis. boolean
otherAttachments All attachments except file and image. array
showMessageStatus When false, message status (read receipt, pending indicator) isn't rendered. Defaults to true for messages sent by the current user. boolean
MyMessageTheme Theme applied to the current user's messages. Memoize this object or pass a stable reference. object

UI Component Props

Prop Description Type
MessageAuthor Renders the sender avatar in MessageList. Only shown for other users' messages. Defaults to MessageAuthor. ComponentType
MessageContent Renders message content (status, attachments, reactions, etc.) in MessageList. For lighter decoration, prefer MessageContentTopView, MessageContentBottomView, MessageContentLeadingView, and MessageContentTrailingView. Defaults to MessageContent. ComponentType
MessageDeleted Renders a deleted message. Defaults to MessageDeleted. ComponentType
MessageError Renders the error indicator for messages in an error state. Defaults to MessageError. ComponentType
MessageFooter Renders the message footer in MessageList. Defaults to MessageFooter. ComponentType
MessageHeader Renders the header for a message in MessageList. ComponentType
MessageReplies Shows thread reply count and avatars of users who replied. Defaults to MessageReplies. ComponentType
MessageSpacer Renders a prop-less spacer inside the outer message row. If omitted, nothing is rendered. Provide your own component through Channel or MessagesContext, and use useMessageContext() inside it if you need state such as alignment. Defaults to undefined. ComponentType | undefined
ReactionListBottom Renders the reactions list below the message bubble. Defaults to ReactionListBottom. ComponentType
ReactionListPosition Position of the reaction list in the message component. Defaults to 'top'. 'top' | 'bottom'
ReactionListTop Renders the reactions list above the message bubble. Defaults to ReactionListTop. ComponentType