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`
`MessageFooter`	Renders the message footer in `MessageList`. Defaults to `MessageFooter`.	`ComponentType`
`MessageHeader`	Renders the header for a message in `MessageList`.	`ComponentType`
`MessagePinnedHeader`	Renders the pinned message label 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`
`MessageStatus`	Renders message status (time and read receipts). Defaults to `MessageStatus`.	`ComponentType`
`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`

Message Overview

MessageContent

On this page:

Best Practices
Props
UI Component Props