This is beta documentation for Stream Chat React Native SDK v9. For the latest stable version, see the latest version (v8) .

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();

Value

`actionsEnabled`

Set to true when:

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

Type
boolean

`alignment`

Sets whether the message aligns left or right in the list.

Type	Default
enum('right', 'left')	'right'

`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.

Type
React ref

`dismissOverlay`

Dismisses any open message overlay.

Type
`() => void`

`files`

The files attached to a message.

Type
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).

Type
array of enum('top', 'bottom', 'middle', 'single')

`handleAction`

Sends an attachment action on a message (for example, Giphy Shuffle/Cancel/Send).

Type
`(name: string, value: string) => void`

`handleToggleReaction`

Callback function for toggling reaction from reaction selector.

Type
`(reactionType: string) => Promise<void>`

`hasReactions`

True if the message has at least one reaction.

Type
boolean

`messageHasOnlySingleAttachment`

Whether or not message has only a single attachment.

Type
boolean

`images`

Array of image attachments on the message.

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

Type
Array

`isMessageAIGenerated`

Factory function that determines whether a message is AI-generated.

Type
function

`isMyMessage`

True if the message was sent by the current user.

Type
boolean

`lastGroupMessage`

Whether or not this is the last message in a group of messages.

Type
boolean

`message`

Message object.

Type
`Message` type

`messageContentOrder`

Order of message content.

Example: ['quoted_reply', 'attachments', 'file', 'gallery', 'text']

Type
array

`onLongPress`

Default long press handler for message UI.

Type
function

`onlyEmojis`

True if the message text contains only emojis.

Type
Boolean

`onOpenThread`

Handler function for "Thread Reply" action.

Type
function

`onPress`

Default press handler for message UI.

Type
function

`onPressIn`

Default pressIn handler for message UI.

Type
function

`otherAttachments`

All attachments except file and image.

Type
Array

`reactions`

Reactions added to the message.

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

Type
array

`readBy`

Read count/state of the message.

Type
`number \| boolean`

`deliveredToCount`

Delivery count of the message.

Type
number

`showMessageOverlay`

Opens the message action overlay (called on long press).

Type
`(showMessageReactions?: boolean) => void`

`showReactionsOverlay`

Opens the reactions overlay.

Type
`(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.

Type
`boolean`

`goToMessage`

Scrolls to a specific message ID.

Type
`(messageId: string) => void` \| `undefined`

`handleReaction`

Handles adding/removing a reaction.

Type
`(reactionType: string) => Promise<void>` \| `undefined`

`myMessageTheme`

Theme override for messages sent by the current user.

Theme applied to the current user’s messages.

Type
object

Memoize this object or pass a stable reference.

`preventPress`

Prevent message being pressed (for example in image viewer contexts).

Type
`boolean`

`showAvatar`

Whether avatar should be shown next to the message.

Type
`boolean`

`onThreadSelect`

Thread selection callback.

Type
function

`setQuotedMessage`

Set quoted-reply state for a message.

Type
`(message) => void`

`threadList`

True if the current message is part of a thread.

Type
Boolean

`videos`

Array of video attachments.

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

Type
array

`channel`

Current channel instance.

Type
Channel

`members`

Channel members map for the active channel.

Members of current channel. This value is received from backend when you query a channel, either using client.queryChannels() or channel.watch() API call.

client.queryChannels() or channel.watch() returns only up to 100 members of channel. So if you expect total number of members to be > 100, its better to use client.queryMembers() API endpoint separately to get the list of members.

Record<
  string, // userId
  {
    banned?: boolean;
    created_at?: string;
    invite_accepted_at?: string;
    invite_rejected_at?: string;
    invited?: boolean;
    is_moderator?: boolean;
    role?: string;
    shadow_banned?: boolean;
    updated_at?: string;
    user?: UserResponse<UserType>;
    user_id?: string;
  }
>;

Type
object

ReactionListTop

MessageComposer