This is beta documentation for Stream Chat React Native SDK v9. For the latest stable version, see the latest version (v8) .

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

`lastMessage`

Last message in the channel.

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

Type
`(date: Date) => string`

ChannelPreviewMutedStatus

ChannelPreviewTitle