Skip to main content
Version: v5

ChannelPreviewStatus

Component to render the status of the latest message on a channel within the ChannelList.

Basic Usage#

You can customize this component and provide it back to the SDK via the PreviewStatus prop on ChannelList if desired.

In the following sample we display a custom message preview date.

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

const CustomPreviewStatus = ({ latestMessagePreview }) => {
// important usage of useMemo once date parsers can perform some computation when re-rendering.
const formattedDate = useMemo(() => customDateFormatter(latestMessagePreview), [latestMessagePreview]);
return <ChannelPreviewStatus formatLatestMessageDate={formattedDate} />;
};
<ChannelList PreviewStatus={CustomPreviewStatus} />;

Props#

required
channel#

Instance of Channel from stream-chat package.

Type
Channel

latestMessagePreview#

Latest message on a channel, formatted for preview.

e.g.

{
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 function for date of latest message.

Returns a formatted date string. Default today's date is shown in 'HH:mm A' format and other dates are displayed in 'DD/MM/YY' format. This default logic is part of ChannelPreview component.

Type
(date: Date) => string

Did you find this page helpful?