# MessageItemView Renders a message inside [`MessageList`](/chat/docs/sdk/react-native/ui-components/message-list/). Optimized to reduce unnecessary re-renders. This is the default component for the [`MessageItemView`](/chat/docs/sdk/react-native/core-components/channel#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`](/chat/docs/sdk/react-native/ui-components/message-spacer/) for row-level whitespace instead of replacing the full message row. - Use [`MessageContentTopView`](/chat/docs/sdk/react-native/ui-components/message-content-top-view/), [`MessageContentBottomView`](/chat/docs/sdk/react-native/ui-components/message-content-bottom-view/), [`MessageContentLeadingView`](/chat/docs/sdk/react-native/ui-components/message-content-leading-view/), and [`MessageContentTrailingView`](/chat/docs/sdk/react-native/ui-components/message-content-trailing-view/) 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](/chat/docs/javascript/creating_channels/) | | `enableMessageGroupingByUser` | If false, consecutive messages from the same user won't be grouped. Available in SDK version >= [v3.9.0](https://github.com/GetStream/stream-chat-react-native/releases). 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](/chat/docs/sdk/react-native/customization/theming/) 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`](/chat/docs/sdk/react-native/ui-components/message-list/). Only shown for other users' messages. Defaults to [`MessageAuthor`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/components/Message/MessageItemView/MessageAuthor.tsx). | `ComponentType` | | `MessageContent` | Renders message content (status, attachments, reactions, etc.) in [`MessageList`](/chat/docs/sdk/react-native/ui-components/message-list/). For lighter decoration, prefer `MessageContentTopView`, `MessageContentBottomView`, `MessageContentLeadingView`, and `MessageContentTrailingView`. Defaults to [`MessageContent`](/chat/docs/sdk/react-native/ui-components/message-content/). | `ComponentType` | | `MessageDeleted` | Renders a deleted message. Defaults to [`MessageDeleted`](/chat/docs/sdk/react-native/ui-components/message-deleted/). | `ComponentType` | | `MessageFooter` | Renders the message footer in [`MessageList`](/chat/docs/sdk/react-native/ui-components/message-list/). Defaults to [`MessageFooter`](/chat/docs/sdk/react-native/ui-components/message-footer/). | `ComponentType` | | `MessageHeader` | Renders the header for a message in [`MessageList`](/chat/docs/sdk/react-native/ui-components/message-list/). | `ComponentType` | | `MessagePinnedHeader` | Renders the pinned message label in [`MessageList`](/chat/docs/sdk/react-native/ui-components/message-list/). | `ComponentType` | | `MessageReplies` | Shows thread reply count and avatars of users who replied. Defaults to [`MessageReplies`](/chat/docs/sdk/react-native/ui-components/message-replies/). | `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`](/chat/docs/sdk/react-native/ui-components/message-status/). | `ComponentType` | | `ReactionListBottom` | Renders the reactions list below the message bubble. Defaults to [`ReactionListBottom`](https://github.com/GetStream/stream-chat-react-native/tree/develop/package/src/components/Message/MessageItemView/ReactionList/ReactionListBottom.tsx). | `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`](https://github.com/GetStream/stream-chat-react-native/tree/develop/package/src/components/Message/MessageItemView/ReactionList/ReactionListTop.tsx). | `ComponentType` | --- This page was last updated at 2026-04-17T17:33:45.904Z. For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react-native/ui-components/message-item-view/](https://getstream.io/chat/docs/sdk/react-native/ui-components/message-item-view/).