ChannelPreviewView

ChannelPreviewView renders a channel list item inside ChannelList. This is the default component for the ChannelPreview override.

Best Practices

  • Keep the preview row simple to maintain smooth list scrolling.
  • Clamp unread counts with maxUnreadCount to avoid layout overflow.
  • Use formatLatestMessageDate to keep date formatting consistent with your app.
  • Memoize onSelect handlers to reduce re-renders.
  • Override subcomponents (ChannelPreviewAvatar, ChannelPreviewMessage, etc.) for consistent branding.

Props

PropDescriptionType
channelChannel instance from the Stream Chat client.Channel
formatLatestMessageDateFormatter for the latest message date. Returns a formatted date string. Default: today uses HH:mm A, other dates use DD/MM/YY (see ChannelPreview).(date: Date) => string
maxUnreadCountMax number shown in the unread badge. The value cannot exceed the backend limit of 255. Defaults to 255.number
onSelectFunction called when a user presses an item in the ChannelList. The function is called with the Channel instance corresponding to the list item as the only parameter. This callback is often used for navigating to a channel screen. A Channel instance is not serializable and will raise warnings if passed as a parameter through navigation. See example below.function
unreadNumber of unread messages in the channel.number
mutedIndicates if the channel is muted. Defaults to false.boolean
lastMessageLast message in the channel.LocalMessage | MessageResponse
mutedStatusPositionPosition of the muted status component within the ChannelPreview. Defaults to inlineTitle.trailingBottom | inlineTitle

Examples

onSelect example

onSelect={(channel) => { /** navigation logic */ }}

UI Component Props

ComponentDescriptionTypeDefault
ChannelPreviewAvatarAvatar component rendered within ChannelPreview.ComponentTypeChannelAvatar
ChannelPreviewMessageMessage component rendered within ChannelPreview.ComponentTypeChannelPreviewMessage
ChannelPreviewMutedStatusMuted status component rendered within ChannelPreview.ComponentTypeChannelPreviewMutedStatus
ChannelPreviewStatusStatus component rendered within ChannelPreview.ComponentTypeChannelPreviewStatus
ChannelPreviewTitleTitle component rendered within ChannelPreview.ComponentTypeChannelPreviewTitle
ChannelPreviewUnreadCountUnread count component rendered within ChannelPreview.ComponentTypeChannelPreviewUnreadCount