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 ChannelPreviewStatus overrides to keep customization localized.

General Usage

Customize it and pass it via ChannelPreviewStatus on ChannelList.

Example with a custom date formatter:

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

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

const App = () => {
  return (
    <WithComponents overrides={{ ChannelPreviewStatus: CustomPreviewStatus }}>
      <ChannelList />
    </WithComponents>
  );
};

Props

Prop	Description	Type
`channel`	Channel instance from the Stream Chat client.	Channel
`lastMessage`	Last message in the channel.	`LocalMessage` \| `MessageResponse`
`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).	`(date: Date) => string`

ChannelPreviewMutedStatus

ChannelPreviewTitle