MessagesContext

MessagesContext holds the message settings and handlers of a Channel or a Thread: the reactions on offer, the message actions, what pressing a message does, how messages are laid out and grouped. Channel and Thread build it from their props of the same names, and every message and list below them reads it. Read it with useMessagesContext(). For the one message a component renders, use MessageContext instead.

Best practices

• Set these values as props on Channel or Thread, not by rendering a MessagesProvider of your own. Thread builds its own value from its own props, so set them on both when a setting should apply to threads too.
• Pass stable values. The context value is rebuilt only when the channel's ID changes, or when disableTypingIndicator, dismissKeyboardOnMessageTouch, messageContentOrder, messageOverlayTargetId, myMessageTheme, hasCreatePoll, the number of keys in additionalPressableProps or markdownRules, or the number of supportedReactions changes. A new function passed later for a handler such as onPressMessage takes effect only then, so read state that changes through a ref.
• Call useMessagesContext() inside a Channel or a Thread. It throws anywhere else.
• In a component that renders one message, read the message and its handlers from useMessageContext(), and this context only for the settings.

Basic usage

This component reads the reactions on offer from MessagesContext and the message's reaction handler from MessageContext, and shows the main reactions as buttons under each message's content:

import { Pressable, StyleSheet, View } from "react-native";
import {
  useMessageContext,
  useMessagesContext,
  WithComponents,
} from "stream-chat-react-native";

const QuickReactions = () => {
  const { supportedReactions } = useMessagesContext();
  const { handleReaction } = useMessageContext();

  if (!handleReaction) {
    return null;
  }

  return (
    <View style={styles.row}>
      {supportedReactions
        ?.filter((reaction) => reaction.isMain)
        .map(({ Icon, type }) => (
          <Pressable
            accessibilityLabel={type}
            key={type}
            onPress={() => handleReaction(type)}
          >
            <Icon size={16} />
          </Pressable>
        ))}
    </View>
  );
};

const overrides = { MessageContentBottomView: QuickReactions };

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

const styles = StyleSheet.create({
  row: { flexDirection: "row", gap: 8, padding: 4 },
});

handleReaction is undefined on a failed message, so the component renders nothing there.

Values

The defaults are what the SDK uses when the prop isn't passed. For customMessageSwipeAction, getMessageGroupStyle, messageActions, messageOverlayTargetId, messageSwipeToReplyHitSlop, onLongPressMessage and onPressMessage, the context value is then undefined, and the components that read it fall back to the default.

Related hooks

• useMessagesContext() returns the value. It throws outside a Channel or a Thread.
• useMessageContext() returns the value of the message a component renders. See MessageContext.
• Message hooks has the hooks the handlers are built from.