# ChannelPreviewView

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

<partial id="chat-sdk/react-native/v9-latest/_partials/common-content/ui-components/channel-preview-view/props/channel"></partial>

### `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/blob/main/package/src/components/ChannelPreview/ChannelPreview.tsx)).

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

### `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 |

### `muted`

Indicates if the channel is muted.

| Type    | Default |
| ------- | ------- |
| Boolean | `false` |

### `lastMessage`

Last message in the channel.

| Type                                |
| ----------------------------------- |
| `LocalMessage` \| `MessageResponse` |

### `mutedStatusPosition`

Position of the muted status component within the [`Preview`](#preview).

| Type                              | Default       |
| --------------------------------- | ------------- |
| `trailingBottom` \| `inlineTitle` | `inlineTitle` |

## UI Component Props

### `PreviewAvatar`

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

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

### `PreviewMessage`

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

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

### `PreviewMutedStatus`

Muted status component rendered within [`Preview`](/chat/docs/sdk/react-native/v9/ui-components/channel-preview-view/).

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

### `PreviewStatus`

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

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

### `PreviewTitle`

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

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

### `PreviewUnreadCount`

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

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


---

This page was last updated at 2026-04-03T17:24:33.836Z.

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