- 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.
ID of the current channel.
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.
| Type | Default |
|---|
| enum('always', 'never', 'receiver', 'sender') | 'both' |
Disable the typing indicator in MessageList.
Dismiss the keyboard when the user touches a message in the list.
Note: Available in SDK version >= v3.9.0.
If false, consecutive messages from the same user won’t be grouped.
If true, users can swipe to reply to a message.
Forces all messages to align left or right. By default, received messages are left and sent messages are right.
| Type | Default |
|---|
| 'left' | 'right' | false | false |
Format function for dates in message status and deleted message components.
| Parameter | Description |
|---|
| date | date to format provided as a string, Date, or number (Unix Timestamp) |
Called when the Ban User action is triggered. It does not override default behavior. See customize message actions.
| Parameter | Description |
|---|
| message | message the action is called on |
Called when the Copy Message action is triggered. It does not override default behavior. See customize message actions.
| Parameter | Description |
|---|
| message | message the action is called on |
Called when the Delete Message action is triggered. It does not override default behavior. See customize message actions.
| Parameter | Description |
|---|
| message | message the action is called on |
Called when the Delete Message for me action is triggered. It does not override default behavior. See customize message actions.
| Parameter | Description |
|---|
| message | message the action is called on |
Called when the Edit Message action is triggered. It does not override default behavior. See customize message actions.
| Parameter | Description |
|---|
| message | message the action is called on |
Called when the Flag Message action is triggered. It does not override default behavior. See customize message actions.
| Parameter | Description |
|---|
| message | message the action is called on |
Called when the Mute User action is triggered from the message actions list. It does not override default behavior. See customize message actions.
| Parameter | Description |
|---|
| message | message the action is called on |
Called when the Reply action is triggered. It does not override default behavior. See customize message actions.
| Parameter | Description |
|---|
| message | message the action is called on |
Called when a reaction is selected in the message menu (add or remove). It does not override default behavior. See customize message actions.
| Parameter | Description |
|---|
message | Message the action is called on. |
reactionType | String designating the type of reaction. |
Called when the Retry action is triggered. It does not override default behavior. See customize message actions.
| Parameter | Description |
|---|
| message | message the action is called on |
Called when the Thread Reply action is triggered. It does not override default behavior. See customize message actions.
| Parameter | Description |
|---|
| message | message the action is called on |
Load the channel starting at the first unread message.
Returns true if rendering nextAttachment would produce the same result as prevAttachment, otherwise false.
| Parameter | Description |
|---|
| prevAttachment | previous message attachment to be compared |
| nextAttachment | next message attachment to be compared |
Rules for simple-markdown.
An array of actions, or a function returning an array, shown in the message menu. See customize message actions.
| Parameter | Description |
|---|
actionInfo | An object containing the original actions and relevant message data |
Order for rendering message content.
| Type | Default |
|---|
| array | ['quoted_reply', 'gallery', 'files', 'text', 'attachments'] |
Theme applied to the current user’s messages.
Memoize this object or pass a stable reference.
Defines the hitSlop area for the message swipe-to-reply gesture.
| Type | Default |
|---|
Object{ top: number, left: number, bottom: number, right: number } | {left: screenWidth, right: screenWidth} |
Number of lines for message text in the Message Overlay.
Called when a user long-presses a message. The default opens the message menu.
| Parameter | Description |
|---|
| payload | { actionHandlers, message } |
Called on touch start, before onPressMessage.
| Parameter | Description |
|---|
| payload | { actionHandlers, message } |
Called when a user presses a message.
The default handler behaves differently for reactions and attachments. Handle those cases if you override it.
| Parameter | Description |
|---|
| payload | { additionalInfo, actionHandlers, 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?.();
}}
>
additionalInfo may change as we add more emitter use cases.
Position of the reaction list in the message component. Default is above the message content.
| Type | Default value |
|---|
top | bottom | 'top' |
Remove a message from local state only (does not call channel.deleteMessage).
Renders a preview of the parent message for quoted replies.
| Type | Default |
|---|
| ComponentType | Reply |
Retry sending a failed message.
Full override of the message reaction handler. It must return a function that accepts reactionType (string). See customize message actions.
| Parameter | Description |
|---|
| message | message the action is called on |
Set editing state for a message.
Set quoted-reply state for a message.
Enable/disable the unread underlay background in the message list.
| Type | Default |
|---|
boolean|undefined | true |
ID of the highlighted message. Defaults to undefined and resets after the highlight timeout.
Upsert a message in local state. Does not call channel.sendMessage (used for optimistic updates).
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.
| Parameter | Description |
|---|
| payload | { sendMessage } |
Controls whether the poll creation button is visible.
Renders attachments in MessageList.
Available props:
Renders additional attachment actions (for example, Giphy send/shuffle/cancel).
Renders the audio attachment.
Renders custom attachment types. See Custom Attachment.
| Type | Default |
|---|
| ComponentType | Card |
Renders the main body of Card attachments. See Custom Attachment.
Renders the footer for Card attachments. See Custom Attachment.
Renders the header for Card attachments. See Custom Attachment.
Renders the sticky date header in MessageList.
Renders file attachments in MessageList.
Renders a group of file attachments when a message has multiple files.
Renders the file icon for file attachments.
FlatList component used by MessageList.
Renders image attachments in MessageList.
Renders Giphy attachments in MessageList.
| Type | Default |
|---|
| ComponentType | Giphy |
Giphy image version to render. See the Image Object keys for options.
| Type | Default |
|---|
| string | 'fixed_height' |
Renders inline date separators between messages more than a day apart.
Renders an inline separator in MessageList to mark the last read message.
Renders the message action list in the message menu.
Renders a message action item within the action list.
Renders the sender avatar in MessageList. Only shown for other users’ messages.
Renders the bounce action handler for bounced messages in MessageList.
Renders message content (status, attachments, reactions, etc.) in MessageList.
Renders a deleted message.
Renders the “edited” label in MessageList. Only shown for other users’ messages.
Customize the message error component.
Renders the message footer in MessageList.
Renders the header for a message in MessageList.
Customize the message menu used for actions and reactions.
Shows thread reply count and avatars of users who replied.
Renders avatars of users who replied in the thread.
Renders a message in MessageList.
See Customizing Message UI.
Renders message status (time and read receipts).
Renders content when the user swipes a message.
Renders system messages that inform users about channel changes. System messages are part of history and have type: "system".
System messages appear when:
Renders message text. By default, the SDK uses Simple Markdown. If you override this, you must handle markdown rendering yourself.
Reaction selector shown in the message menu on long-press.
Renders an avatar in message user reactions within the message menu.
Customize an individual user reaction item in MessageMenu’s MessageUserReactions (avatar, reaction type, user name, etc.).
Renders the reactions list in the message menu.
Renders an avatar in message user reactions within the message menu.
Customize an individual user reaction item in MessageMenu’s MessageUserReactions (avatar, reaction type, user name, etc.).
Renders the reactions list in the message menu.
Renders the reactions list below the message bubble.
Renders the reactions list above the message bubble.
Renders a button that scrolls the message list to the bottom.
Renders the typing indicator in MessageList.
Renders the container for the typing indicator in MessageList.
Renders URL previews in MessageList.
| Type | Default |
|---|
| ComponentType | Card |
Renders video thumbnails for video attachments in MessageList.
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.
React
iOS
Android
Flutter
Angular
JavaScript
Unity
Unreal
Node
Python
Ruby
PHP
Java
.NET
Go
REST