# ChannelPreviewStatus

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

## General Usage

You can customize this component and provide it back to the SDK via the [`PreviewStatus`](https://getstream.io/chat/docs/sdk/react-native/v5/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`

Instance of Channel from stream-chat package.

| Type                                                |
| --------------------------------------------------- |
| [Channel](https://getstream.io/chat/docs/javascript/creating-channels/) |

### `latestMessagePreview`

Latest message on a channel, formatted for preview.

e.g.

```json
{
 created_at: '' ,
 messageObject: { ... },
 previews: {
   bold: true,
   text: 'This is the message preview text'
 },
 status: 0 | 1 | 2 // read states of latest message.
}
```

| Type   |
| ------ |
| Object |

### `formatLatestMessageDate`

Formatter function for date of latest message.

Returns a formatted date string. Default today's date is shown in 'HH:mm A' format and other dates are displayed in 'DD/MM/YY' format. This default logic is part of [ChannelPreview](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/ChannelPreview/ChannelPreview.tsx) component.

| Type                     |
| ------------------------ |
| `(date: Date) => string` |

---

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