This is beta documentation for Stream Chat React Native SDK v9. For the latest stable version, see the latest version (v8) .

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

`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

`MessageAuthor`

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

Type	Default
ComponentType	`MessageAuthor`

`MessageContent`

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

For lighter decoration around the existing content body, prefer MessageContentTopView, MessageContentBottomView, MessageContentLeadingView, and MessageContentTrailingView over replacing MessageContent.

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`

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

Type	Default
`ComponentType` \| `undefined`	`undefined`

`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

MessageContent