Skip to content
Info:
This is documentation for Stream Chat React Native SDK v7, which is no longer actively maintained. For up-to-date documentation, see the latest version (v9).

MessagesContext

Value

additionalPressableProps

Additional props provided to the underlying Pressable used by components within a message such as MessageContent.

Type
object

channelId

Id of current channel.

Type
string

deletedMessagesVisibilityType

Controls the visibility of the deleted messages within the channel.

  • always: The deleted messages in the channel will be visible to both the sender and receiver.
  • never: The deleted messages will not be visible to anyone.
  • sender: The deleted messages in the channel will only be visible to sender.
  • receiver: The deleted messages in the channel will only be visible to receiver.
Type Default
enum('always', 'never', 'receiver', 'sender') 'both'

disableTypingIndicator

Disable typing indicator in MessageList.

Type Default
boolean false

dismissKeyboardOnMessageTouch

Dismiss the keyboard when a user touches any of the messages in the list.

Type Default
boolean false

enableMessageGroupingByUser

Note: This prop is available only in SDK version >= v3.9.0

If false, consecutive messages from same user won't be grouped together.

Type Default
boolean true

enableSwipeToReply

If true, the user can swipe to reply to a message.

Type Default
Boolean true

forceAlignMessages

Forces alignment of messages in the list to either the left or right side of the screen. By default, received messages are aligned on the left side of the screen, and sent messages are aligned on the right.

Type Default
'left' | 'right' | false false

formatDate

Format function that returns a string to be used for the date in the message status and delete message component.

Type
function
Parameter Description
date date to format provided as a string, Date, or number (Unix Timestamp)

handleBan

Function called when the Ban User action is invoked from message actions list. This function does not override the default behavior of the Ban User action. Please refer to the guide on customizing message actions for details.

Type
function
Parameter Description
message message the action is called on

handleCopy

Function called when the Copy Message action is invoked from message actions list. This function does not override the default behavior of the Copy Message action. Please refer to the guide on customizing message actions for details.

Type
function
Parameter Description
message message the action is called on

handleDelete

Function called when the Delete Message action is invoked from message actions list. This function does not override the default behavior of the Delete Message action. Please refer to the guide on customizing message actions for details.

Type
function
Parameter Description
message message the action is called on

handleEdit

Function called when the Edit Message action is invoked from message actions list. This function does not override the default behavior of the Edit Message action. Please refer to the guide on customizing message actions for details.

Type
function
Parameter Description
message message the action is called on

handleFlag

Function called when the Flag Message action is invoked from message actions list. This function does not override the default behavior of the Flag Message action. Please refer to the guide on customizing message actions for details.

Type
function
Parameter Description
message message the action is called on

handleMute

Function called when the Mute User action is invoked from message actions list. This function does not override the default behavior of the Mute User action. Please refer to the guide on customizing message actions for details.

Type
function
Parameter Description
message message the action is called on

handleQuotedReply

Function called when the Reply action is invoked from message actions list. This function does not override the default behavior of the Reply action. Please refer to the guide on customizing message actions for details.

Type
function
Parameter Description
message message the action is called on

handleReaction

Function called when a reaction is selected in the message menu, this is called on both the add and remove action. This function does not override the default behavior of the reaction being selected. Please refer to the guide on customizing message actions for details.

Type
Function
Parameter Description
message Message the action is called on.
reactionType String designating the type of reaction.

handleRetry

Function called when the Retry action is invoked from message actions list. This function does not override the default behavior of the Retry action. Please refer to the guide on customizing message actions for details.

Type
function
Parameter Description
message message the action is called on

handleThreadReply

Function called when the Thread Reply action is invoked from message actions list. This function does not override the default behavior of the Thread Reply action. Please refer to the guide on customizing message actions for details.

Type
function
Parameter Description
message message the action is called on

initialScrollToFirstUnreadMessage

Load messages in a channel at the first unread message.

Type Default
boolean false

isAttachmentEqual

Function which returns true if passing nextAttachment to render would return the same result as passing prevAttachment to render, otherwise return false.

Type
function
Parameter Description
prevAttachment previous message attachment to be compared
nextAttachment next message attachment to be compared

legacyImageViewerSwipeBehaviour

markdownRules

Object specifying rules defined within simple-markdown.

Type
object

messageActions

An array of, or function that returns and array of, actions that can be performed on a message shown in the message menu. Please refer to the guide on customizing message actions for details.

Type Default
Array | Function messageActions
Parameter Description
actionInfo An object containing the original actions and relevant message data

messageContentOrder

Order in which to render the content of a message.

Type Default
array ['quoted_reply', 'gallery', 'files', 'text', 'attachments']

myMessageTheme

Theme applied to messages of the current user.

Type
object
Warning:

Please make sure to memoize or pass static reference for this object.

messageSwipeToReplyHitSlop

The hitSlop prop is used to define the area around the component where the user can interact with it.

This is for the message swipe to reply feature.

Type Default
Object{ top: number, left: number, bottom: number, right: number } {left: screenWidth, right: screenWidth}

messageTextNumberOfLines

Number of lines for the message text in the Message Overlay.

Type Default
number 5

onLongPressMessage

Function called when a user long presses a message. The default opens the message menu.

Type
function
Parameter Description
payload { actionHandlers, message }

onPressInMessage

Function called immediately when a touch is engaged on a message, before onPressMessage.

Type
function
Parameter Description
payload { actionHandlers, message }

onPressMessage

Function called when a user presses a message.

Warning:

The default handler for message press interactions acts differently when pressing on reactions and attachments. You will have to handle these cases when overriding this function.

Type
function
Parameter Description
payload { additionalInfo, actionHandlers, message }

The additionalInfo prop is handy for getting information from certain click events. A good example of this is getting the user details when a textMention (for example @Enigma-I-am) is clicked.

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

:::info

The additionalInfo prop will change over time as we explore more use-cases for different emitter's.

reactionListPosition

The position of the reaction list in the message component. By default, the reaction list is positioned on top the message content.

Type Default value
top | bottom 'top'

removeMessage

Function to remove message from local channel state. Please note that this function is only for updating the local state, it doesn't call the API for deleting message (channel.deleteMessage).

Type
(message) => void

Reply

Component to render preview of parent of message for quoted reply.

Type Default
ComponentType Reply

retrySendMessage

Function to re-attempt sending failed message.

Type
(message) => void

selectReaction

Full override of the reaction function on a message. This function must return a function that takes as a parameter the reactionType as a string. Please refer to the guide on customizing message actions for details.

Type
function | null
Parameter Description
message message the action is called on

setEditingState

Enables editing state for given message.

Type
(message) => void

setQuotedMessageState

Enables quoted-reply state on given message.

Type
(message) => void

shouldShowUnreadUnderlay

Boolean to enable/disable the message underlay background when there are unread messages in the Message List.

Type Default
boolean|undefined true

supportedReactions

List of reactions which can be added on message. Please refer to the guide on customizing reactions for details.

Type Default
Array reactionData

targetedMessage

Has the message id of the message which is to be highlighted. By default the value is undefined. As soon as the highlight time is out this is set to undefined.

Type
string

updateMessage

Upserts a given message in local channel state. Please note that this function doesn't call channel.sendMessage. Channel component uses this function for optimistic updates to message.

Type
(message) => void

openPollCreationDialog

Function called immediately when the poll creation button is clicked in the attachment picker. Can be used to override the default behaviour of the poll creation UI appearing as a Modal.

If overridden, a payload is passed containing the sendMessage callback from MessageInputContext is passed, so that CreatePoll

Type
function
Parameter Description
payload { sendMessage }

hasCreatePoll

A boolean value that is responsible for controlling whether the poll creation button is visible or not.

Type
boolean

Attachment

Component for rendering attachments in MessageList.

Available props:

  • attachment {object}
Type Default
ComponentType Attachment

AttachmentActions

Component to render additional actions on attachment. for example send, shuffle, cancel in case of Giphy.

Type Default
ComponentType AttachmentActions

AudioAttachment

Component for rendering the Audio Attachment

Type Default
ComponentType AudioAttachment

Card

Component to render any custom type of attachment. Please check the guides for Custom Attachment

Type Default
ComponentType Card

CardCover

Component to render main body for Card component which renders custom type of attachment. Please check the guides for Custom Attachment.

Type
ComponentType

CardFooter

Component to render footer for Card component which renders custom type of attachment. Please check the guides for Custom Attachment.

Type
ComponentType

CardHeader

Component to render header for Card component which renders custom type of attachment. Please check the guides for Custom Attachment.

Type
ComponentType

DateHeader

Component to render sticky date header within enclosed MessageList component.

Type Default
ComponentType DateHeader

FileAttachment

Component to render 'file' type attachment in MessageList.

Type Default
ComponentType FileAttachment

FileAttachmentGroup

Component to render group of file type attachments, when there are multiple file type attachments in message.

Type Default
ComponentType FileAttachmentGroup

FileAttachmentIcon

Component to render file icon for file type attachment.

Type Default
ComponentType FileIcon

FlatList

FlatList component for underlying MessageList component.

Type Default
ComponentType flat-list-mvcp

Component to render 'image' type attachments in the MessageList.

Type Default
ComponentType Gallery

Giphy

Component to render Giphy type attachments in MessageList.

Type Default
ComponentType Giphy

giphyVersion

The Giphy version to render - check the keys of the Image Object for possible values.

Type Default
string 'fixed_height'

InlineDateSeparator

Component to render inline date separators between messages which were created at a difference of more than a day.

Type Default
ComponentType InlineDateSeparator

InlineUnreadIndicator

Component to render inline separator in MessageList, to indicate the position of last read message in list.

Type Default
ComponentType InlineUnreadIndicator

MessageActionList

Component for rendering a message action list within the message menu.

Type Default
ComponentType MessageActionList | undefined

MessageActionListItem

Component for rendering message action list items within a message action list.

Type Default
ComponentType MessageActionListItem | undefined

MessageAvatar

Component to render avatar of sender for message, within MessageList. This component is only rendered for messages from other users.

Type Default
ComponentType MessageAvatar

MessageBounce

Component to render bounce action handler on click or long press of a Bounced message, within MessageList.

Type Default
ComponentType MessageBounce

MessageContent

Component to render content of message including status, attachments, reactions etc., within MessageList.

Type Default
ComponentType MessageContent

MessageDeleted

Component to render deleted message.

Type Default
ComponentType MessageDeleted

MessageEditedTimestamp

Component to render message edited label in message when the message is clicked, within MessageList. This component is only rendered for messages from other users.

Type Default
ComponentType MessageEditedTimestamp

MessageError

Component to customize the message error component.

Type Default
ComponentType MessageError

MessageFooter

Component to render footer for message, within MessageList.

Type Default
ComponentType MessageFooter

MessageHeader

Component to render header for message, within MessageList.

Type
ComponentType

MessageMenu

Component to customize the message contextual menu which allows users to perform actions on a message and react to messages.

Type Default
ComponentType MessageMenu | undefined

MessageReplies

Component to show number of thread replies and avatars of members who replied on message

Type Default
ComponentType MessageReplies

MessageRepliesAvatars

Component to show avatars of members who thread replied on message.

Type Default
ComponentType MessageRepliesAvatars

MessageSimple

Component to render a message within MessageList.

Please check guides section for Customizing Message UI for details.

Type Default
ComponentType MessageSimple

MessageStatus

Component to render status of message, which includes time and read-receipts.

Type Default
ComponentType MessageStatus

MessageSwipeContent

Component that renders when the user swipes on a message.

Type Default
ComponentType MessageSwipeContent | undefined

MessageSystem

Component to render system type messages. Purpose of system messages is to inform user about changes to channel. System messages are part of message history, and have a property type set as system. You can add system messages within message history in following scenarios:

Type Default
ComponentType MessageSystem

MessageText

Component to render text of message. By default, we use Simple Markdown package to render the text content of message. If you decide to use this prop, please be aware that you will need to handle the markdown rendering yourself.

Type Default
ComponentType renderText

MessageReactionPicker

Reaction selector component displayed within the message menu when user long presses a message.

Type Default
ComponentType MessageReactionPicker | undefined

MessageUserReactionsAvatar

Component for rendering an avatar in the message user reactions in the message menu.

Type Default
ComponentType MessageUserReactionsAvatar | undefined

MessageUserReactionsItem

Component prop to customize the individual user reaction item in the MessageUserReactions component of MessageMenu. This includes the avatar, reaction type, and the name of the person who has reacted, etc.

Type Default
ComponentType MessageUserReactionsItem | undefined

MessageUserReactions

List of reactions component within the message menu.

Type Default
ComponentType MessageUserReactions | undefined

MessageUserReactionsAvatar

Component for rendering an avatar in the message user reactions in the message menu.

Type Default
ComponentType MessageUserReactionsAvatar | undefined

MessageUserReactionsItem

Component prop to customize the individual user reaction item in the MessageUserReactions component of MessageMenu. This includes the avatar, reaction type, and the name of the person who has reacted, etc.

Type Default
ComponentType MessageUserReactionsItem | undefined

MessageUserReactions

List of reactions component within the message menu.

Type Default
ComponentType MessageUserReactions | undefined

ReactionListBottom

Component to render list of reactions at the bottom of the message bubble.

Type Default
ComponentType ReactionListBottom

ReactionListTop

Component to render list of reactions at top of the message bubble.

Type Default
ComponentType ReactionListTop

ScrollToBottomButton

Component to render a button which when pressed, scrolls the message list to bottom.

Type Default
ComponentType ScrollToBottomButton

TypingIndicator

Component to render typing indicator within enclosed MessageList component.

Type Default
ComponentType TypingIndicator

TypingIndicatorContainer

Component to render container in which typing indicator gets rendered within enclosed MessageList component.

Type Default
ComponentType TypingIndicatorContainer

UrlPreview

Component to render preview of URLs in MessageList.

Type Default
ComponentType Card

VideoThumbnail

Component to render the video thumbnail for video attachments in MessageList.

Type Default
ComponentType VideoThumbnail

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.

Type Default
ComponentType PollContent

Props

PollHeader

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

Type Default
ComponentType PollHeader
PollButtons

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

Type Default
ComponentType PollButtons