# ChannelPreviewStatus

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

## General Usage

You can customize this component and provide it back to the SDK via the [`PreviewStatus`](/chat/docs/sdk/react-native/v6/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} />;
};

const App = () => {
  return <ChannelList PreviewStatus={CustomPreviewStatus} />;
};
```

## Props

### `channel`

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

### `latestMessagePreview`

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

### `formatLatestMessageDate`

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

---

This page was last updated at 2025-08-19T14:51:56.079Z.

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