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 used in message components like MessageContent.

channelId

ID of the current channel.

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.

disableTypingIndicator

Disable the typing indicator in MessageList.

dismissKeyboardOnMessageTouch

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

enableMessageGroupingByUser

Note: Available in SDK version >= v3.9.0.

If false, consecutive messages from the same user won’t be grouped.

enableSwipeToReply

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

forceAlignMessages

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

formatDate

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

handleBan

Called when the Ban User action is triggered. It does not override default behavior. See customize message actions.

handleCopy

Called when the Copy Message action is triggered. It does not override default behavior. See customize message actions.

handleDelete

Called when the Delete Message action is triggered. It does not override default behavior. See customize message actions.

handleDeleteForMe

Called when the Delete Message for me action is triggered. It does not override default behavior. See customize message actions.

handleEdit

Called when the Edit Message action is triggered. It does not override default behavior. See customize message actions.

handleFlag

Called when the Flag Message action is triggered. It does not override default behavior. See customize message actions.

handleMute

Called when the Mute User action is triggered from the message actions list. It does not override default behavior. See customize message actions.

handleQuotedReply

Called when the Reply action is triggered. It does not override default behavior. See customize message actions.

handleReaction

Called when a reaction is selected in the message menu (add or remove). It does not override default behavior. See customize message actions.

handleRetry

Called when the Retry action is triggered. It does not override default behavior. See customize message actions.

handleThreadReply

Called when the Thread Reply action is triggered. It does not override default behavior. See customize message actions.

initialScrollToFirstUnreadMessage

Load the channel starting at the first unread message.

isAttachmentEqual

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

legacyImageViewerSwipeBehaviour

markdownRules

Rules for simple-markdown.

messageActions

An array of actions, or a function returning an array, shown in the message menu. See customize message actions.

messageContentOrder

Order for rendering message content.

myMessageTheme

Theme applied to the current user’s messages.

messageSwipeToReplyHitSlop

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

messageTextNumberOfLines

Number of lines for message text in the Message Overlay.

onLongPressMessage

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

onPressInMessage

Called on touch start, before onPressMessage.

onPressMessage

Called when a user presses a message.

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

For example:

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

reactionListPosition

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

removeMessage

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

Reply

Renders a preview of the parent message for quoted replies.

retrySendMessage

Retry sending a failed message.

selectReaction

Full override of the message reaction handler. It must return a function that accepts reactionType (string). See customize message actions.

setEditingState

Set editing state for a message.

setQuotedMessageState

Set quoted-reply state for a message.

shouldShowUnreadUnderlay

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

supportedReactions

List of reactions users can add to messages. See customizing reactions.

targetedMessage

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

updateMessage

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

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.

hasCreatePoll

Controls whether the poll creation button is visible.

Attachment

Renders attachments in MessageList.

Available props:

• attachment {object}

AttachmentActions

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

AudioAttachment

Renders the audio attachment.

Card

Renders custom attachment types. See Custom Attachment.

CardCover

Renders the main body of Card attachments. See Custom Attachment.

CardFooter

Renders the footer for Card attachments. See Custom Attachment.

CardHeader

Renders the header for Card attachments. See Custom Attachment.

DateHeader

Renders the sticky date header in MessageList.

FileAttachment

Renders file attachments in MessageList.

FileAttachmentGroup

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

FileAttachmentIcon

Renders the file icon for file attachments.

FlatList

FlatList component used by MessageList.

Gallery

Renders image attachments in MessageList.

Giphy

Renders Giphy attachments in MessageList.

giphyVersion

Giphy image version to render. See the Image Object keys for options.

InlineDateSeparator

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

InlineUnreadIndicator

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

MessageActionList

Renders the message action list in the message menu.

MessageActionListItem

Renders a message action item within the action list.

MessageAvatar

Renders the sender avatar in MessageList. Only shown for other users’ messages.

MessageBounce

Renders the bounce action handler for bounced messages in MessageList.

MessageContent

Renders message content (status, attachments, reactions, etc.) in MessageList.

MessageDeleted

Renders a deleted message.

MessageEditedTimestamp

Renders the “edited” label in MessageList. Only shown for other users’ messages.

MessageError

Customize the message error component.

MessageFooter

Renders the message footer in MessageList.

MessageHeader

Renders the header for a message in MessageList.

MessageMenu

Customize the message menu used for actions and reactions.

MessageReplies

Shows thread reply count and avatars of users who replied.

MessageRepliesAvatars

Renders avatars of users who replied in the thread.

MessageSimple

Renders a message in MessageList.

See Customizing Message UI.

MessageStatus

Renders message status (time and read receipts).

MessageSwipeContent

Renders content when the user swipes a message.

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
• A user accepts invite to join a channel
• Channel is updated

MessageText

Renders message text. By default, the SDK uses Simple Markdown. If you override this, you must handle markdown rendering yourself.

MessageReactionPicker

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

MessageUserReactionsAvatar

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

MessageUserReactionsItem

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

MessageUserReactions

Renders the reactions list in the message menu.

MessageUserReactionsAvatar

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

MessageUserReactionsItem

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

MessageUserReactions

Renders the reactions list in the message menu.

ReactionListBottom

Renders the reactions list below the message bubble.

ReactionListTop

Renders the reactions list above the message bubble.

ScrollToBottomButton

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

TypingIndicator

Renders the typing indicator in MessageList.

TypingIndicatorContainer

Renders the container for the typing indicator in MessageList.

UrlPreview

Renders URL previews in MessageList.

VideoThumbnail

Renders video thumbnails for video attachments in MessageList.

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.

Props

PollHeader

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

PollButtons

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