Channel preview

Each row of a ChannelList is a ChannelPreview. It reads the row's values from the channel's stores, such as whether the channel is muted, the unread count and the latest message, wraps the row in its swipe actions, and renders the ChannelPreview override key with those values as props. The default for that key is ChannelPreviewView, the row's look. Channel list UI explains what each value is read from.

Best practices

• To change the look and keep the values, register your own component as the ChannelPreview key. It gets the same props as ChannelPreviewView, and can render ChannelPreviewView itself.
• To change only one part, such as the title or the unread badge, override that part's key instead of the whole row. See Parts.
• Keep a row light, since it renders for every channel in the list.
• Use the props a row gets, such as unread and lastMessage, rather than reading them from the channel again. They're reactive, and channel.data isn't.
• A row of your own that doesn't render ChannelPreviewView calls onSelect from useChannelsContext() itself. The SDK doesn't export the registry of open swipe actions, so such a row can't close them on a tap as the default does.

Basic usage

The default row shows the time of the latest message from the timestamp.ChannelPreviewStatus translation key. ChannelPreviewView takes formatLatestMessageDate to format it yourself, but ChannelPreview doesn't pass it, so register a row that does:

import type { PropsWithChildren } from "react";
import { ChannelPreviewView, WithComponents } from "stream-chat-react-native";
import type {
  ChannelPreviewViewProps,
  ComponentOverrides,
} from "stream-chat-react-native";

const formatLatestMessageDate = (date: Date) =>
  date.toLocaleDateString(undefined, { day: "numeric", month: "short" });

const RowWithShortDate = (props: ChannelPreviewViewProps) => (
  <ChannelPreviewView
    {...props}
    formatLatestMessageDate={formatLatestMessageDate}
  />
);

const overrides: ComponentOverrides = { ChannelPreview: RowWithShortDate };

export const RowsWithShortDates = ({ children }: PropsWithChildren) => (
  <WithComponents overrides={overrides}>{children}</WithComponents>
);

The Preview UI cookbook builds a row from scratch.

What a row does

ChannelPreview:

• reads muted, pinned and unread from channel.state, and lastMessage from channel.messagePaginator.aggregateState. unread is the current user's unread count, and 0 while the channel is muted.
• replaces lastMessage with its translation into the user's language, when the message has one.
• subscribes the channel's composer to draft events, so the row shows the user's draft.
• wraps the row in its swipe actions, unless swipeActionsEnabled on ChannelList is false.

The default ChannelPreviewView:

• is a Pressable. A tap closes any open swipe actions in the list, or calls onSelect(channel) when none are open.
• renders the avatar at the start, and the title with the muted and pinned icons, the time of the latest message and the unread badge on its first line.
• renders the message line on its second line: who is typing, the draft, "No messages yet", the poll's label, "Message failed to send", or the latest message after its delivery status, the first that applies.
• places the muted and pinned icons after the title, or at the end of the message line, as mutedStatusPosition and pinnedStatusPosition say.
• is memoized, so it renders again only when one of its props changes.

Props

ChannelPreview takes these props:

The ChannelPreview key, ChannelPreviewView by default, gets these props. ChannelPreview passes channel, muted, pinned, unread and lastMessage; ChannelPreviewView reads the rest from ChannelsContext unless you pass them.

Parts

ChannelPreviewView renders each part through an override key, with these props:

ChannelPreviewMessage renders three more keys:

Every default is exported under the name in the Default column, so a replacement can render it and add to it.

Related hooks

• useChannelPreviewDisplayName(channel) returns the title the default row shows.
• useChannelPreviewDisplayPresence(channel) returns true when the channel has two members and the other one is online.
• useChannelTypingState({ channel }) returns who is typing in the channel.
• useChannelPreviewDraftMessage({ channel }) returns the user's draft in the channel.
• useIsChannelMuted(channel) returns the channel's mute status, { muted, createdAt, expiresAt }, and useIsChannelPinned(channel) whether the user pinned it.

Their signatures are on Channel preview hooks.