# ChannelPreviewMessenger

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

## Props

### **channel**

Instance of Channel from stream-chat package.

| Type                                                |
| --------------------------------------------------- |
| [Channel](https://getstream.io/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` |

### lastMessagePreview

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](https://getstream.io/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 */ }}
```

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

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

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

### unread

Number of unread messages on the channel

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

### PreviewAvatar

Avatar component rendered within [`Preview`](https://getstream.io/chat/docs/sdk/react-native/v3/ui-components/channel-preview-messenger/).

| Type      | Default                                                                       |
| --------- | ----------------------------------------------------------------------------- |
| component | [ChannelAvatar](https://getstream.io/chat/docs/sdk/react-native/v3/ui-components/channel-avatar/) |

### PreviewMessage

Message component rendered within [`Preview`](https://getstream.io/chat/docs/sdk/react-native/v3/ui-components/channel-preview-messenger/).

| Type      | Default                                                                                        |
| --------- | ---------------------------------------------------------------------------------------------- |
| component | [ChannelPreviewMessage](https://getstream.io/chat/docs/sdk/react-native/v3/ui-components/channel-preview-message/) |

### PreviewStatus

Status component rendered within [`Preview`](https://getstream.io/chat/docs/sdk/react-native/v3/ui-components/channel-preview-messenger/).

| Type      | Default                                                                                      |
| --------- | -------------------------------------------------------------------------------------------- |
| component | [ChannelPreviewStatus](https://getstream.io/chat/docs/sdk/react-native/v3/ui-components/channel-preview-status/) |

### PreviewTitle

Title component rendered within [`Preview`](https://getstream.io/chat/docs/sdk/react-native/v3/ui-components/channel-preview-messenger/).

| Type      | Default                                                                                    |
| --------- | ------------------------------------------------------------------------------------------ |
| component | [ChannelPreviewTitle](https://getstream.io/chat/docs/sdk/react-native/v3/ui-components/channel-preview-title/) |

### PreviewUnreadCount

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

| Type      | Default                                                                                                 |
| --------- | ------------------------------------------------------------------------------------------------------- |
| component | [ChannelPreviewUnreadCount](https://getstream.io/chat/docs/sdk/react-native/v3/ui-components/channel-preview-unread-count/) |

---

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