---
id: message-footer
title: MessageFooter
---

import Members from '../common-content/contexts/channel-context/members.mdx';

import Alignment from '../common-content/contexts/message-context/alignment.mdx';
import LastGroupMessage from '../common-content/contexts/message-context/last_group_message.mdx';
import MessageProp from '../common-content/contexts/message-context/message.mdx';
import OtherAttachments from '../common-content/contexts/message-context/other_attachments.mdx';
import ShowMessageStatus from '../common-content/contexts/message-context/show_message_status.mdx';

Component to render footer of message, which consists of read receipts, timestamp of message etc. This component uses [`MessageStatus`](./message_status.mdx) for rendering read recipts 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

### <div class="label required">required</div> **formattedDate**

Datetime stamp to be shown in footer for deleted message.

| Type |
| - |
| string |

### <div class="label required">required</div> **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 |

### <div class="label description">_overrides the value from [MessageContext](../contexts/message_context.mdx#alignment)_</div> alignment {#alignment}

<Alignment />

### <div class="label description">_overrides the value from [MessageContext](../contexts/message_context.mdx#lastgroupmessage)_</div> lastGroupMessage {#lastgroupmessage}

<LastGroupMessage />

### <div class="label description">_overrides the value from [MessageContext](../contexts/message_context.mdx#members)_</div> members {#members}

<Members />

### <div class="label description">_overrides the value from [MessageContext](../contexts/message_context.mdx#message)_</div> message {#message}

<MessageProp />

### <div class="label description">_overrides the value from [MessageContext](../contexts/message_context.mdx#otherattachments)_</div> otherAttachments {#otherattachments}

<OtherAttachments />

### <div class="label description">_overrides the value from [MessageContext](../contexts/message_context.mdx#showmessagestatus)_</div> showMessageStatus {#showmessagestatus}

<ShowMessageStatus />