# MessagesContext

## Best Practices

- Use this context for message-level UI concerns, not global channel state.
- Prefer the provided handlers (`handleEdit`, `handleDelete`, etc.) to keep behavior consistent.
- Avoid heavy logic in handlers that can trigger list-wide re-renders.
- Use `removeMessage`/`updateMessage` only for local UI state, not server-side mutations.
- Keep `messageActions` and `supportedReactions` stable (memoized) for performance.

## Value

### additionalPressableProps

Extra props passed to the underlying [Pressable](https://reactnative.dev/docs/pressable#props) used in message components like [`MessageContent`](/chat/docs/sdk/react-native/v8/ui-components/message-content/).

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


### `channelId`

ID of the current channel.

| Type   |
| ------ |
| string |

### deletedMessagesVisibilityType

Controls visibility of deleted messages in the channel.

- `always`: Visible to both sender and receiver.
- `never`: Visible to no one.
- `sender`: Visible only to the sender.
- `receiver`: Visible only to the receiver.

| Type                                          | Default |
| --------------------------------------------- | ------- |
| enum('always', 'never', 'receiver', 'sender') | 'both'  |

### disableTypingIndicator

Disable the typing indicator in `MessageList`.

| Type    | Default |
| ------- | ------- |
| boolean | false   |

### dismissKeyboardOnMessageTouch

Dismiss the keyboard when the user touches a message in the list.

| Type    | Default |
| ------- | ------- |
| boolean | false   |

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

### enableSwipeToReply

If true, users can swipe to reply to a message.

| Type    | Default |
| ------- | ------- |
| Boolean | `true`  |

### forceAlignMessages

Forces all messages to align left or right. By default, received messages are left and sent messages are right.

| Type                       | Default |
| -------------------------- | ------- |
| 'left' \| 'right' \| false | false   |

### `formatDate`

Format function for dates in message status and deleted message components.

| Type     |
| -------- |
| function |

| Parameter | Description                                                                                                                                                    |
| --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| date      | date to format provided as a string, [Date](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date), or number (Unix Timestamp) |

### `handleBan`

Called when the _Ban User_ action is triggered. It does not override default behavior. See [customize message actions](/chat/docs/sdk/react-native/v8/guides/customize-message-actions/).

| Type     |
| -------- |
| function |

| Parameter | Description                     |
| --------- | ------------------------------- |
| message   | message the action is called on |

### `handleCopy`

Called when the _Copy Message_ action is triggered. It does not override default behavior. See [customize message actions](/chat/docs/sdk/react-native/v8/guides/customize-message-actions/).

| Type     |
| -------- |
| function |

| Parameter | Description                     |
| --------- | ------------------------------- |
| message   | message the action is called on |

### `handleDelete`

Called when the _Delete Message_ action is triggered. It does not override default behavior. See [customize message actions](/chat/docs/sdk/react-native/v8/guides/customize-message-actions/).

| Type     |
| -------- |
| function |

| Parameter | Description                     |
| --------- | ------------------------------- |
| message   | message the action is called on |

### `handleDeleteForMe`

Called when the _Delete Message for me_ action is triggered. It does not override default behavior. See [customize message actions](/chat/docs/sdk/react-native/v8/guides/customize-message-actions/).

| Type     |
| -------- |
| function |

| Parameter | Description                     |
| --------- | ------------------------------- |
| message   | message the action is called on |

### `handleEdit`

Called when the _Edit Message_ action is triggered. It does not override default behavior. See [customize message actions](/chat/docs/sdk/react-native/v8/guides/customize-message-actions/).

| Type     |
| -------- |
| function |

| Parameter | Description                     |
| --------- | ------------------------------- |
| message   | message the action is called on |

### `handleFlag`

Called when the _Flag Message_ action is triggered. It does not override default behavior. See [customize message actions](/chat/docs/sdk/react-native/v8/guides/customize-message-actions/).

| Type     |
| -------- |
| function |

| Parameter | Description                     |
| --------- | ------------------------------- |
| message   | message the action is called on |

### `handleMute`

Called when the _Mute User_ action is triggered from the message actions list. It does not override default behavior. See [customize message actions](/chat/docs/sdk/react-native/v8/guides/customize-message-actions/).

| Type     |
| -------- |
| function |

| Parameter | Description                     |
| --------- | ------------------------------- |
| message   | message the action is called on |

### handleQuotedReply

Called when the _Reply_ action is triggered. It does not override default behavior. See [customize message actions](/chat/docs/sdk/react-native/v8/guides/customize-message-actions/).

| Type     |
| -------- |
| function |

| Parameter | Description                     |
| --------- | ------------------------------- |
| message   | message the action is called on |

### handleReaction

Called when a reaction is selected in the message menu (add or remove). It does not override default behavior. See [customize message actions](/chat/docs/sdk/react-native/v8/guides/customize-message-actions/).

| Type     |
| -------- |
| Function |

| Parameter      | Description                              |
| -------------- | ---------------------------------------- |
| `message`      | Message the action is called on.         |
| `reactionType` | String designating the type of reaction. |

### `handleRetry`

Called when the _Retry_ action is triggered. It does not override default behavior. See [customize message actions](/chat/docs/sdk/react-native/v8/guides/customize-message-actions/).

| Type     |
| -------- |
| function |

| Parameter | Description                     |
| --------- | ------------------------------- |
| message   | message the action is called on |

### handleThreadReply

Called when the _Thread Reply_ action is triggered. It does not override default behavior. See [customize message actions](/chat/docs/sdk/react-native/v8/guides/customize-message-actions/).

| Type     |
| -------- |
| function |

| Parameter | Description                     |
| --------- | ------------------------------- |
| message   | message the action is called on |

### initialScrollToFirstUnreadMessage

Load the channel starting at the first unread message.

| Type    | Default |
| ------- | ------- |
| boolean | false   |

### isAttachmentEqual

Returns true if rendering `nextAttachment` would produce the same result as `prevAttachment`, otherwise false.

| Type     |
| -------- |
| function |

| Parameter      | Description                                |
| -------------- | ------------------------------------------ |
| prevAttachment | previous message attachment to be compared |
| nextAttachment | next message attachment to be compared     |

### legacyImageViewerSwipeBehaviour

### markdownRules

Rules for [simple-markdown](https://github.com/Khan/simple-markdown#adding-a-simple-extension).

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

### `messageActions`

An array of actions, or a function returning an array, shown in the message menu. See [customize message actions](/chat/docs/sdk/react-native/v8/guides/customize-message-actions/).

| Type              | Default                                                                                                                                     |
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
| Array \| Function | [messageActions](https://github.com/GetStream/stream-chat-react-native/v8/blob/main/package/src/components/Message/utils/messageActions.ts) |

| Parameter    | Description                                                         |
| ------------ | ------------------------------------------------------------------- |
| `actionInfo` | An object containing the original actions and relevant message data |

### messageContentOrder

Order for rendering message content.

| Type  | Default                                                     |
| ----- | ----------------------------------------------------------- |
| array | ['quoted_reply', 'gallery', 'files', 'text', 'attachments'] |

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


### messageSwipeToReplyHitSlop

Defines the `hitSlop` area for the message swipe-to-reply gesture.

| Type                                                                 | Default                                   |
| -------------------------------------------------------------------- | ----------------------------------------- |
| Object`{ top: number, left: number, bottom: number, right: number }` | `{left: screenWidth, right: screenWidth}` |

### messageTextNumberOfLines

Number of lines for message text in the Message Overlay.

| Type   | Default |
| ------ | ------- |
| number | 5       |

### onLongPressMessage

Called when a user long-presses a message. The default opens the message menu.

| Type     |
| -------- |
| function |

| Parameter | Description                   |
| --------- | ----------------------------- |
| payload   | `{ actionHandlers, message }` |

### onPressInMessage

Called on touch start, before [`onPressMessage`](#onpressmessage).

| Type     |
| -------- |
| function |

| Parameter | Description                   |
| --------- | ----------------------------- |
| payload   | `{ actionHandlers, message }` |

### onPressMessage

Called when a user presses a message.

<admonition type="warning">

The default handler behaves differently for reactions and attachments. Handle those cases if you override it.

</admonition>

| Type     |
| -------- |
| function |

| Parameter | Description                                   |
| --------- | --------------------------------------------- |
| payload   | `{ additionalInfo, actionHandlers, message }` |

`additionalInfo` provides extra data for certain emitters (for example, user details for `textMention`).

For example:

```tsx
    <Channel
      onPressMessage={({ additionalInfo, defaultHandler, emitter }) => {

          if (emitter === 'textMention') {
            console.log(additionalInfo?.user);
            return;
          }

          if (emitter === 'card' || emitter === 'textLink') {
            console.log(additionalInfo?.url);
            return;
          }

          if (emitter === 'fileAttachment') {
            console.log(additionalInfo?.attachment);
            return;
          }

          defaultHandler?.();
      }}
    >
```

<admonition type="note">

`additionalInfo` may change as we add more emitter use cases.

</admonition>

### reactionListPosition

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

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

### `removeMessage`

Remove a message from local state only (does not call `channel.deleteMessage`).

| Type                |
| ------------------- |
| `(message) => void` |

### Reply

Renders a preview of the parent message for quoted replies.

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


### retrySendMessage

Retry sending a failed message.

| Type                |
| ------------------- |
| `(message) => void` |

### selectReaction

Full override of the message reaction handler. It must return a function that accepts `reactionType` (string). See [customize message actions](/chat/docs/sdk/react-native/v8/guides/customize-message-actions/).

| Type             |
| ---------------- |
| function \| null |

| Parameter | Description                     |
| --------- | ------------------------------- |
| message   | message the action is called on |

### setEditingState

Set editing state for a message.

| Type                |
| ------------------- |
| `(message) => void` |

### setQuotedMessageState

Set quoted-reply state for a message.

| Type                |
| ------------------- |
| `(message) => void` |

### shouldShowUnreadUnderlay

Enable/disable the unread underlay background in the message list.

| Type                   | Default |
| ---------------------- | ------- |
| `boolean`\|`undefined` | `true`  |

### supportedReactions

List of reactions users can add to messages. See [customizing reactions](/chat/docs/sdk/react-native/v8/guides/message-customization#message-with-custom-reactions/).

| Type  | Default                                                                                                                                                                |
| ----- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Array | [reactionData](https://github.com/GetStream/stream-chat-react-native/v8/blob/182f1047a1417da64047a12f9a6cfaf1252cfbd8/package/src/components/Channel/Channel.tsx#L129) |


### `targetedMessage`

ID of the highlighted message. Defaults to `undefined` and resets after the highlight timeout.

| Type   |
| ------ |
| string |

### `updateMessage`

Upsert a message in local state. Does not call `channel.sendMessage` (used for optimistic updates).

| Type                |
| ------------------- |
| `(message) => void` |

### openPollCreationDialog

Called when the poll creation button is clicked in the attachment picker. Use it to override the default modal UI.

If overridden, a `payload` is passed with `sendMessage` from [`MessageInputContext`](/chat/docs/sdk/react-native/v8/contexts/message-input-context/) for use in [`CreatePoll`](/chat/docs/sdk/react-native/v8/ui-components/create-poll/).

| Type     |
| -------- |
| function |

| Parameter | Description       |
| --------- | ----------------- |
| payload   | `{ sendMessage }` |

### hasCreatePoll

Controls whether the poll creation button is visible.

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

### Attachment

Renders attachments in `MessageList`.

Available props:

- `attachment` `{object}`

| Type          | Default                                                                  |
| ------------- | ------------------------------------------------------------------------ |
| ComponentType | [`Attachment`](/chat/docs/sdk/react-native/v8/ui-components/attachment/) |

### AttachmentActions

Renders additional attachment actions (for example, Giphy send/shuffle/cancel).

| Type          | Default                                                                                                                                         |
| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
| ComponentType | [AttachmentActions](https://github.com/GetStream/stream-chat-react-native/v8/blob/main/package/src/components/Attachment/AttachmentActions.tsx) |


### AudioAttachment

Renders the audio attachment.

| Type          | Default                                                                             |
| ------------- | ----------------------------------------------------------------------------------- |
| ComponentType | [`AudioAttachment`](/chat/docs/sdk/react-native/v8/ui-components/audio-attachment/) |

### Card

Renders custom attachment types. See [Custom Attachment](/chat/docs/sdk/react-native/v8/guides/custom-attachment/).

| Type          | Default                                                      |
| ------------- | ------------------------------------------------------------ |
| ComponentType | [`Card`](/chat/docs/sdk/react-native/v8/ui-components/card/) |

### CardCover

Renders the main body of [`Card`](/chat/docs/sdk/react-native/v8/ui-components/card/) attachments. See [Custom Attachment](/chat/docs/sdk/react-native/v8/guides/custom-attachment/).

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

### CardFooter

Renders the footer for [`Card`](/chat/docs/sdk/react-native/v8/ui-components/card/) attachments. See [Custom Attachment](/chat/docs/sdk/react-native/v8/guides/custom-attachment/).

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

### CardHeader

Renders the header for [`Card`](/chat/docs/sdk/react-native/v8/ui-components/card/) attachments. See [Custom Attachment](/chat/docs/sdk/react-native/v8/guides/custom-attachment/).

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

### DateHeader

Renders the sticky date header in `MessageList`.

| Type          | Default                                                                                                                            |
| ------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
| ComponentType | [DateHeader](https://github.com/GetStream/stream-chat-react-native/v8/blob/main/package/src/components/MessageList/DateHeader.tsx) |

### FileAttachment

Renders `file` attachments in `MessageList`.

| Type          | Default                                                                           |
| ------------- | --------------------------------------------------------------------------------- |
| ComponentType | [`FileAttachment`](/chat/docs/sdk/react-native/v8/ui-components/file-attachment/) |

### FileAttachmentGroup

Renders a group of `file` attachments when a message has multiple files.

| Type          | Default                                                                                      |
| ------------- | -------------------------------------------------------------------------------------------- |
| ComponentType | [`FileAttachmentGroup`](/chat/docs/sdk/react-native/v8/ui-components/file-attachment-group/) |

### FileAttachmentIcon

Renders the file icon for `file` attachments.

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


### FlatList

`FlatList` component used by `MessageList`.

| Type          | Default                                                                                                                            |
| ------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
| ComponentType | [flat-list-mvcp](https://github.com/GetStream/flat-list-mvcp#maintainvisiblecontentposition-prop-support-for-android-react-native) |

### Gallery

Renders `image` attachments in `MessageList`.

| Type          | Default                                                            |
| ------------- | ------------------------------------------------------------------ |
| ComponentType | [`Gallery`](/chat/docs/sdk/react-native/v8/ui-components/gallery/) |


### Giphy

Renders Giphy attachments in `MessageList`.

| Type          | Default                                                        |
| ------------- | -------------------------------------------------------------- |
| ComponentType | [`Giphy`](/chat/docs/sdk/react-native/v8/ui-components/giphy/) |

### giphyVersion

Giphy image version to render. See the [Image Object](https://developers.giphy.com/docs/api/schema#image-object) keys for options.

| Type   | Default        |
| ------ | -------------- |
| string | 'fixed_height' |

### InlineDateSeparator

Renders inline date separators between messages more than a day apart.

| Type          | Default                                                                                                                                              |
| ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
| ComponentType | [InlineDateSeparator](https://github.com/GetStream/stream-chat-react-native/v8/blob/main/package/src/components/MessageList/InlineDateSeparator.tsx) |

### InlineUnreadIndicator

Renders an inline separator in `MessageList` to mark the last read message.

| Type          | Default                                                                                                                                                  |
| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ComponentType | [InlineUnreadIndicator](https://github.com/GetStream/stream-chat-react-native/v8/blob/main/package/src/components/MessageList/InlineUnreadIndicator.tsx) |

### MessageActionList

Renders the message action list in the message menu.

| Type          | Default                                                                                                                                                           |
| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ComponentType | [`MessageActionList`](https://github.com/GetStream/stream-chat-react-native/v8/blob/main/package/src/components/MessageMenu/MessageActionList.tsx) \| `undefined` |

### MessageActionListItem

Renders a message action item within the action list.

| Type          | Default                                                                                                                                                                   |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ComponentType | [`MessageActionListItem`](https://github.com/GetStream/stream-chat-react-native/v8/blob/main/package/src/components/MessageMenu/MessageActionListItem.tsx) \| `undefined` |

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


### MessageBounce

Renders the bounce action handler for bounced messages in [`MessageList`](/chat/docs/sdk/react-native/v8/ui-components/message-list/).

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

### 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/) |

### MessageEditedTimestamp

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

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

### MessageError

Customize the message error component.

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

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

### MessageMenu

Customize the message menu used for actions and reactions.

| Type          | Default                                                                                                                                               |
| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
| ComponentType | [`MessageMenu`](https://github.com/GetStream/stream-chat-react-native/v8/blob/main/package/src/components/MessageMenu/MessageMenu.tsx) \| `undefined` |

### 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/) |

### MessageRepliesAvatars

Renders avatars of users who replied in the thread.

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

### MessageSimple

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

See [Customizing Message UI](/chat/docs/sdk/react-native/v8/guides/message-customization/).

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

### MessageStatus

Renders message status (time and read receipts).

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

### MessageSwipeContent

Renders content when the user swipes a message.

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

### MessageSystem

Renders `system` messages that inform users about channel changes. System messages are part of history and have `type: "system"`.

System messages appear when:

- [A user gets added to or removed from channel](/chat/docs/javascript/channel_members/)
- [A user accepts invite to join a channel](/chat/docs/javascript/channel_invites/#accepting-an-invite/)
- [Channel is updated](<https:/getstream.io/chat/docs/javascript/channel_update/#full-update-(overwrite)>)

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

### MessageText

Renders message text. By default, the SDK uses [Simple Markdown](https://github.com/Khan/simple-markdown#adding-a-simple-extension). If you override this, you must handle markdown rendering yourself.

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

### MessageReactionPicker

Reaction selector shown in the message menu on long-press.

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

### MessageUserReactionsAvatar

Renders an avatar in message user reactions within the message menu.

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

### MessageUserReactionsItem

Customize an individual user reaction item in `MessageMenu`’s `MessageUserReactions` (avatar, reaction type, user name, etc.).

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

### MessageUserReactions

Renders the reactions list in the message menu.

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

### MessageUserReactionsAvatar

Renders an avatar in message user reactions within the message menu.

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

### MessageUserReactionsItem

Customize an individual user reaction item in `MessageMenu`’s `MessageUserReactions` (avatar, reaction type, user name, etc.).

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

### MessageUserReactions

Renders the reactions list in the message menu.

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

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

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

### ScrollToBottomButton

Renders a button that scrolls the message list to the bottom.

| Type          | Default                                                                                         |
| ------------- | ----------------------------------------------------------------------------------------------- |
| ComponentType | [`ScrollToBottomButton`](/chat/docs/sdk/react-native/v8/ui-components/scroll-to-bottom-button/) |

### TypingIndicator

Renders the typing indicator in `MessageList`.

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

### TypingIndicatorContainer

Renders the container for the typing indicator in `MessageList`.

| Type          | Default                                                                                                                                                        |
| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ComponentType | [TypingIndicatorContainer](https://github.com/GetStream/stream-chat-react-native/v8/blob/main/package/src/components/MessageList/TypingIndicatorContainer.tsx) |

### UrlPreview

Renders URL previews in `MessageList`.

| Type          | Default                                                      |
| ------------- | ------------------------------------------------------------ |
| ComponentType | [`Card`](/chat/docs/sdk/react-native/v8/ui-components/card/) |

### VideoThumbnail

Renders video thumbnails for video attachments in `MessageList`.

| Type          | Default                                                                           |
| ------------- | --------------------------------------------------------------------------------- |
| ComponentType | [`VideoThumbnail`](/chat/docs/sdk/react-native/v8/ui-components/video-thumbnail/) |

### PollContent

A `Component` prop used to render the content of the `Poll` component in `MessageList`.

The component has full access to the entire `Poll` reactive state through the `usePollState` hook.

| Type          | Default                                                                                                                  |
| ------------- | ------------------------------------------------------------------------------------------------------------------------ |
| ComponentType | [`PollContent`](https://github.com/GetStream/stream-chat-react-native/v8/blob/main/package/src/components/Poll/Poll.tsx) |

#### Props

##### `PollHeader`

A `Component` prop used to render the header of the `PollContent` component.

| Type          | Default                                                                                                                 |
| ------------- | ----------------------------------------------------------------------------------------------------------------------- |
| ComponentType | [`PollHeader`](https://github.com/GetStream/stream-chat-react-native/v8/blob/main/package/src/components/Poll/Poll.tsx) |

##### `PollButtons`

A `Component` prop used to render the buttons of the `PollContent` component.

| Type          | Default                                                                                                                  |
| ------------- | ------------------------------------------------------------------------------------------------------------------------ |
| ComponentType | [`PollButtons`](https://github.com/GetStream/stream-chat-react-native/v8/blob/main/package/src/components/Poll/Poll.tsx) |


---

This page was last updated at 2026-04-17T17:33:44.418Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react-native/v8/contexts/messages-context/](https://getstream.io/chat/docs/sdk/react-native/v8/contexts/messages-context/).