Skip to content

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 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 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'.
<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?.();
      }}
    >