Skip to content

MessageContext

MessageContext is provided by Message. If you are not familiar with the React Context API, see the React docs.

Best Practices

  • Use useMessageContext for consistent access and typings.
  • Keep message-level logic local; avoid reaching into channel state here.
  • Use actionsEnabled and canModifyMessage to gate UI actions.
  • Attach contextMenuAnchorRef in custom MessageItemView layouts when you need to control the long-press overlay anchor.
  • Avoid heavy computations in message contexts to prevent list jank.
  • Treat attachment arrays as read-only and render them efficiently.

Basic Usage

Consume MessageContext in any child of Message:

import { useContext } from "react";
import { MessageContext } from "stream-chat-react-native";

const { contextMenuAnchorRef, isMyMessage, message, files } =
  useContext(MessageContext);

Alternatively, use the useMessageContext hook.

import { useMessageContext } from "stream-chat-react-native";

const { contextMenuAnchorRef, isMyMessage, message, files } =
  useMessageContext();

Values

Value Description Type
actionsEnabled Set to true when message.type === 'regular' && message.status === 'received'. boolean
alignment Sets whether the message aligns left or right in the list. Defaults to 'right'. enum('right', 'left')
contextMenuAnchorRef Ref for the subview that should anchor the long-press context menu overlay items. Attach it inside custom MessageItemView implementations when you want the overlay to align to the bubble view or another specific subview instead of the full row. react ref
dismissOverlay Dismisses any open message overlay. () => void
files The files attached to a message. array
groupStyles Position of the message within a group of consecutive messages from the same user. Use groupStyles to style messages based on position (for example, avatars show only on the last message). array of enum('top', 'bottom', 'middle', 'single')
handleAction Sends an attachment action on a message (for example, Giphy Shuffle/Cancel/Send). (name: string, value: string) => void
handleToggleReaction Callback function for toggling reaction from reaction selector. (reactionType: string) => Promise<void>
hasAttachmentActions Whether any message attachment exposes actions (for example, Giphy send/shuffle/cancel). boolean
hasInteractiveAccessibilityContent Whether the message renders interactive children (poll options, attachment cells, quoted-reply navigator, shared location) so the row drops its single accessibility focus stop. Resolved from AccessibilityContext. boolean
hasReactions True if the message has at least one reaction. boolean
messageHasOnlySingleAttachment Whether or not message has only a single attachment. boolean
images Array of image attachments on the message. array
isMessageAIGenerated Factory function that determines whether a message is AI-generated. function
isMyMessage True if the message was sent by the current user. boolean
lastGroupMessage Whether or not this is the last message in a group of messages. boolean
message Message object. Message type
messageContentOrder Order of message content. Example: ['quoted_reply', 'attachments', 'file', 'gallery', 'text']. array
messageOverlayId Stable UI-instance identifier for the rendered message. Used for overlay state so two rendered instances of the same message do not collide. string
registerMessageOverlayTarget Registers the subtree that should be measured and portaled into the message overlay. Custom message renderers typically interact with this via MessageOverlayWrapper. (params: { id: string; view: View | null }) => void
unregisterMessageOverlayTarget Unregisters a previously registered message-overlay target. (id: string) => void
onLongPress Default long press handler for message UI. function
onlyEmojis True if the message text contains only emojis. boolean
onOpenThread Handler function for "Thread Reply" action. function
onPress Default press handler for message UI. function
onPressIn Default pressIn handler for message UI. function
otherAttachments All attachments except file and image. array
reactions Reactions added to the message. array
readBy Read count/state of the message. number | boolean
deliveredToCount Delivery count of the message. number
showMessageOverlay Opens the message action overlay (called on long press). () => void
showReactionsOverlay Opens the reactions overlay. (selectedReaction?: string) => void
showMessageStatus When false, message status (read receipt, pending indicator) isn't rendered. Defaults to true for messages sent by the current user. boolean
goToMessage Scrolls to a specific message ID. (messageId: string) => void | undefined
handleReaction Handles adding/removing a reaction. (reactionType: string) => Promise<void> | undefined
myMessageTheme Theme applied to the current user's messages. Memoize this object or pass a stable reference. object
preventPress Prevent message being pressed (for example in image viewer contexts). boolean
showAvatar Whether avatar should be shown next to the message. boolean
onThreadSelect Thread selection callback. function
setQuotedMessage Set quoted-reply state for a message. (message) => void
threadList True if the current message is part of a thread. boolean
videos Array of video attachments. array
channel Current channel instance. channel
members Members of current channel. This value is received from backend when you query a channel, either using client.queryChannels() or channel.watch() API call. Note: client.queryChannels() or channel.watch() returns only up to 100 members of channel. If you expect total number of members to be > 100, use client.queryMembers() API endpoint separately. object

Examples

actionsEnabled

message.type === "regular" && message.status === "received";

images

const images = message.attachments.filter((a) => a.type === "image");

reactions

[
  {
    own: true,
    type: "love",
  },
  {
    own: false,
    type: "haha",
  },
];

videos

const videos = message.attachments.filter(
  (a) => a.type === "video" && !a.og_scrape_url,
);