# MessageFooter

Renders the message footer (read receipts, timestamp, etc.). Uses [`MessageStatus`](/chat/docs/sdk/react-native/v8/ui-components/message-status/) 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.

```tsx
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](#groupstyles).

| Type    |
| ------- |
| boolean |


### `members`

Members of current channel. This value is received from backend when you query a channel, either using [`client.queryChannels()`](/chat/docs/javascript/query_channels/) or [`channel.watch()`](/chat/docs/javascript/creating_channels/) API call.

<admonition type="warning">

`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()`](/chat/docs/javascript/query_members/) API endpoint separately to get the list of members.

</admonition>

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


---

This page was last updated at 2026-04-17T17:33:44.509Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react-native/v8/ui-components/message-footer/](https://getstream.io/chat/docs/sdk/react-native/v8/ui-components/message-footer/).