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/updateMessageonly for local UI state, not server-side mutations. - Keep
messageActionsandsupportedReactionsstable (memoized) for performance.
Values
| Value | Description | Type |
|---|---|---|
additionalPressableProps |
Extra props passed to the underlying Pressable used in message components like MessageContent. |
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. 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. Accepts a message parameter. |
function |
handleCopy |
Called when the Copy Message action is triggered. It does not override default behavior. See 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. 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. Accepts a message parameter. |
function |
handleEdit |
Called when the Edit Message action is triggered. It does not override default behavior. See 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. 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. 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. 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. Accepts message and reactionType parameters. |
function |
handleRetry |
Called when the Retry action is triggered. It does not override default behavior. See 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. 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. | 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. Defaults to messageActions. |
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 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. 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. |
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. Defaults to reactionData. | 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 for use in CreatePoll. |
function |
hasCreatePoll |
Controls whether the poll creation button is visible. | boolean |
FlatList |
FlatList component used by MessageList. Defaults to flat-list-mvcp. |
ComponentType |
giphyVersion |
Giphy image version to render. See the Image Object keys for options. Defaults to 'fixed_height'. |
string |
Examples
onPressMessage
For emitter === 'textMention', additionalInfo carries:
mentionedEntity- the matchedMentionEntity(fromstream-chat). Switch onmentionedEntity.mentionTypeto handle each of the five mention variants (user,channel,here,role,user_group).user- kept for backwards compatibility. Populated only whenmentionType === 'user'.
<Channel
onPressMessage={({ additionalInfo, defaultHandler, emitter }) => {
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?.();
}}
>