Message UI

The message view is the component that draws one message. Message renders the MessageItemView override with no props, and the view reads the message and its handlers from MessageContext. The default is MessageItemView, which lays out the avatar, the headers, the bubble, the reactions, the replies button and the footer, and renders the bubble's content with MessageContent. A message explains how the parts fit together.

Best practices

• Replace one part through its override key, and keep the rest of the default view. The keys are in Override paths.
• Add to the bubble with the content slots before you replace MessageContent or MessageItemView. They render inside the bubble and need no props.
• A message view of your own handles the kinds of message your app has. The default covers deleted, failed and error messages, Giphy previews, polls, quoted messages and AI-generated text. Blocked messages render MessageBlocked, and system messages MessageSystem, instead of the view.
• Keep the long press menu in a view of your own: call onLongPress from the context, and attach contextMenuAnchorRef to the bubble.
• Declare the overrides object once, outside the component that renders WithComponents.

Basic usage

MessageItemView also takes its context values as props, and a prop wins over the context. A wrapper registered as the override changes one value for every message. This one turns off swipe to reply on the messages of bots:

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

const MessageItemViewWithoutBotSwipe = () => {
  const { message } = useMessageContext();

  return (
    <MessageItemView
      enableSwipeToReply={!message.user?.id?.startsWith("bot-")}
    />
  );
};

const overrides = { MessageItemView: MessageItemViewWithoutBotSwipe };

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

UI customization

A message view of your own composes the exported parts it needs. They read the same context, so most need no props. This one keeps the avatar, the bubble with its content, the reactions and the footer, and drops the headers, the replies button and swipe to reply:

import { StyleSheet, View } from "react-native";
import { convertTimestampToDate } from "stream-chat";
import {
  MessageAuthor,
  MessageContent,
  MessageDeleted,
  MessageFooter,
  ReactionListBottom,
  useMessageContext,
  useTheme,
  WithComponents,
} from "stream-chat-react-native";

const PlainMessageItemView = () => {
  const { alignment, contextMenuAnchorRef, groupStyles, isMyMessage, message } =
    useMessageContext();
  const {
    theme: { semantics },
  } = useTheme();
  const date = convertTimestampToDate(message.created_at);

  if (message.type === "deleted") {
    return (
      <MessageDeleted
        date={date}
        groupStyle={`${alignment}_${groupStyles[0] ?? ""}`}
      />
    );
  }

  return (
    <View style={[styles.row, alignment === "right" && styles.rowReversed]}>
      {alignment === "left" ? <MessageAuthor /> : null}
      <View style={alignment === "right" ? styles.right : styles.left}>
        <View ref={contextMenuAnchorRef}>
          <MessageContent
            backgroundColor={
              isMyMessage ? semantics.chatBgOutgoing : semantics.chatBgIncoming
            }
          />
        </View>
        <ReactionListBottom type="clustered" />
        <MessageFooter date={date} />
      </View>
    </View>
  );
};

const overrides = { MessageItemView: PlainMessageItemView };

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

const styles = StyleSheet.create({
  left: { alignItems: "flex-start" },
  right: { alignItems: "flex-end" },
  row: { alignItems: "flex-end", flexDirection: "row", gap: 8 },
  rowReversed: { flexDirection: "row-reverse" },
});

MessageContent handles the presses, so the long press menu keeps working. The parts and their props are on Message UI components, and A custom MessageItemView shows another one.

Override paths

The default view renders these keys. Set them with WithComponents.

FileAttachmentGroup renders each file through the Attachment key, and Attachment picks AudioAttachment, FileAttachment, Gallery, Giphy, UrlPreview, URLPreviewCompact or UnsupportedAttachment. The attachments are on Attachments, and the reactions on Reaction components. A poll renders Poll, which takes the PollContent key; see Poll components.

MessageItemView props

The SDK renders the view with no props. The default MessageItemView reads each of these from a context, and a prop wins over it.

MessageContent props

MessageContent renders the bubble: a Pressable that reports presses with the messageContent emitter, the bubble's background and corners, the content slots, and the parts in messageContentOrder. A quoted message renders Reply, and pressing it calls goToMessage. The text of an AI-generated message renders StreamingMessageView in place of the text. A location renders the MessageLocation key, which has no default.

Content slots

These override keys have no default. Each renders inside the bubble when set, and receives no props: read what you need from useMessageContext().

MessageSpacer renders last in the message row, beside the content and outside the bubble, and receives no props either. MessageSwipeContent takes no props: it's the round reply icon that appears beside the message while the user swipes it.

Related hooks

• useMessageContext() reads the message and its handlers.
• useMessagesContext() reads the settings of Channel or Thread, such as reactionListPosition.
• useComponentsContext() reads the override keys, for a part that renders another part.
• useTheme() reads the theme. The view's styles are under theme.messageItemView.