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.
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 { isMyMessage, message, files } = useContext(MessageContext);

Alternatively, use the useMessageContext hook.

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

const { 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'

canModifyMessage

True if one of the following is true:

message is sent by the current user (connected to chat)
current user has admin role
current user has moderator role

Type
boolean

files

Array of file attachments shown in the grouped UI component.

const files = message.attachments.filter((a) => a.type === "file");

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) => Promise`

handleToggleReaction

Callback function for toggling reaction from reaction selector.

Type
`(reactionType: string) => void`

hasReactions

True if the message has at least one reaction.

Type
boolean

images

Array of image attachments on the message.

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

Type
Array

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

lastReceivedId

Most recent message ID in the list.

Type
string

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

showMessageOverlay

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

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

`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

Video Thumbnail

MessageInput