MessageFooter

Renders the message footer (read receipts, timestamp, etc.). Uses MessageStatus for read receipts.

Best Practices

• Keep footer content minimal to reduce visual noise.
• Use formattedDate to standardize timestamps across the app.
• Respect isDeleted and deletedMessagesVisibilityType for correct messaging.
• Avoid heavy formatting logic in render; memoize when needed.
• Keep read receipts consistent with your product’s privacy settings.

Basic Usage

Customize MessageFooter and pass it via the MessageFooter prop on Channel. You can also replace the formattedDate function.

import { Channel, MessageFooter } from "stream-chat-react-native";

const getDateTimeStamp = (message) => `My new date is ${message.created_at}`;

const CustomMessageFooter = ({ message }) => {
  const dateFormatted = useMemo(
    () => getDateTimeStamp(message),
    [message.created_at],
  );

  return <MessageFooter formattedDate={dateFormatted} />;
};

<Channel MessageFooter={CustomMessageFooter} />;

Props

date

Timestamp shown in the message footer.

isDeleted

Whether the message is deleted. If deleted, the component renders the "Only visible to you" subtext.

alignment

Sets whether the message aligns left or right in the list.

deletedMessagesVisibilityType

Controls visibility of deleted messages in the channel.

• always: Visible to both sender and receiver.
• never: Visible to no one.
• sender: Visible only to the sender.
• receiver: Visible only to the receiver.

lastGroupMessage

Whether or not this is the last message in a group of messages.

members

Members of current channel. This value is received from backend when you query a channel, either using client.queryChannels() or channel.watch() API call.

Record<
  string, // userId
  {
    banned?: boolean;
    created_at?: string;
    invite_accepted_at?: string;
    invite_rejected_at?: string;
    invited?: boolean;
    is_moderator?: boolean;
    role?: string;
    shadow_banned?: boolean;
    updated_at?: string;
    user?: UserResponse<UserType>;
    user_id?: string;
  }
>;

message

Message object.

otherAttachments

All attachments except file and image.

showMessageStatus

When false, message status (read receipt, pending indicator) isn’t rendered. Defaults to true for messages sent by the current user.

UI Components

MessageTimestamp

Component that renders the message timestamp.