# MessageFooter

Component to render footer of message, which consists of read receipts, timestamp of message etc. This component uses [`MessageStatus`](/chat/docs/sdk/react-native/v4/ui-components/message-status/) for rendering read receipts internally.

## Basic Usage

You can customize the `MessageFooter` component and provide it back to the SDK via the `MessageFooter` prop on `Channel` if desired.
Replacing the `formattedDate` function used by the `MessageFooter` throughout the SDK with your own is easily accomplished.

```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],
  );

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

<Channel MessageFooter={CustomMessageFooter} />;
```

## Props

### **formattedDate**

DateTime stamp to be shown in footer for deleted message.

| Type   |
| ------ |
| string |

### **isDeleted**

Weather message is deleted or not. In case of deleted message, `'Only visible to you'` subtext will be rendered in this component.

| Type    | Default |
| ------- | ------- |
| boolean | false   |

### alignment

Sets if the message should be aligned to right or left side of list.

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


### deletedMessagesVisibilityType

Controls the visibility of the deleted messages within the channel.

- `always`: The deleted messages in the channel will be visible to both the sender and receiver.
- `never`: The deleted messages will not be visible to anyone.
- `sender`: The deleted messages in the channel will only be visible to sender.
- `receiver`: The deleted messages in the channel will only be visible to 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   |
| ------ |
| object |


### `otherAttachments`

All the attachments on the message except for types `file` and `image`.

| Type  |
| ----- |
| array |


### showMessageStatus

When false, message status (read receipt, pending state indicator) won't be rendered.
By default, this value is true for messages sent by current user of chat.

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



---

This page was last updated at 2026-05-13T13:38:44.528Z.

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