# ChannelPreviewView

`ChannelPreviewView` renders a channel list item inside [`ChannelList`](/chat/docs/sdk/react-native/core-components/channel-list/). This is the default component for the [`ChannelPreview`](/chat/docs/sdk/react-native/core-components/channel-list#channelpreview/) override.

## 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 (`ChannelPreviewAvatar`, `ChannelPreviewMessage`, etc.) for consistent branding.

## Props

| Prop                      | Description                                                                                                                                                                                                                                                                                                                                                                                                                                  | Type                                                |
| ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------- |
| `channel`                 | Channel instance from the Stream Chat client.                                                                                                                                                                                                                                                                                                                                                                                                | [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/blob/main/package/src/components/ChannelPreview/ChannelPreview.tsx)).                                                                                                                                                          | `(date: Date) => string`                            |
| `maxUnreadCount`          | Max number shown in the unread badge. The value cannot exceed the backend limit of 255. Defaults to `255`.                                                                                                                                                                                                                                                                                                                                   | `number`                                            |
| `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. A `Channel` instance is not serializable and will raise warnings if passed as a parameter through navigation. See [example below](#onselect-example). | `function`                                          |
| `unread`                  | Number of unread messages in the channel.                                                                                                                                                                                                                                                                                                                                                                                                    | `number`                                            |
| `muted`                   | Indicates if the channel is muted. Defaults to `false`.                                                                                                                                                                                                                                                                                                                                                                                      | `boolean`                                           |
| `lastMessage`             | Last message in the channel.                                                                                                                                                                                                                                                                                                                                                                                                                 | `LocalMessage` \| `MessageResponse`                 |
| `mutedStatusPosition`     | Position of the muted status component within the [`ChannelPreview`](#channelpreview). Defaults to `inlineTitle`.                                                                                                                                                                                                                                                                                                                            | `trailingBottom` \| `inlineTitle`                   |

## Examples

### `onSelect` example

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

## UI Component Props

| Component                   | Description                                                                                                                 | Type          | Default                                                                                              |
| --------------------------- | --------------------------------------------------------------------------------------------------------------------------- | ------------- | ---------------------------------------------------------------------------------------------------- |
| `ChannelPreviewAvatar`      | Avatar component rendered within [`ChannelPreview`](/chat/docs/sdk/react-native/ui-components/channel-preview-view/).       | ComponentType | [ChannelAvatar](/chat/docs/sdk/react-native/ui-components/channel-avatar/)                           |
| `ChannelPreviewMessage`     | Message component rendered within [`ChannelPreview`](/chat/docs/sdk/react-native/ui-components/channel-preview-view/).      | ComponentType | [ChannelPreviewMessage](/chat/docs/sdk/react-native/ui-components/channel-preview-message/)          |
| `ChannelPreviewMutedStatus` | Muted status component rendered within [`ChannelPreview`](/chat/docs/sdk/react-native/ui-components/channel-preview-view/). | ComponentType | [ChannelPreviewMutedStatus](/chat/docs/sdk/react-native/ui-components/channel-preview-muted-status/) |
| `ChannelPreviewStatus`      | Status component rendered within [`ChannelPreview`](/chat/docs/sdk/react-native/ui-components/channel-preview-view/).       | ComponentType | [ChannelPreviewStatus](/chat/docs/sdk/react-native/ui-components/channel-preview-status/)            |
| `ChannelPreviewTitle`       | Title component rendered within [`ChannelPreview`](/chat/docs/sdk/react-native/ui-components/channel-preview-view/).        | ComponentType | [ChannelPreviewTitle](/chat/docs/sdk/react-native/ui-components/channel-preview-title/)              |
| `ChannelPreviewUnreadCount` | Unread count component rendered within [`ChannelPreview`](/chat/docs/sdk/react-native/ui-components/channel-preview-view/). | ComponentType | [ChannelPreviewUnreadCount](/chat/docs/sdk/react-native/ui-components/channel-preview-unread-count/) |


---

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

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