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} />;
This is documentation for
Stream Chat React-native SDK v3, which is no longer actively maintained. For up-to-date documentation, see the latest 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.
Props
channel
Instance of Channel from stream-chat package.
Type |
---|
Channel |
lastMessagePreview
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 |