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.

Type
`String` \| `Date` \| `undefined`

`isDeleted`

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

Type	Default
Boolean	`false`

`alignment`

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

Type	Default
enum('right', 'left')	'right'

`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.

Type	Default
enum('always', 'never', 'receiver', 'sender')	'both'

`lastGroupMessage`

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

Type
boolean

`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.

client.queryChannels() or channel.watch() returns only up to 100 members of channel. So if you expect total number of members to be > 100, its better to use client.queryMembers() API endpoint separately to get the list of members.

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;
  }
>;

Type
object

`message`

Message object.

Type
`Message` type

`otherAttachments`

All attachments except file and image.

Type
Array

`showMessageStatus`

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

Type
`boolean`

UI Components

`MessageTimestamp`

Component that renders the message timestamp.

Type	Default
`ComponentType` \|`undefined`	`undefined`

MessageError

MessagePinnedHeader