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 { ChannelList, ChannelPreviewStatus } from "stream-chat-react-native";
import { customDateFormatter } from "..."; // your custom date formatter

const CustomPreviewStatus = (props) => (
  <ChannelPreviewStatus
    {...props}
    formatLatestMessageDate={customDateFormatter}
  />
);

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

Props

channel

lastMessage

Last message in the channel.

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