# MessageSimple

Renders a message inside [`MessageList`](/chat/docs/sdk/react-native/v8/ui-components/message-list/). Optimized to reduce unnecessary re-renders. This is the default component for the [`MessageSimple`](/chat/docs/sdk/react-native/v8/core-components/channel#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](/chat/docs/javascript/creating_channels/) |

### `enableMessageGroupingByUser`

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

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](#groupstyles).

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


### `members`

Members of current channel. This value is received from backend when you query a channel, either using [`client.queryChannels()`](/chat/docs/javascript/query_channels/) or [`channel.watch()`](/chat/docs/javascript/creating_channels/) API call.

<admonition type="warning">

`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()`](/chat/docs/javascript/query_members/) API endpoint separately to get the list of members.

</admonition>

```tsx
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](/chat/docs/sdk/react-native/v8/customization/theming/) applied to the current user’s messages.

| Type   |
| ------ |
| object |

<admonition type="warning">

Memoize this object or pass a stable reference.

</admonition>


## UI Component Props

### `MessageAvatar`

Renders the sender avatar in [`MessageList`](/chat/docs/sdk/react-native/v8/ui-components/message-list/). Only shown for other users’ messages.

| Type          | Default                                                                                                                                                 |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ComponentType | [`MessageAvatar`](https://github.com/GetStream/stream-chat-react-native/v8/blob/develop/package/src/components/Message/MessageSimple/MessageAvatar.tsx) |


### `MessageContent`

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

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

### `MessageDeleted`

Renders a deleted message.

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

### `MessageFooter`

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

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

### `MessageHeader`

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

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

### `MessagePinnedHeader`

Renders the pinned message label in [`MessageList`](/chat/docs/sdk/react-native/v8/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/v8/ui-components/message-replies/) |

### `MessageStatus`

Renders message status (time and read receipts).

| Type          | Default                                                                         |
| ------------- | ------------------------------------------------------------------------------- |
| ComponentType | [`MessageStatus`](/chat/docs/sdk/react-native/v8/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/v8/tree/develop/package/src/components/Message/MessageSimple/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/v8/tree/develop/package/src/components/Message/MessageSimple/ReactionList/ReactionListTop.tsx) |


---

This page was last updated at 2026-04-21T07:55:40.522Z.

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