ChannelPreviewStatus

Renders the latest message status inside ChannelList.

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 on ChannelList.

Example with a custom date formatter:

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

`latestMessagePreview`

Latest message formatted for preview.

Example:

{
 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).

Type
`(date: Date) => string`

ChannelPreviewMutedStatus

ChannelPreviewTitle