# MessageItemView

Renders a message inside [`MessageList`](/chat/docs/sdk/react-native/v9/ui-components/message-list/). Optimized to reduce unnecessary re-renders. This is the default component for the [`MessageItemView`](/chat/docs/sdk/react-native/v9/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/v9/ui-components/message-spacer/) for row-level whitespace instead of replacing the full message row.
- Use [`MessageContentTopView`](/chat/docs/sdk/react-native/v9/ui-components/message-content-top-view/), [`MessageContentBottomView`](/chat/docs/sdk/react-native/v9/ui-components/message-content-bottom-view/), [`MessageContentLeadingView`](/chat/docs/sdk/react-native/v9/ui-components/message-content-leading-view/), and [`MessageContentTrailingView`](/chat/docs/sdk/react-native/v9/ui-components/message-content-trailing-view/) for lightweight decoration around the message body instead of replacing `MessageContent`.

## Props

### `alignment`

<partial id="chat-sdk/react-native/v9-latest/_partials/common-content/contexts/message-context/alignment"></partial>

### `channel`

Channel instance from the Stream Chat client.

| Type                                                |
| --------------------------------------------------- |
| [Channel](/chat/docs/javascript/creating_channels/) |

### `enableMessageGroupingByUser`

**Note:** Available in SDK version >= [v3.9.0](https://github.com/GetStream/stream-chat-react-native/releases).

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

| Type    | Default |
| ------- | ------- |
| boolean | true    |

### `groupStyles`

<partial id="chat-sdk/react-native/v9-latest/_partials/common-content/contexts/message-context/group_styles"></partial>

### `hasReactions`

<partial id="chat-sdk/react-native/v9-latest/_partials/common-content/contexts/message-context/has_reactions"></partial>

### `isMyMessage`

True if the message was sent by the current user.

| Type    |
| ------- |
| boolean |

### `lastGroupMessage`

<partial id="chat-sdk/react-native/v9-latest/_partials/common-content/contexts/message-context/last_group_message"></partial>

### `members`

<partial id="chat-sdk/react-native/v9-latest/_partials/common-content/contexts/channel-context/members"></partial>

### `message`

<partial id="chat-sdk/react-native/v9-latest/_partials/common-content/contexts/message-context/message"></partial>

### `onlyEmojis`

True if the message text contains only emojis.

| Type    |
| ------- |
| Boolean |

### `otherAttachments`

<partial id="chat-sdk/react-native/v9-latest/_partials/common-content/contexts/message-context/other_attachments"></partial>

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

<partial id="chat-sdk/react-native/v9-latest/_partials/common-content/ui-components/channel/props/my_message_theme"></partial>

## UI Component Props

### `MessageAuthor`

<partial id="chat-sdk/react-native/v9-latest/_partials/common-content/ui-components/channel/props/message-author"></partial>

### `MessageContent`

Renders message content (status, attachments, reactions, etc.) in [`MessageList`](/chat/docs/sdk/react-native/v9/ui-components/message-list/).

For lighter decoration around the existing content body, prefer [`MessageContentTopView`](/chat/docs/sdk/react-native/v9/ui-components/message-content-top-view/), [`MessageContentBottomView`](/chat/docs/sdk/react-native/v9/ui-components/message-content-bottom-view/), [`MessageContentLeadingView`](/chat/docs/sdk/react-native/v9/ui-components/message-content-leading-view/), and [`MessageContentTrailingView`](/chat/docs/sdk/react-native/v9/ui-components/message-content-trailing-view/) over replacing `MessageContent`.

| Type          | Default                                                                           |
| ------------- | --------------------------------------------------------------------------------- |
| ComponentType | [`MessageContent`](/chat/docs/sdk/react-native/v9/ui-components/message-content/) |

### `MessageDeleted`

Renders a deleted message.

| Type          | Default                                                                           |
| ------------- | --------------------------------------------------------------------------------- |
| ComponentType | [`MessageDeleted`](/chat/docs/sdk/react-native/v9/ui-components/message-deleted/) |

### `MessageFooter`

Renders the message footer in [`MessageList`](/chat/docs/sdk/react-native/v9/ui-components/message-list/).

| Type          | Default                                                                         |
| ------------- | ------------------------------------------------------------------------------- |
| ComponentType | [`MessageFooter`](/chat/docs/sdk/react-native/v9/ui-components/message-footer/) |

### `MessageHeader`

Renders the header for a message in [`MessageList`](/chat/docs/sdk/react-native/v9/ui-components/message-list/).

| Type          |
| ------------- |
| ComponentType |

### `MessagePinnedHeader`

Renders the pinned message label in [`MessageList`](/chat/docs/sdk/react-native/v9/ui-components/message-list/).

| Type          |
| ------------- |
| ComponentType |

### `MessageReplies`

Shows thread reply count and avatars of users who replied.

| Type          | Default                                                                           |
| ------------- | --------------------------------------------------------------------------------- |
| ComponentType | [`MessageReplies`](/chat/docs/sdk/react-native/v9/ui-components/message-replies/) |

### `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`](/chat/docs/sdk/react-native/v9/ui-components/message-status/) |

### `ReactionListBottom`

Renders the reactions list below the message bubble.

| Type          | Default                                                                                                                                                                       |
| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ComponentType | [`ReactionListBottom`](https://github.com/GetStream/stream-chat-react-native/tree/develop/package/src/components/Message/MessageItemView/ReactionList/ReactionListBottom.tsx) |

### `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`](https://github.com/GetStream/stream-chat-react-native/tree/develop/package/src/components/Message/MessageItemView/ReactionList/ReactionListTop.tsx) |


---

This page was last updated at 2026-04-03T17:24:30.029Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react-native/v9/ui-components/message-item-view/](https://getstream.io/chat/docs/sdk/react-native/v9/ui-components/message-item-view/).