# MessagesContext
## Value
### additionalPressableProps
Additional props provided to the underlying [Pressable](https://reactnative.dev/docs/pressable#props) used by components within a message such as [`MessageContent`](https://getstream.io/chat/docs/sdk/react-native/v6/ui-components/message-content/).
| Type |
| ------ |
| object |
### `channelId`
Id of current channel.
| Type |
| ------ |
| string |
### deletedMessagesVisibilityType
Controls the visibility of the deleted messages within the channel.
- `always`: The deleted messages in the channel will be visible to both the sender and receiver.
- `never`: The deleted messages will not be visible to anyone.
- `sender`: The deleted messages in the channel will only be visible to sender.
- `receiver`: The deleted messages in the channel will only be visible to receiver.
| Type | Default |
| --------------------------------------------- | ------- |
| enum('always', 'never', 'receiver', 'sender') | 'both' |
### disableTypingIndicator
Disable typing indicator in `MessageList`.
| Type | Default |
| ------- | ------- |
| boolean | false |
### dismissKeyboardOnMessageTouch
Dismiss the keyboard when a user touches any of the messages in the list.
| Type | Default |
| ------- | ------- |
| boolean | false |
### enableMessageGroupingByUser
**Note:** This prop is available only in SDK version >= [v3.9.0](https://github.com/GetStream/stream-chat-react-native/releases)
If false, consecutive messages from same user won't be grouped together.
| Type | Default |
| ------- | ------- |
| boolean | true |
### enableSwipeToReply
If true, the user can swipe to reply to a message.
| Type | Default |
| ------- | ------- |
| Boolean | `true` |
### forceAlignMessages
Forces alignment of messages in the list to either the left or right side of the screen.
By default, received messages are aligned on the left side of the screen, and sent messages are aligned on the right.
| Type | Default |
| -------------------------- | ------- |
| 'left' \| 'right' \| false | false |
### `formatDate`
Format function that returns a string to be used for the date in the message status and delete message component.
| 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`
Function called when the _Ban User_ action is invoked from message actions list.
This function does not override the default behavior of the _Ban User_ action.
Please refer to [the guide on customizing message actions](https://getstream.io/chat/docs/sdk/react-native/v6/guides/customize-message-actions/) for details.
| Type |
| -------- |
| function |
| Parameter | Description |
| --------- | ------------------------------- |
| message | message the action is called on |
### `handleCopy`
Function called when the _Copy Message_ action is invoked from message actions list.
This function does not override the default behavior of the _Copy Message_ action.
Please refer to [the guide on customizing message actions](https://getstream.io/chat/docs/sdk/react-native/v6/guides/customize-message-actions/) for details.
| Type |
| -------- |
| function |
| Parameter | Description |
| --------- | ------------------------------- |
| message | message the action is called on |
### `handleDelete`
Function called when the _Delete Message_ action is invoked from message actions list.
This function does not override the default behavior of the _Delete Message_ action.
Please refer to [the guide on customizing message actions](https://getstream.io/chat/docs/sdk/react-native/v6/guides/customize-message-actions/) for details.
| Type |
| -------- |
| function |
| Parameter | Description |
| --------- | ------------------------------- |
| message | message the action is called on |
### `handleEdit`
Function called when the _Edit Message_ action is invoked from message actions list.
This function does not override the default behavior of the _Edit Message_ action.
Please refer to [the guide on customizing message actions](https://getstream.io/chat/docs/sdk/react-native/v6/guides/customize-message-actions/) for details.
| Type |
| -------- |
| function |
| Parameter | Description |
| --------- | ------------------------------- |
| message | message the action is called on |
### `handleFlag`
Function called when the _Flag Message_ action is invoked from message actions list.
This function does not override the default behavior of the _Flag Message_ action.
Please refer to [the guide on customizing message actions](https://getstream.io/chat/docs/sdk/react-native/v6/guides/customize-message-actions/) for details.
| Type |
| -------- |
| function |
| Parameter | Description |
| --------- | ------------------------------- |
| message | message the action is called on |
### `handleMute`
Function called when the _Mute User_ action is invoked from message actions list.
This function does not override the default behavior of the _Mute User_ action.
Please refer to [the guide on customizing message actions](https://getstream.io/chat/docs/sdk/react-native/v6/guides/customize-message-actions/) for details.
| Type |
| -------- |
| function |
| Parameter | Description |
| --------- | ------------------------------- |
| message | message the action is called on |
### handleQuotedReply
Function called when the _Reply_ action is invoked from message actions list.
This function does not override the default behavior of the _Reply_ action.
Please refer to [the guide on customizing message actions](https://getstream.io/chat/docs/sdk/react-native/v6/guides/customize-message-actions/) for details.
| Type |
| -------- |
| function |
| Parameter | Description |
| --------- | ------------------------------- |
| message | message the action is called on |
### handleReaction
Function called when a reaction is selected in the message menu, this is called on both the add and remove action.
This function does not override the default behavior of the reaction being selected.
Please refer to [the guide on customizing message actions](https://getstream.io/chat/docs/sdk/react-native/v6/guides/customize-message-actions/) for details.
| Type |
| -------- |
| Function |
| Parameter | Description |
| -------------- | ---------------------------------------- |
| `message` | Message the action is called on. |
| `reactionType` | String designating the type of reaction. |
### `handleRetry`
Function called when the _Retry_ action is invoked from message actions list.
This function does not override the default behavior of the _Retry_ action.
Please refer to [the guide on customizing message actions](https://getstream.io/chat/docs/sdk/react-native/v6/guides/customize-message-actions/) for details.
| Type |
| -------- |
| function |
| Parameter | Description |
| --------- | ------------------------------- |
| message | message the action is called on |
### handleThreadReply
Function called when the _Thread Reply_ action is invoked from message actions list.
This function does not override the default behavior of the _Thread Reply_ action.
Please refer to [the guide on customizing message actions](https://getstream.io/chat/docs/sdk/react-native/v6/guides/customize-message-actions/) for details.
| Type |
| -------- |
| function |
| Parameter | Description |
| --------- | ------------------------------- |
| message | message the action is called on |
### initialScrollToFirstUnreadMessage
Load messages in a channel at the first unread message.
| Type | Default |
| ------- | ------- |
| boolean | false |
### isAttachmentEqual
Function which returns true if passing `nextAttachment` to render would return the same result as passing `prevAttachment` to render, otherwise return false.
| Type |
| -------- |
| function |
| Parameter | Description |
| -------------- | ------------------------------------------ |
| prevAttachment | previous message attachment to be compared |
| nextAttachment | next message attachment to be compared |
### legacyImageViewerSwipeBehaviour
### markdownRules
Object specifying rules defined within [simple-markdown](https://github.com/Khan/simple-markdown#adding-a-simple-extension).
| Type |
| ------ |
| object |
### `messageActions`
An array of, or function that returns and array of, actions that can be performed on a message shown in the message menu.
Please refer to [the guide on customizing message actions](https://getstream.io/chat/docs/sdk/react-native/v6/guides/customize-message-actions/) for details.
| Type | Default |
| ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
| Array \| Function | [messageActions](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Message/utils/messageActions.ts) |
| Parameter | Description |
| ------------ | ------------------------------------------------------------------- |
| `actionInfo` | An object containing the original actions and relevant message data |
### messageContentOrder
Order in which to render the content of a message.
| Type | Default |
| ----- | ----------------------------------------------------------- |
| array | ['quoted_reply', 'gallery', 'files', 'text', 'attachments'] |
### myMessageTheme
[Theme](https://getstream.io/chat/docs/sdk/react-native/v6/customization/theming/) applied to messages of the current user.
| Type |
| ------ |
| object |
Please make sure to memoize or pass static reference for this object.
### messageSwipeToReplyHitSlop
The `hitSlop` prop is used to define the area around the component where the user can interact with it.
This is for the message swipe to reply feature.
| Type | Default |
| -------------------------------------------------------------------- | ----------------------------------------- |
| Object`{ top: number, left: number, bottom: number, right: number }` | `{left: screenWidth, right: screenWidth}` |
### messageTextNumberOfLines
Number of lines for the message text in the Message Overlay.
| Type | Default |
| ------ | ------- |
| number | 5 |
### onLongPressMessage
Function called when a user long presses a message. The default opens the message menu.
| Type |
| -------- |
| function |
| Parameter | Description |
| --------- | ----------------------------- |
| payload | `{ actionHandlers, message }` |
### onPressInMessage
Function called immediately when a touch is engaged on a message, before [`onPressMessage`](#onpressmessage).
| Type |
| -------- |
| function |
| Parameter | Description |
| --------- | ----------------------------- |
| payload | `{ actionHandlers, message }` |
### onPressMessage
Function called when a user presses a message.
The default handler for message press interactions acts differently when pressing on reactions and attachments.
You will have to handle these cases when overriding this function.
| Type |
| -------- |
| function |
| Parameter | Description |
| --------- | --------------------------------------------- |
| payload | `{ additionalInfo, actionHandlers, message }` |
The `additionalInfo` prop is handy for getting information from certain click events.
A good example of this is getting the user details when a `textMention` (for example @Enigma-I-am) is clicked.
For example:
```tsx
{
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?.();
}}
>
```
:::info
The `additionalInfo` prop will change over time as we explore more use-cases for different `emitter's`.
### reactionListPosition
The position of the reaction list in the message component. By default, the reaction list is positioned on top the message content.
| Type | Default value |
| ----------------- | ------------- |
| `top` \| `bottom` | 'top' |
### `removeMessage`
Function to remove message from local channel state. Please note that this function is only for updating the local state, it doesn't call the API for deleting message (`channel.deleteMessage`).
| Type |
| ------------------- |
| `(message) => void` |
### Reply
Component to render preview of parent of message for quoted reply.
| Type | Default |
| ------------- | -------------------------------------------------------------------------------------------------------------------- |
| ComponentType | [`Reply`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/components/Reply/Reply.tsx) |
### retrySendMessage
Function to re-attempt sending failed message.
| Type |
| ------------------- |
| `(message) => void` |
### selectReaction
Full override of the reaction function on a message.
This function must return a function that takes as a parameter the `reactionType` as a string.
Please refer to [the guide on customizing message actions](https://getstream.io/chat/docs/sdk/react-native/v6/guides/customize-message-actions/) for details.
| Type |
| ---------------- |
| function \| null |
| Parameter | Description |
| --------- | ------------------------------- |
| message | message the action is called on |
### setEditingState
Enables editing state for given message.
| Type |
| ------------------- |
| `(message) => void` |
### setQuotedMessageState
Enables quoted-reply state on given message.
| Type |
| ------------------- |
| `(message) => void` |
### shouldShowUnreadUnderlay
Boolean to enable/disable the message underlay background when there are unread messages in the Message List.
| Type | Default |
| ---------------------- | ------- |
| `boolean`\|`undefined` | `true` |
### supportedReactions
List of reactions which can be added on message.
Please refer to [the guide on customizing reactions](https://getstream.io/chat/docs/sdk/react-native/v6/guides/message-customization/) for details.
| Type | Default |
| ----- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Array | [reactionData](https://github.com/GetStream/stream-chat-react-native/blob/182f1047a1417da64047a12f9a6cfaf1252cfbd8/package/src/components/Channel/Channel.tsx#L129) |
### `targetedMessage`
Has the message id of the message which is to be highlighted. By default the value is undefined. As soon as the highlight time is out this is set to `undefined`.
| Type |
| ------ |
| string |
### `updateMessage`
Upserts a given message in local channel state. Please note that this function doesn't call `channel.sendMessage`. Channel component uses this function for optimistic updates to message.
| Type |
| ------------------- |
| `(message) => void` |
### openPollCreationDialog
Function called immediately when the poll creation button is clicked in the attachment picker. Can be used to override the default behaviour of the poll creation UI appearing as a Modal.
If overridden, a `payload` is passed containing the `sendMessage` callback from [`MessageInputContext`](https://getstream.io/chat/docs/sdk/react-native/v6/contexts/message-input-context/) is passed, so that [`CreatePoll`](https://getstream.io/chat/docs/sdk/react-native/v6/ui-components/create-poll/)
| Type |
| -------- |
| function |
| Parameter | Description |
| --------- | ----------------- |
| payload | `{ sendMessage }` |
### hasCreatePoll
A boolean value that is responsible for controlling whether the poll creation button is visible or not.
| Type |
| ------- |
| boolean |
### Attachment
Component for rendering attachments in MessageList.
Available props:
- `attachment` `{object}`
| Type | Default |
| ------------- | ------------------------------------------------------------------------ |
| ComponentType | [`Attachment`](https://getstream.io/chat/docs/sdk/react-native/v6/ui-components/attachment/) |
### AttachmentActions
Component to render additional actions on attachment. for example send, shuffle, cancel in case of Giphy.
| Type | Default |
| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
| ComponentType | [AttachmentActions](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Attachment/AttachmentActions.tsx) |
### AudioAttachment
Component for rendering the Audio Attachment
| Type | Default |
| ------------- | ----------------------------------------------------------------------------------- |
| ComponentType | [`AudioAttachment`](https://getstream.io/chat/docs/sdk/react-native/v6/ui-components/audio-attachment/) |
### Card
Component to render any custom type of attachment. Please check the guides for [Custom Attachment](https://getstream.io/chat/docs/sdk/react-native/v6/guides/custom-attachment/)
| Type | Default |
| ------------- | ------------------------------------------------------------ |
| ComponentType | [`Card`](https://getstream.io/chat/docs/sdk/react-native/v6/ui-components/card/) |
### CardCover
Component to render main body for [`Card`](https://getstream.io/chat/docs/sdk/react-native/v6/ui-components/card/) component which renders custom type of attachment.
Please check the guides for [Custom Attachment](https://getstream.io/chat/docs/sdk/react-native/v6/guides/custom-attachment/).
| Type |
| ------------- |
| ComponentType |
### CardFooter
Component to render footer for [`Card`](https://getstream.io/chat/docs/sdk/react-native/v6/ui-components/card/) component which renders custom type of attachment. Please check the guides for [Custom Attachment](https://getstream.io/chat/docs/sdk/react-native/v6/guides/custom-attachment/).
| Type |
| ------------- |
| ComponentType |
### CardHeader
Component to render header for [`Card`](https://getstream.io/chat/docs/sdk/react-native/v6/ui-components/card/) component which renders custom type of attachment. Please check the guides for [Custom Attachment](https://getstream.io/chat/docs/sdk/react-native/v6/guides/custom-attachment/).
| Type |
| ------------- |
| ComponentType |
### DateHeader
Component to render sticky date header within enclosed MessageList component.
| Type | Default |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------- |
| ComponentType | [DateHeader](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageList/DateHeader.tsx) |
### FileAttachment
Component to render 'file' type attachment in `MessageList`.
| Type | Default |
| ------------- | --------------------------------------------------------------------------------- |
| ComponentType | [`FileAttachment`](https://getstream.io/chat/docs/sdk/react-native/v6/ui-components/file-attachment/) |
### FileAttachmentGroup
Component to render group of `file` type attachments, when there are multiple `file` type attachments in message.
| Type | Default |
| ------------- | -------------------------------------------------------------------------------------------- |
| ComponentType | [`FileAttachmentGroup`](https://getstream.io/chat/docs/sdk/react-native/v6/ui-components/file-attachment-group/) |
### FileAttachmentIcon
Component to render file icon for `file` type attachment.
| Type | Default |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------- |
| ComponentType | [`FileIcon`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/components/Attachment/FileIcon.tsx) |
### FlatList
`FlatList` component for underlying `MessageList` component.
| Type | Default |
| ------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
| ComponentType | [flat-list-mvcp](https://github.com/GetStream/flat-list-mvcp#maintainvisiblecontentposition-prop-support-for-android-react-native) |
### Gallery
Component to render 'image' type attachments in the `MessageList`.
| Type | Default |
| ------------- | ------------------------------------------------------------------ |
| ComponentType | [`Gallery`](https://getstream.io/chat/docs/sdk/react-native/v6/ui-components/gallery/) |
### Giphy
Component to render Giphy type attachments in `MessageList`.
| Type | Default |
| ------------- | -------------------------------------------------------------- |
| ComponentType | [`Giphy`](https://getstream.io/chat/docs/sdk/react-native/v6/ui-components/giphy/) |
### giphyVersion
The Giphy version to render - check the keys of the [Image Object](https://developers.giphy.com/docs/api/schema#image-object) for possible values.
| Type | Default |
| ------ | -------------- |
| string | 'fixed_height' |
### InlineDateSeparator
Component to render inline date separators between messages which were created at a difference of more than a day.
| Type | Default |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
| ComponentType | [InlineDateSeparator](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageList/InlineDateSeparator.tsx) |
### InlineUnreadIndicator
Component to render inline separator in MessageList, to indicate the position of last read message in list.
| Type | Default |
| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
| ComponentType | [InlineUnreadIndicator](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageList/InlineUnreadIndicator.tsx) |
### MessageActionList
Component for rendering a message action list within the message menu.
| Type | Default |
| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ComponentType | [`MessageActionList`](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageMenu/MessageActionList.tsx) \| `undefined` |
### MessageActionListItem
Component for rendering message action list items within a message action list.
| Type | Default |
| ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ComponentType | [`MessageActionListItem`](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageMenu/MessageActionListItem.tsx) \| `undefined` |
### MessageAvatar
Component to render avatar of sender for message, within [`MessageList`](https://getstream.io/chat/docs/sdk/react-native/v6/ui-components/message-list/). This component is only rendered for messages from other users.
| Type | Default |
| ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
| ComponentType | [`MessageAvatar`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/components/Message/MessageSimple/MessageAvatar.tsx) |
### MessageBounce
Component to render bounce action handler on click or long press of a Bounced message, within [`MessageList`](https://getstream.io/chat/docs/sdk/react-native/v6/ui-components/message-list/).
| Type | Default |
| ------------- | ------------------------------------------------------------------------------- |
| ComponentType | [`MessageBounce`](https://getstream.io/chat/docs/sdk/react-native/v6/ui-components/message-bounce/) |
### MessageContent
Component to render content of message including status, attachments, reactions etc., within [`MessageList`](https://getstream.io/chat/docs/sdk/react-native/v6/ui-components/message-list/).
| Type | Default |
| ------------- | --------------------------------------------------------------------------------- |
| ComponentType | [`MessageContent`](https://getstream.io/chat/docs/sdk/react-native/v6/ui-components/message-content/) |
### MessageDeleted
Component to render deleted message.
| Type | Default |
| ------------- | --------------------------------------------------------------------------------- |
| ComponentType | [`MessageDeleted`](https://getstream.io/chat/docs/sdk/react-native/v6/ui-components/message-deleted/) |
### MessageEditedTimestamp
Component to render message edited label in message when the message is clicked, within [`MessageList`](https://getstream.io/chat/docs/sdk/react-native/v6/ui-components/message-list/). This component is only rendered for messages from other users.
| Type | Default |
| ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ComponentType | [`MessageEditedTimestamp`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/components/Message/MessageSimple/MessageEditedTimestamp.tsx) |
### MessageError
Component to customize the message error component.
| Type | Default |
| ------------- | ----------------------------------------------------------------------------- |
| ComponentType | [`MessageError`](https://getstream.io/chat/docs/sdk/react-native/v6/ui-components/message-error/) |
### MessageFooter
Component to render footer for message, within [`MessageList`](https://getstream.io/chat/docs/sdk/react-native/v6/ui-components/message-list/).
| Type | Default |
| ------------- | ------------------------------------------------------------------------------- |
| ComponentType | [`MessageFooter`](https://getstream.io/chat/docs/sdk/react-native/v6/ui-components/message-footer/) |
### MessageHeader
Component to render header for message, within [`MessageList`](https://getstream.io/chat/docs/sdk/react-native/v6/ui-components/message-list/).
| Type |
| ------------- |
| ComponentType |
### MessageMenu
Component to customize the message contextual menu which allows users to perform actions on a message and react to messages.
| Type | Default |
| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
| ComponentType | [`MessageMenu`](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageMenu/MessageMenu.tsx) \| `undefined` |
### MessageReplies
Component to show number of thread replies and avatars of members who replied on message
| Type | Default |
| ------------- | --------------------------------------------------------------------------------- |
| ComponentType | [`MessageReplies`](https://getstream.io/chat/docs/sdk/react-native/v6/ui-components/message-replies/) |
### MessageRepliesAvatars
Component to show avatars of members who thread replied on message.
| Type | Default |
| ------------- | ------------------------------------------------------------------------------------------------ |
| ComponentType | [`MessageRepliesAvatars`](https://getstream.io/chat/docs/sdk/react-native/v6/ui-components/message-replies-avatars/) |
### MessageSimple
Component to render a message within [`MessageList`](https://getstream.io/chat/docs/sdk/react-native/v6/ui-components/message-list/).
Please check guides section for [Customizing Message UI](https://getstream.io/chat/docs/sdk/react-native/v6/guides/message-customization/) for details.
| Type | Default |
| ------------- | ------------------------------------------------------------------------------- |
| ComponentType | [`MessageSimple`](https://getstream.io/chat/docs/sdk/react-native/v6/ui-components/message-simple/) |
### MessageStatus
Component to render status of message, which includes time and read-receipts.
| Type | Default |
| ------------- | ------------------------------------------------------------------------------- |
| ComponentType | [`MessageStatus`](https://getstream.io/chat/docs/sdk/react-native/v6/ui-components/message-status/) |
### MessageSwipeContent
Component that renders when the user swipes on a message.
| Type | Default |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ComponentType | [`MessageSwipeContent`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/components/Message/MessageSimple/MessageSwipeContent.tsx) \| `undefined` |
### MessageSystem
Component to render `system` type messages. Purpose of system messages is to inform user about changes to channel. System messages are part of message history, and have a property `type` set as `system`.
You can add system messages within message history in following scenarios:
- [A user gets added to or removed from channel](https://getstream.io/chat/docs/javascript/channel-members/)
- [A user accepts invite to join a channel](https://getstream.io/chat/docs/javascript/channel-invites/#accept-an-invite)
- [Channel is updated](https://getstream.io/chat/docs/javascript/channel-update/#full-update)
| Type | Default |
| ------------- | ------------------------------------------------------------------------------- |
| ComponentType | [`MessageSystem`](https://getstream.io/chat/docs/sdk/react-native/v6/ui-components/message-system/) |
### MessageText
Component to render text of message. By default, we use [Simple Markdown](https://github.com/Khan/simple-markdown#adding-a-simple-extension) package to render the text content of message.
If you decide to use this prop, please be aware that you will need to handle the markdown rendering yourself.
| Type | Default |
| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
| ComponentType | [renderText](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Message/MessageSimple/utils/renderText.tsx) |
### MessageReactionPicker
Reaction selector component displayed within the message menu when user long presses a message.
| Type | Default |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ComponentType | [`MessageReactionPicker`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/components/MessageMenu/MessageReactionPicker.tsx) \| `undefined` |
### MessageUserReactionsAvatar
Component for rendering an avatar in the message user reactions in the message menu.
| Type | Default |
| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ComponentType | [`MessageUserReactionsAvatar`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/components/MessageMenu/MessageUserReactionsAvatar.tsx) \| `undefined` |
### MessageUserReactionsItem
Component prop to customize the individual user reaction item in the `MessageUserReactions` component of `MessageMenu`. This includes the avatar, reaction type, and the name of the person who has reacted, etc.
| Type | Default |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ComponentType | [`MessageUserReactionsItem`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/components/MessageMenu/MessageUserReactionsItem.tsx) \| `undefined` |
### MessageUserReactions
List of reactions component within the message menu.
| Type | Default |
| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ComponentType | [`MessageUserReactions`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/components/MessageMenu/MessageUserReactions.tsx) \| `undefined` |
### MessageUserReactionsAvatar
Component for rendering an avatar in the message user reactions in the message menu.
| Type | Default |
| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ComponentType | [`MessageUserReactionsAvatar`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/components/MessageMenu/MessageUserReactionsAvatar.tsx) \| `undefined` |
### MessageUserReactionsItem
Component prop to customize the individual user reaction item in the `MessageUserReactions` component of `MessageMenu`. This includes the avatar, reaction type, and the name of the person who has reacted, etc.
| Type | Default |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ComponentType | [`MessageUserReactionsItem`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/components/MessageMenu/MessageUserReactionsItem.tsx) \| `undefined` |
### MessageUserReactions
List of reactions component within the message menu.
| Type | Default |
| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ComponentType | [`MessageUserReactions`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/components/MessageMenu/MessageUserReactions.tsx) \| `undefined` |
### ReactionListBottom
Component to render list of reactions at the bottom of the message bubble.
| Type | Default |
| ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ComponentType | [`ReactionListBottom`](https://github.com/GetStream/stream-chat-react-native/tree/develop/package/src/components/Message/MessageSimple/ReactionList/ReactionListBottom.tsx) |
### ReactionListTop
Component to render list of reactions at top of the message bubble.
| Type | Default |
| ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ComponentType | [`ReactionListTop`](https://github.com/GetStream/stream-chat-react-native/tree/develop/package/src/components/Message/MessageSimple/ReactionList/ReactionListTop.tsx) |
### ScrollToBottomButton
Component to render a button which when pressed, scrolls the message list to bottom.
| Type | Default |
| ------------- | ----------------------------------------------------------------------------------------------- |
| ComponentType | [`ScrollToBottomButton`](https://getstream.io/chat/docs/sdk/react-native/v6/ui-components/scroll-to-bottom-button/) |
### TypingIndicator
Component to render typing indicator within enclosed MessageList component.
| Type | Default |
| ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
| ComponentType | [`TypingIndicator`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/components/MessageList/TypingIndicator.tsx) |
### TypingIndicatorContainer
Component to render container in which typing indicator gets rendered within enclosed MessageList component.
| Type | Default |
| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ComponentType | [TypingIndicatorContainer](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageList/TypingIndicatorContainer.tsx) |
### UrlPreview
Component to render preview of URLs in `MessageList`.
| Type | Default |
| ------------- | ------------------------------------------------------------ |
| ComponentType | [`Card`](https://getstream.io/chat/docs/sdk/react-native/v6/ui-components/card/) |
### VideoThumbnail
Component to render the video thumbnail for video attachments in MessageList.
| Type | Default |
| ------------- | --------------------------------------------------------------------------------- |
| ComponentType | [`VideoThumbnail`](https://getstream.io/chat/docs/sdk/react-native/v6/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/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/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/blob/main/package/src/components/Poll/Poll.tsx) |
---
This page was last updated at 2026-08-13T00:26:16.364Z.
For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react-native/v6/contexts/messages-context/](https://getstream.io/chat/docs/sdk/react-native/v6/contexts/messages-context/).