onSelect={(channel) => { /** navigation logic */ }}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
maxUnreadCountto avoid layout overflow. - Use
formatLatestMessageDateto keep date formatting consistent with your app. - Memoize
onSelecthandlers to reduce re-renders. - Override subcomponents (
ChannelPreviewAvatar,ChannelPreviewMessage, etc.) for consistent branding.
Props
| Prop | Description | Type |
|---|---|---|
channel | Channel instance from the Stream Chat client. | Channel |
formatLatestMessageDate | Formatter 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 |
maxUnreadCount | Max number shown in the unread badge. The value cannot exceed the backend limit of 255. Defaults to 255. | number |
onSelect | Function 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 |
unread | Number of unread messages in the channel. | number |
muted | Indicates if the channel is muted. Defaults to false. | boolean |
lastMessage | Last message in the channel. | LocalMessage | MessageResponse |
mutedStatusPosition | Position of the muted status component within the ChannelPreview. Defaults to inlineTitle. | trailingBottom | inlineTitle |
Examples
onSelect example
UI Component Props
| Component | Description | Type | Default |
|---|---|---|---|
ChannelPreviewAvatar | Avatar component rendered within ChannelPreview. | ComponentType | ChannelAvatar |
ChannelPreviewMessage | Message component rendered within ChannelPreview. | ComponentType | ChannelPreviewMessage |
ChannelPreviewMutedStatus | Muted status component rendered within ChannelPreview. | ComponentType | ChannelPreviewMutedStatus |
ChannelPreviewStatus | Status component rendered within ChannelPreview. | ComponentType | ChannelPreviewStatus |
ChannelPreviewTitle | Title component rendered within ChannelPreview. | ComponentType | ChannelPreviewTitle |
ChannelPreviewUnreadCount | Unread count component rendered within ChannelPreview. | ComponentType | ChannelPreviewUnreadCount |