# 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. ## Values | Value | Description | Type | | ----------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- | | `additionalPressableProps` | Extra props passed to the underlying [Pressable](https://reactnative.dev/docs/pressable#props) used in message components like [`MessageContent`](https://getstream.io/chat/docs/sdk/react-native/ui-components/message-content/). | `object` | | `customMessageSwipeAction` | Custom handler invoked when a message row swipe action is triggered. Use it to override the default swipe-to-reply behavior. | `function` | | `deleteMessage` | Delete a message using the channel state updater. | `function` | | `deleteReaction` | Delete a reaction from a message. | `function` | | `disableTypingIndicator` | Disable the typing indicator in `MessageList`. Defaults to `false`. | `boolean` | | `dismissKeyboardOnMessageTouch` | Dismiss the keyboard when the user touches a message in the list. Defaults to `true`. | `boolean` | | `enableMessageGroupingByUser` | If false, consecutive messages from the same user won't be grouped. Available in SDK version >= [v3.9.0](https://github.com/GetStream/stream-chat-react-native/releases). Defaults to `true`. | `boolean` | | `urlPreviewType` | The type of URL preview to render. Defaults to `'full'`. | `'compact' \| 'full'` | | `enableSwipeToReply` | If true, users can swipe the full `MessageItemView` row to reply to a message. Defaults to `true`. | `boolean` | | `forceAlignMessages` | Forces all messages to align left or right. By default, received messages are left and sent messages are right. Defaults to `false`. | `'left' \| 'right' \| false` | | `getMessageGroupStyle` | Override how message groups are styled and grouped in `MessageList`. | `function` | | `handleBan` | Called when the _Ban User_ action is triggered. It does not override default behavior. See [customize message actions](https://getstream.io/chat/docs/sdk/react-native/guides/customize-message-actions/). Accepts a `message` parameter. | `function` | | `handleCopy` | Called when the _Copy Message_ action is triggered. It does not override default behavior. See [customize message actions](https://getstream.io/chat/docs/sdk/react-native/guides/customize-message-actions/). Accepts a `message` parameter. | `function` | | `handleDelete` | Called when the _Delete Message_ action is triggered. It does not override default behavior. See [customize message actions](https://getstream.io/chat/docs/sdk/react-native/guides/customize-message-actions/). Accepts a `message` parameter. | `function` | | `handleDeleteForMe` | Called when the _Delete Message for me_ action is triggered. It does not override default behavior. See [customize message actions](https://getstream.io/chat/docs/sdk/react-native/guides/customize-message-actions/). Accepts a `message` parameter. | `function` | | `handleEdit` | Called when the _Edit Message_ action is triggered. It does not override default behavior. See [customize message actions](https://getstream.io/chat/docs/sdk/react-native/guides/customize-message-actions/). Accepts a `message` parameter. | `function` | | `handleFlag` | Called when the _Flag Message_ action is triggered. It does not override default behavior. See [customize message actions](https://getstream.io/chat/docs/sdk/react-native/guides/customize-message-actions/). Accepts a `message` parameter. | `function` | | `handleMute` | Called when the _Mute User_ action is triggered from the message actions list. It does not override default behavior. See [customize message actions](https://getstream.io/chat/docs/sdk/react-native/guides/customize-message-actions/). Accepts a `message` parameter. | `function` | | `handleMarkUnread` | Called when the _Mark Unread_ action is triggered. | `function` | | `handlePinMessage` | Called when the _Pin/Unpin Message_ action is triggered. | `function \| null` | | `handleQuotedReply` | Called when the _Reply_ action is triggered. It does not override default behavior. See [customize message actions](https://getstream.io/chat/docs/sdk/react-native/guides/customize-message-actions/). Accepts a `message` parameter. | `function` | | `handleReaction` | Called when a reaction is selected in the message menu (add or remove). It does not override default behavior. See [customize message actions](https://getstream.io/chat/docs/sdk/react-native/guides/customize-message-actions/). Accepts `message` and `reactionType` parameters. | `function` | | `handleRetry` | Called when the _Retry_ action is triggered. It does not override default behavior. See [customize message actions](https://getstream.io/chat/docs/sdk/react-native/guides/customize-message-actions/). Accepts a `message` parameter. | `function` | | `handleThreadReply` | Called when the _Thread Reply_ action is triggered. It does not override default behavior. See [customize message actions](https://getstream.io/chat/docs/sdk/react-native/guides/customize-message-actions/). Accepts a `message` parameter. | `function` | | `handleBlockUser` | Called when the _Block User_ action is triggered. | `function` | | `isMessageAIGenerated` | Returns whether a message should be treated as AI-generated for message rendering. | `function` | | `initialScrollToFirstUnreadMessage` | Load the channel starting at the first unread message. Defaults to `false`. | `boolean` | | `isAttachmentEqual` | Returns true if rendering `nextAttachment` would produce the same result as `prevAttachment`, otherwise false. Accepts `prevAttachment` and `nextAttachment` parameters. | `function` | | `markdownRules` | Rules for [simple-markdown](https://github.com/Khan/simple-markdown#adding-a-simple-extension). | `object` | | `messageActions` | An array of actions, or a function returning an array, shown in the message menu. Accepts an `actionInfo` parameter containing the original actions and relevant message data. See [customize message actions](https://getstream.io/chat/docs/sdk/react-native/guides/customize-message-actions/). Defaults to [messageActions](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Message/utils/messageActions.ts). | `array \| function` | | `messageContentOrder` | Order for rendering message content. Defaults to `['quoted_reply', 'gallery', 'files', 'poll', 'ai_text', 'attachments', 'location', 'text']`. | `array` | | `quotedMessage` | Quoted message used by reply-related UI in the message list. | `LocalMessage \| null` | | `myMessageTheme` | [Theme](https://getstream.io/chat/docs/sdk/react-native/customization/theming/) applied to the current user's messages. Memoize this object or pass a stable reference. | `object` | | `messageSwipeToReplyHitSlop` | Defines the `hitSlop` area for the full-row swipe-to-reply gesture. Defaults to `{left: screenWidth, right: screenWidth}`. | `object { top: number, left: number, bottom: number, right: number }` | | `messageTextNumberOfLines` | Number of lines for message text in the Message Overlay. Defaults to `5`. | `number` | | `onLongPressMessage` | Called when a user long-presses a message. The default opens the message menu. Accepts a `payload` parameter (`{ actionHandlers, message }`). | `function` | | `onPressInMessage` | Called on touch start, before [`onPressMessage`](#onpressmessage). Accepts a `payload` parameter (`{ actionHandlers, message }`). | `function` | | `onPressMessage` | Called when a user presses a message. The default handler behaves differently for reactions and attachments; handle those cases if you override it. Accepts a `payload` parameter (`{ additionalInfo, actionHandlers, message }`). `additionalInfo` provides extra data for certain emitters - for `textMention` it includes `mentionedEntity` (a `MentionEntity` from `stream-chat`, present for every mention type) and `user` (populated only when `mentionedEntity.mentionType === 'user'`, kept for back-compat). Note: `additionalInfo` may change as more emitter use cases are added. | `function` | | `reactionListPosition` | Position of the reaction list in the message component. Defaults to `'top'`. | `'top' \| 'bottom'` | | `removeMessage` | Remove a message from local state only (does not call `channel.deleteMessage`). | `(message) => void` | | `retrySendMessage` | Retry sending a failed message. | `(message) => void` | | `sendReaction` | Send a reaction for the target message. | `function` | | `selectReaction` | Full override of the message reaction handler. It must return a function that accepts `reactionType` (string). Accepts a `message` parameter. See [customize message actions](https://getstream.io/chat/docs/sdk/react-native/guides/customize-message-actions/). | `function \| null` | | `shouldShowUnreadUnderlay` | Enable/disable the unread underlay background in the message list. Defaults to `true`. | `boolean \| undefined` | | `supportedReactions` | List of reactions users can add to messages. See [customizing reactions](https://getstream.io/chat/docs/sdk/react-native/guides/message-customization/). Defaults to [reactionData](https://github.com/GetStream/stream-chat-react-native/blob/182f1047a1417da64047a12f9a6cfaf1252cfbd8/package/src/components/Channel/Channel.tsx#L129). | `array` | | `targetedMessage` | ID of the highlighted message. Defaults to `undefined` and resets after the highlight timeout. | `string` | | `updateMessage` | Upsert a message in local state. Does not call `channel.sendMessage` (used for optimistic updates). | `(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`](https://getstream.io/chat/docs/sdk/react-native/contexts/message-input-context/) for use in [`CreatePoll`](https://getstream.io/chat/docs/sdk/react-native/ui-components/create-poll/). | `function` | | `hasCreatePoll` | Controls whether the poll creation button is visible. | `boolean` | | `FlatList` | `FlatList` component used by `MessageList`. Defaults to [flat-list-mvcp](https://github.com/GetStream/flat-list-mvcp#maintainvisiblecontentposition-prop-support-for-android-react-native). | `ComponentType` | | `giphyVersion` | Giphy image version to render. See the [Image Object](https://developers.giphy.com/docs/api/schema#image-object) keys for options. Defaults to `'fixed_height'`. | `string` | ## Examples ### onPressMessage For `emitter === 'textMention'`, `additionalInfo` carries: - `mentionedEntity` - the matched `MentionEntity` (from `stream-chat`). Switch on `mentionedEntity.mentionType` to handle each of the five mention variants (`user`, `channel`, `here`, `role`, `user_group`). - `user` - kept for backwards compatibility. Populated only when `mentionType === 'user'`. ```tsx { if (emitter === 'textMention') { const { mentionedEntity, user } = additionalInfo ?? {}; switch (mentionedEntity?.mentionType) { case 'user': // `user` is also populated for back-compat. openUserProfile(user?.id ?? mentionedEntity.id); break; case 'channel': case 'here': // Broadcast mentions — usually no-op. break; case 'role': openRoleInfo(mentionedEntity.name); break; case 'user_group': openGroupInfo(mentionedEntity.id); break; } return; } if (emitter === 'urlPreview' || emitter === 'textLink') { console.log(additionalInfo?.url); return; } if (emitter === 'fileAttachment') { console.log(additionalInfo?.attachment); return; } defaultHandler?.(); }} > ``` --- For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react-native/contexts/messages-context/](https://getstream.io/chat/docs/sdk/react-native/contexts/messages-context/).