MessageSimple

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

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 MessageSimple unless necessary.

Props

`alignment`

Sets whether the message aligns left or right in the list.

Type	Default
enum('right', 'left')	'right'

`channel`

Channel instance from the Stream Chat client.

Type
Channel

`enableMessageGroupingByUser`

Note: Available in SDK version >= v3.9.0.

If false, consecutive messages from the same user won’t be grouped.

Type	Default
boolean	true

`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).

Type
array of enum('top', 'bottom', 'middle', 'single')

`hasReactions`

True if the message has at least one reaction.

Type
boolean

`isMyMessage`

True if the message was sent by the current user.

Type
boolean

`lastGroupMessage`

Whether or not this is the last message in a group of messages.

Type
boolean

`members`

Members of current channel. This value is received from backend when you query a channel, either using client.queryChannels() or channel.watch() API call.

client.queryChannels() or channel.watch() returns only up to 100 members of channel. So if you expect total number of members to be > 100, its better to use client.queryMembers() API endpoint separately to get the list of members.

Record<
  string, // userId
  {
    banned?: boolean;
    created_at?: string;
    invite_accepted_at?: string;
    invite_rejected_at?: string;
    invited?: boolean;
    is_moderator?: boolean;
    role?: string;
    shadow_banned?: boolean;
    updated_at?: string;
    user?: UserResponse<UserType>;
    user_id?: string;
  }
>;

Type
object

`message`

Message object.

Type
`Message` type

`onlyEmojis`

True if the message text contains only emojis.

Type
Boolean

`otherAttachments`

All attachments except file and image.

Type
Array

`showMessageStatus`

When false, message status (read receipt, pending indicator) isn’t rendered. Defaults to true for messages sent by the current user.

Type
`boolean`

`MyMessageTheme`

Theme applied to the current user’s messages.

Type
object

Memoize this object or pass a stable reference.

UI Component Props

`MessageAvatar`

Renders the sender avatar in MessageList. Only shown for other users’ messages.

Type	Default
ComponentType	`MessageAvatar`

`MessageContent`

Renders message content (status, attachments, reactions, etc.) in MessageList.

Type	Default
ComponentType	`MessageContent`

`MessageDeleted`

Renders a deleted message.

Type	Default
ComponentType	`MessageDeleted`

`MessageFooter`

Renders the message footer in MessageList.

Type	Default
ComponentType	`MessageFooter`

`MessageHeader`

Renders the header for a message in MessageList.

Type
ComponentType

`MessagePinnedHeader`

Renders the pinned message label in MessageList.

Type
ComponentType

`MessageReplies`

Shows thread reply count and avatars of users who replied.

Type	Default
ComponentType	`MessageReplies`

`MessageStatus`

Renders message status (time and read receipts).

Type	Default
ComponentType	`MessageStatus`

`ReactionListBottom`

Renders the reactions list below the message bubble.

Type	Default
ComponentType	`ReactionListBottom`

`ReactionListPosition`

Position of the reaction list in the message component. Default is above the message content.

Type	Default value
`top` \| `bottom`	'top'

`ReactionListTop`

Renders the reactions list above the message bubble.

Type	Default
ComponentType	`ReactionListTop`

MessagesContext

Attachment