MessageContext

MessageContext holds one message and what 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 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:

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 (
    <Pressable
      accessibilityLabel="Message options"
      accessibilityRole="button"
      hitSlop={8}
      onPress={showMessageOverlay}
    >
      <icons.MenuPointHorizontal height={16} width={16} />
    </Pressable>
  );
};

const overrides = { MessageContentTrailingView: MessageMenuButton };

export const MessagesWithMenuButton = ({
  children,
}: {
  children: React.ReactNode;
}) => <WithComponents overrides={overrides}>{children}</WithComponents>;

MessageContentTrailingView renders inside the bubble, after the content. The content slots are on Message UI.

Values

Message fills every value. The ones it reads from its props are noted; Message says where those come from.

Related hooks

• useMessageContext() returns the value. Outside a Message it returns an empty object.
• useMessageActionHandlers() returns messageActionHandlers.
• Message hooks has the hooks the values are built from, such as useMessageOperations() and useIsMessageReadByOthers().