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