# MessageContext
> **Info:** This is release candidate documentation for **Stream Chat React Native SDK v10**. For the latest stable version, see the [latest version (v9)](https://getstream.io/chat/docs/sdk/react-native/).
`MessageContext` holds one message and what [`Message`](https://getstream.io/chat/docs/sdk/react-native/v10/component-reference/message/message/) worked out for it: its attachments sorted by kind, its alignment and grouping, its reactions, and the handlers that act on it. The message view and its parts (`MessageContent`, `MessageFooter`, `MessageReplies`, the attachments and the reaction lists) read it. [A message](https://getstream.io/chat/docs/sdk/react-native/v10/ui/components/message-list-ui/#a-message) explains how they fit together.
## Best practices
- Read the context with `useMessageContext()` in a custom message view or part. The SDK renders the message view with no props.
- Use the handlers instead of calling the client yourself. They update the message in the list, and inside a thread they act on the thread.
- Attach `contextMenuAnchorRef` to the view the message menu should line up with, usually the bubble, when you build a message view of your own.
- Outside a `Message`, `useMessageContext()` doesn't throw: it returns an empty object, typed as the full value. Check `message` before you use it in a component that can render elsewhere.
## Basic usage
This component adds a button that opens the message menu to every message that can be acted on, for users who don't long press:
```tsx title="src/MessageMenuButton.tsx"
import { Pressable } from "react-native";
import {
useComponentsContext,
useMessageContext,
WithComponents,
} from "stream-chat-react-native";
const MessageMenuButton = () => {
const { actionsEnabled, showMessageOverlay } = useMessageContext();
const { icons } = useComponentsContext();
if (!actionsEnabled) {
return null;
}
return (
);
};
const overrides = { MessageContentTrailingView: MessageMenuButton };
export const MessagesWithMenuButton = ({
children,
}: {
children: React.ReactNode;
}) => {children};
```
`MessageContentTrailingView` renders inside the bubble, after the content. The content slots are on [Message UI](https://getstream.io/chat/docs/sdk/react-native/v10/component-reference/message/message-ui/#content-slots).
## Values
`Message` fills every value. The ones it reads from its props are noted; [Message](https://getstream.io/chat/docs/sdk/react-native/v10/component-reference/message/message/#props) says where those come from.
| Value | Type | Description |
| ------------------------------------ | ---------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `actionsEnabled` | `boolean` | `true` for a regular message the server has accepted, the only kind the actions apply to. |
| `alignment` | `Alignment` | `'left'` or `'right'`: the user's own messages are on the right, unless `forceAlignMessages` says otherwise. |
| `channel` | `Channel` | The message's channel. |
| `contextMenuAnchorRef` | `React.RefObject` | Attach it to the view the message menu lines up with. The default view attaches it to the bubble. Without it, the menu lines up with the whole message. |
| `dismissOverlay` | `() => void` | Closes the message menu. |
| `files` | `Attachment[]` | The attachments the `files` part renders: files, audio and voice recordings, videos when no video player is installed, and images with a link preview. |
| `goToMessage` | `(messageId: string) => void` | Jumps to a message. `undefined` when the list didn't pass one. |
| `groupStyles` | `string[]` | The message's place in its group: `['top']`, `['middle']`, `['bottom']`, `['single']`, or `[]` without grouping. |
| `handleAction` | `ActionHandler` | `(name, value) => void`. Sends an attachment action, such as the Send, Shuffle and Cancel buttons of a Giphy preview, and updates the message with the result, or removes it when the response has no message. |
| `handleReaction` | `(reactionType: string) => Promise` | Picks a reaction: calls `handleReaction` of `Channel` or `Thread`, then toggles the reaction. With `selectReaction` set, it's the function `selectReaction` returns. `undefined` on a failed or error message. |
| `handleToggleReaction` | `(reactionType: string) => Promise` | Adds the reaction, or removes it when the user already gave it, without calling the `Channel` handler. |
| `hasAttachmentActions` | `boolean` | Whether an attachment of the message has actions, such as a Giphy preview. Such a message has no long press menu and hides its quoted message. |
| `hasInteractiveAccessibilityContent` | `boolean` | Whether the message has parts a screen reader should reach one by one, such as poll options, attachments or a quoted message. The row then drops its single focus stop. |
| `hasReactions` | `boolean` | Whether the message has reactions of a type in `supportedReactions`. |
| `images` | `Attachment[]` | The image attachments that aren't link previews and have an image URL. |
| `isMyMessage` | `boolean` | Whether the current user sent the message. |
| `isVeryLastMessage` | `boolean` | Whether the message is the newest in its list. From the `isVeryLastMessage` prop. |
| `lastGroupMessage` | `boolean` | Whether the message is the last of its group, `bottom` or `single`. The avatar and the footer show only there. |
| `message` | `LocalMessage` | The message. While the message menu is open, the version it had when the menu opened. |
| `messageActionHandlers` | `MessageActionHandlerCallbacks` | The handlers behind the message's actions: copy, delete, edit, flag, mark unread, mute, pin, quote, resend, ban, block and react. Built once per message and shared with the action menu. `useMessageActionHandlers()` returns the same object. |
| `messageContentOrder` | `MessageContentType[]` | The parts of the bubble this message has, in the order of `messageContentOrder` from `MessagesContext`. |
| `messageHasOnlySingleAttachment` | `boolean` | Whether the message has no text, no quoted message and exactly one attachment. |
| `messageOverlayId` | `string` | The ID of this rendering of the message in the overlay state. |
| `myMessageTheme` | `DeepPartial` | The `myMessageTheme` of `MessagesContext`. |
| `onLongPress` | `(payload: PressableHandlerPayload) => void` | Call it from a long press on a part of the message, with the `emitter` and the `event`. It calls `onLongPressMessage`, or opens the message menu. |
| `onlyEmojis` | `boolean` | Whether the text is only emojis and the message has no files, images or other attachments. The default view then drops the bubble's background and renders the text with the `onlyEmojiMarkdown` style. |
| `onOpenThread` | `() => void` | Calls `onThreadSelect` with the message's `Thread`. Does nothing without `onThreadSelect`. |
| `onPress` | `(payload: MessagePressableHandlerPayload) => void` | Call it from a press on a part of the message, with the `emitter`, the `event` and a `defaultHandler`. On a failed message it opens the message menu, or the bounce dialog. Otherwise it calls `onPressMessage`, or the `defaultHandler`. |
| `onPressIn` | `((payload: PressableHandlerPayload) => void) \| null` | Calls `onPressInMessage`. `null` when `onPressInMessage` isn't set. |
| `onThreadSelect` | `(thread: Thread) => void` | The list's `onThreadSelect`. From the `onThreadSelect` prop. |
| `otherAttachments` | `Attachment[]` | The attachments the `attachments` part renders: Giphy, link previews and custom types, kept only while no file, image or video comes before them. A file, a video, or an image that has a preview URL empties it. |
| `preventPress` | `boolean` | Whether presses on the message's parts are turned off. `true` while the message menu is open. |
| `reactions` | `ReactionSummary[]` | One entry for each reaction type in `supportedReactions`, with its `count`, `own` and `Icon`, oldest type first. |
| `registerMessageOverlayTarget` | `(params: { id: string; view: ViewRef \| null; }) => void` | Registers a view the message menu can measure and lift into the overlay. `MessageOverlayWrapper` calls it. |
| `setQuotedMessage` | `(quotedMessage: LocalMessage \| null) => void` | Quotes a message in the composer. |
| `showAvatar` | `boolean` | From the `showAvatar` prop. Without it, the avatar shows on the last message of a group. |
| `showMessageOverlay` | `() => void` | Opens the message menu. |
| `showMessageStatus` | `boolean` | Whether the footer shows the delivery status. `true` for the user's own messages unless the `showMessageStatus` prop says otherwise. |
| `showReactionsOverlay` | `(selectedReaction?: string) => void` | Opens the reactions sheet, with the given reaction type selected. |
| `unregisterMessageOverlayTarget` | `(id: string) => void` | Removes a view registered with `registerMessageOverlayTarget`. |
| `videos` | `Attachment[]` | The video attachments that aren't link previews, when a video player is installed. Each has `image_url` set to its playable URL. |
## Related hooks
- `useMessageContext()` returns the value. Outside a `Message` it returns an empty object.
- `useMessageActionHandlers()` returns `messageActionHandlers`.
- [Message hooks](https://getstream.io/chat/docs/sdk/react-native/v10/reference/hooks/message-hooks/) has the hooks the values are built from, such as `useMessageOperations()` and `useIsMessageReadByOthers()`.
---
For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react-native/v10/component-reference/message/messagecontext/](https://getstream.io/chat/docs/sdk/react-native/v10/component-reference/message/messagecontext/).