# ChannelPreviewStatus

Component to render the status of the latest message on a channel within the [`ChannelList`](/chat/docs/sdk/react-native/v4/core-components/channel-list/).

## Basic Usage

You can customize this component and provide it back to the SDK via the [`PreviewStatus`](/chat/docs/sdk/react-native/v4/core-components/channel-list#previewstatus/) prop on `ChannelList` if desired.

In the following sample we display a custom message preview date.

```jsx
import { useMemo } from "react";
import { ChannelList, ChannelPreviewStatus } from "stream-chat-react-native";
import { customDateFormatter } from "..."; // your custom date formatter

const CustomPreviewStatus = ({ latestMessagePreview }) => {
  // important usage of useMemo once date parsers can perform some computation when re-rendering.
  const formattedDate = useMemo(
    () => customDateFormatter(latestMessagePreview),
    [latestMessagePreview],
  );
  return <ChannelPreviewStatus formatLatestMessageDate={formattedDate} />;
};
<ChannelList PreviewStatus={CustomPreviewStatus} />;
```

## Props

### **channel**

<partial id="chat-sdk/react-native/v4/_partials/common-content/ui-components/channel-preview-messenger/props/channel"></partial>

### latestMessagePreview

<partial id="chat-sdk/react-native/v4/_partials/common-content/ui-components/channel-preview-messenger/props/latest_message_preview"></partial>

### formatLatestMessageDate

<partial id="chat-sdk/react-native/v4/_partials/common-content/ui-components/channel-preview-messenger/props/format_latest_message_date"></partial>

---

This page was last updated at 2025-08-15T14:16:13.130Z.

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