This is documentation for the release candidate Stream Chat React Native SDK v6. For the latest stable version, see the latest version (v5).

ChannelPreviewStatus

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

General 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} />;
};

const App = () => {
  return <ChannelList PreviewStatus={CustomPreviewStatus} />;
};

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`

ChannelPreviewMutedStatus

ChannelPreviewTitle