Message UI components

The default MessageItemView is built from parts, and stream-chat-react-native exports them for a message view of your own. Each part reads the message from MessageContext, so most need no props inside a message. Each is an override key of the same name, except MessageTextContainer, whose text the MessageText key replaces.

Best practices

• Compose these parts instead of rebuilding them. They handle states that are easy to miss, such as a message that is still sending, a failed message, an edited one or a reply sent to the channel.
• Replace one part through its override key, and keep the rest of the default view.
• Wrap the exported part when you only add to it, as the sample below does, so its own behavior stays.
• Change the actions in the message menu through messageActions on Channel, not through these parts. See Message actions.

Basic usage

This replacement keeps the default status icon and adds "Read" once another member has read the message:

import { StyleSheet, Text } from "react-native";
import {
  MessageStatus,
  type MessageStatusProps,
  useIsMessageReadByOthers,
  useMessageContext,
  WithComponents,
} from "stream-chat-react-native";

const MessageStatusWithText = (props: MessageStatusProps) => {
  const { message } = useMessageContext();
  const read = useIsMessageReadByOthers({ message });

  return (
    <>
      <MessageStatus {...props} />
      {read ? <Text style={styles.read}>Read</Text> : null}
    </>
  );
};

const overrides = { MessageStatus: MessageStatusWithText };

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

const styles = StyleSheet.create({
  read: { fontSize: 12 },
});

Status indicators builds more of them.

Available components

MessageAuthor

Renders the sender's avatar on messages aligned left. Where the avatar doesn't show, it renders an empty view of the same size, so the bubbles of a group stay aligned. It re-renders only when lastGroupMessage or the sender's ID, name or image changes.

MessageHeader

Renders, above the bubble, the MessageReminderHeader override when the message has a reminder with a time, or the MessageSavedForLaterHeader override when it has one without; the MessagePinnedHeader override for a pinned message; and the SentToChannelHeader override for a reply also sent to the channel. It renders nothing when none applies. It reads the message and its reminder from context.

MessagePinnedHeader

Renders "Pinned by" and the name of who pinned the message, or "You". It renders nothing for a message that isn't pinned.

MessageReminderHeader

Renders "Reminder set" and the time left, from the duration.messageReminder translation key, or "Reminder overdue". It reads the reminder of the message in MessageContext.

MessageSavedForLaterHeader

Renders "Saved For Later" with a bookmark icon. It takes no props. The exported MessageSavedForLaterHeaderProps type lists message, which the component doesn't read.

SentToChannelHeader

Renders "Also sent in channel" on a reply shown in a thread, and "Replied to a thread" on the same reply shown in the channel. With onAlsoSentToChannelHeaderPress set on Channel or Thread, it adds View: in a thread, pressing it calls the handler with the message's ID; in a channel, with the message's ID and the reply's Thread, loading the parent message first when it isn't loaded.

MessageTextContainer

Renders the message's text as Markdown, with mentions and links that can be pressed. When the message has an auto-translation into the user's language, it renders that instead. It renders nothing for a message without text. With the MessageText override set, it renders that inside its container instead, with its own props, renderText (the exported function it renders with by default) and theme; see Overriding components.

MessageFooter

Renders, under the bubble, the sender's name on other users' messages, except in a channel with exactly two members, the MessageStatus override when showMessageStatus is set, the MessageTimestamp override, and "Edited" on an edited message that isn't AI-generated. It renders nothing for a message the server accepted that isn't the last of its group.

MessageTimestamp

Renders a time formatted with a translation key. It renders nothing when there's no time to show.

MessageStatus

Renders the status of one of the user's own messages: a clock while sending, one check once the server accepted it, and two checks once it reached or was read by another member, in a different color when read. It renders nothing for a failed or error message. Read state, unread and receipts explains where the receipts come from.

MessageReplies

Renders "1 Reply" or "5 Replies", the MessageRepliesAvatars override and a connector line. It renders nothing for a message without replies. Pressing it reports the messageReplies emitter with onOpenThread as the default handler, so it calls the list's onThreadSelect. MessageItemView doesn't render it inside a thread; a view of your own that renders it checks useThreadContext().thread itself.

MessageRepliesAvatars

Renders the avatars of up to three of the message's thread_participants.

MessageDeleted

Renders "Message deleted" in a bubble, and the MessageFooter override under it. MessageItemView renders it in place of the headers, the bubble, the reactions and the replies of a deleted message.

MessageError

Renders the error badge at the top corner of a failed or error message's bubble. It takes no props.

MessageBlocked

Renders the text of a message that moderation blocked, centered in a pill. Message renders it in place of the message view.

MessageBounce

Shows the dialog of a message that moderation bounced: "Send Anyway" resends it, "Edit Message" puts it in the composer, and "Delete Message" removes it from the list. It renders no view of its own, and opens a native alert when it renders. Message renders it when the user presses or long presses a bounced message.

Replacing the bounce alert shows a replacement.

MessageSystem

Renders a system message, such as "Cleo joined the channel", with its time from the timestamp.MessageSystem translation key. The list renders it in place of Message for a message of type system.

StreamingMessageView

Renders the text of an AI-generated message with MessageTextContainer, revealing new text a few letters at a time as the message updates. The text the message had when it mounted shows at once. MessageContent renders it in place of the text when isMessageAIGenerated on Chat returns true for the message. StreamingMessageView covers the AI setup.

Related hooks

• useMessageContext() reads the message the parts render.
• useIsMessageReadByOthers({ message }) and useIsMessageDeliveredToOthers({ message }) give the receipts MessageStatus shows, and useMessageReadData and useMessageDeliveredData who read the message and who received it. See Message hooks.
• useMessageReminder(messageId) returns the reminder MessageHeader reads.
• useStreamingMessage({ text }) reveals text the way StreamingMessageView does.