ChannelPreviewMessenger

Renders a channel list item inside ChannelList. This is the default component for the Preview prop.

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 (PreviewAvatar, PreviewMessage, etc.) for consistent branding.

Props

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).

latestMessagePreview

Latest message formatted for preview.

Example:

{
 created_at: '' ,
 messageObject: { ... },
 previews: {
   bold: true,
   text: 'This is the message preview text'
 },
 status: 0 | 1 | 2 // read states of latest message.
}

maxUnreadCount

Max number shown in the unread badge. The value cannot exceed the backend limit of 255.

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.

Example

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

unread

Number of unread messages in the channel.

UI Component Props

PreviewAvatar

Avatar component rendered within Preview.

PreviewMessage

Message component rendered within Preview.

PreviewStatus

Status component rendered within Preview.

PreviewTitle

Title component rendered within Preview.

PreviewUnreadCount

Unread count component rendered within Preview.