# ChannelPreviewMessenger

Component to render a list item within the [`ChannelList`](/chat/docs/sdk/react-native/v4/core-components/channel-list/).
This is the default component provided to the prop [`Preview`](/chat/docs/sdk/react-native/v4/core-components/channel-list#preview/) on the `ChannelList` component.

## Props

### **channel**

Instance of Channel from stream-chat package.

| Type                                                |
| --------------------------------------------------- |
| [Channel](/chat/docs/javascript/creating-channels/) |


### 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](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/ChannelPreview/ChannelPreview.tsx) component.

| Type                     |
| ------------------------ |
| `(date: Date) => string` |


### latestMessagePreview

Latest message on a channel, formatted for preview.

e.g.

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

| Type   |
| ------ |
| object |


### maxUnreadCount

Max number to display within the unread notification badge.
The value cannot exceed the backend limit of 255.

| Type   | Default |
| ------ | ------- |
| number | 255     |


### `onSelect`

Function called when a user presses an item in the `ChannelList`.
The function is called with the [`Channel` instance](/chat/docs/javascript/creating-channels/) corresponding to the list item as the only parameter.
This callback is often used for navigating to a channel screen.

#### Example

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

<admonition type="note">

A `Channel` instance is not serializable and will therefore raise warnings if passed as a parameter through navigation to another screen.

</admonition>

| Type     |
| -------- |
| function |

| Parameter | Description        |
| --------- | ------------------ |
| channel   | `Channel` instance |


### unread

Number of unread messages on the channel

| Type   |
| ------ |
| number |


### PreviewAvatar

Avatar component rendered within [`Preview`](/chat/docs/sdk/react-native/v4/ui-components/channel-preview-messenger/).

| Type      | Default                                                                       |
| --------- | ----------------------------------------------------------------------------- |
| component | [ChannelAvatar](/chat/docs/sdk/react-native/v4/ui-components/channel-avatar/) |


### PreviewMessage

Message component rendered within [`Preview`](/chat/docs/sdk/react-native/v4/ui-components/channel-preview-messenger/).

| Type      | Default                                                                                        |
| --------- | ---------------------------------------------------------------------------------------------- |
| component | [ChannelPreviewMessage](/chat/docs/sdk/react-native/v4/ui-components/channel-preview-message/) |


### PreviewStatus

Status component rendered within [`Preview`](/chat/docs/sdk/react-native/v4/ui-components/channel-preview-messenger/).

| Type      | Default                                                                                      |
| --------- | -------------------------------------------------------------------------------------------- |
| component | [ChannelPreviewStatus](/chat/docs/sdk/react-native/v4/ui-components/channel-preview-status/) |


### PreviewTitle

Title component rendered within [`Preview`](/chat/docs/sdk/react-native/v4/ui-components/channel-preview-messenger/).

| Type      | Default                                                                                    |
| --------- | ------------------------------------------------------------------------------------------ |
| component | [ChannelPreviewTitle](/chat/docs/sdk/react-native/v4/ui-components/channel-preview-title/) |


### PreviewUnreadCount

Unread count component rendered within [`Preview`](/chat/docs/sdk/react-native/v4/ui-components/channel-preview-messenger/).

| Type      | Default                                                                                                 |
| --------- | ------------------------------------------------------------------------------------------------------- |
| component | [ChannelPreviewUnreadCount](/chat/docs/sdk/react-native/v4/ui-components/channel-preview-unread-count/) |



---

This page was last updated at 2026-07-10T16:05:02.864Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react-native/v4/ui-components/channel-preview-messenger/](https://getstream.io/chat/docs/sdk/react-native/v4/ui-components/channel-preview-messenger/).