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 v4, which is nolonger 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 |
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 |