# ChannelPreviewMessenger

Renders a channel list item inside [`ChannelList`](/chat/docs/sdk/react-native/v8/core-components/channel-list/). This is the default component for the [`Preview`](/chat/docs/sdk/react-native/v8/core-components/channel-list#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`

Channel instance from the Stream Chat client.

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


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

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

### `latestMessagePreview`

Latest message formatted for preview.

Example:

```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 shown in the unread 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 in the channel.

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

## UI Component Props

### `PreviewAvatar`

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

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

### `PreviewMessage`

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

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

### `PreviewStatus`

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

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

### `PreviewTitle`

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

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

### `PreviewUnreadCount`

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

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


---

This page was last updated at 2026-04-17T17:33:44.830Z.

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