# ChannelPreviewStatus

Renders the latest message status inside [`ChannelList`](/chat/docs/sdk/react-native/v8/core-components/channel-list/).

## Best Practices

- Keep date formatting consistent across the app.
- Memoize expensive formatting logic for large lists.
- Handle missing or system messages gracefully in previews.
- Prefer lightweight status UI to avoid layout shifts.
- Use `PreviewStatus` overrides to keep customization localized.

## General Usage

Customize it and pass it via [`PreviewStatus`](/chat/docs/sdk/react-native/v8/core-components/channel-list#previewstatus/) on `ChannelList`.

Example with a custom date formatter:

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

const CustomPreviewStatus = ({ latestMessagePreview }) => {
  // Use useMemo to avoid recomputing on each render.
  const formattedDate = useMemo(
    () => customDateFormatter(latestMessagePreview),
    [latestMessagePreview],
  );
  return <ChannelPreviewStatus formatLatestMessageDate={formattedDate} />;
};

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

## Props

### `channel`

Channel instance from the Stream Chat client.

| Type                                                |
| --------------------------------------------------- |
| [Channel](/chat/docs/javascript/creating_channels/) |


### `latestMessagePreview`

Latest message formatted for preview.

Example:

```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 for the latest message date.

Returns a formatted date string. Default: today uses `HH:mm A`, other dates use `DD/MM/YY` (see [ChannelPreview](https://github.com/GetStream/stream-chat-react-native/v8/blob/main/package/src/components/ChannelPreview/ChannelPreview.tsx)).

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


---

This page was last updated at 2026-04-17T17:33:44.837Z.

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