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>`
`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`
`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).	`(showMessageReactions?: boolean) => 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,
);

MessageContent

Overview

On this page:

Best Practices
Basic Usage
Values
Examples