# ChannelListView
`ChannelListView` renders the list of channels inside [`ChannelList`](/chat/docs/sdk/react-native/core-components/channel-list/). This is the default component for the [`List`](/chat/docs/sdk/react-native/core-components/channel-list#list/) prop.
## Best Practices
- Keep list item rendering lightweight to preserve scroll performance.
- Pass stable `additionalFlatListProps` and memoize callbacks.
- Use `loadMoreThreshold` conservatively to avoid excessive pagination calls.
- Show clear `EmptyStateIndicator` and `LoadingErrorIndicator` states.
- Avoid modifying `channels` directly; use context setters like `reloadList` or `refreshList`.
## Props
| Prop | Description | Type |
| ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- |
| `additionalFlatListProps` | Additional props provided to the underlying [FlatList](https://reactnative.dev/docs/flatlist#props). Don't use this to access the FlatList ref; use `setFlatListRef` instead. See [example below](#additionalflatlistprops-example). | `object` |
| `channels` | Array of channels currently loaded within the `ChannelList` component. | `array` |
| `error` | True if a call to [query channels API call](/chat/docs/javascript/query_channels/) within `ChannelList` component results in error, either during first load or during pagination. | `Error Object` \| `boolean` |
| `loadingChannels` | True if `ChannelList` component is loading the first page of channels. | `boolean` |
| `loadingNextPage` | True if `ChannelList` component is loading more channels as part of pagination. This will be set to true when user scrolls to bottom of the list and [`hasNextPage`](/chat/docs/sdk/react-native/contexts/channels-context#hasnextpage/) is true. | `boolean` |
| `loadMoreThreshold` | Sets the [`onEndReachedThreshold`](https://reactnative.dev/docs/flatlist#onendreachedthreshold) of the underlying FlatList. We recommend using `0.1` as the default value for this prop, as changing it might hit additional `channelQuery` calls, and you might reach the limit. Defaults to `0.1`. | `number` |
| `loadNextPage` | Loads the next page for `ChannelList`. | `function` |
| `refreshing` | True if `ChannelList` component is refreshing the list (using `refreshList` function call). Refreshing state will be triggered either when user executes pull-to-refresh gesture or if network connection is being recovered. This value is attached to [refreshing](https://reactnative.dev/docs/flatlist#refreshing) prop of underlying `FlatList` component of `ChannelList`. | `boolean` |
| `refreshList` | Function to manually re-sync or refresh the channels in `ChannelList` component. Calling `refreshList` will trigger a [RefreshControl](https://reactnative.dev/docs/refreshcontrol) on the underlying FlatList component. | `function` |
| `reloadList` | Manually reloads channels in `ChannelList`. Calling `reloadList` clears the current list and shows a loading indicator until new results arrive. | `function` |
| `setFlatListRef` | Callback function to access the underlying [FlatList](https://reactnative.dev/docs/flatlist) ref. Receives a [`React ref`](https://reactjs.org/docs/refs-and-the-dom.html#adding-a-ref-to-a-dom-element) (FlatList ref) as a parameter. See [example below](#setflatlistref-example). | `function` |
## Examples
### `additionalFlatListProps` example
```tsx
const flatListProps = { bounces: true };
;
```
### `setFlatListRef` example
```tsx
const flatListRef = useRef();
(flatListRef.current = ref)} />;
```
## UI Component Overrides
The UI components used by `ChannelListView` are read from `ComponentsContext` and can be customized via `WithComponents`. Wrap an ancestor with `WithComponents` and pass the components you want to override.
```tsx
import { ChannelList, WithComponents } from "stream-chat-react-native";
;
```
The following components can be overridden:
| Component | Description | Type | Default |
| ----------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `EmptyStateIndicator` | Rendered when the channel list is empty and not loading via the [ListEmptyComponent](https://reactnative.dev/docs/flatlist#listemptycomponent) prop on the FlatList. | ComponentType | [`EmptyStateIndicator`](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Indicators/EmptyStateIndicator.tsx) |
| `ChannelListFooterLoadingIndicator` | Rendered when [`loadingNextPage` from `ChannelsContext`](/chat/docs/sdk/react-native/contexts/channels-context#loadingnextpage/) is true via the [`ListFooterComponent`](https://reactnative.dev/docs/flatlist#listfootercomponent) prop on the FlatList. | `ComponentType` | [`ChannelListFooterLoadingIndicator`](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/ChannelList/ChannelListFooterLoadingIndicator.tsx) |
| `ListHeaderComponent` | Rendered when provided if the channel list is not empty via the [`ListHeaderComponent`](https://reactnative.dev/docs/flatlist#listheadercomponent) prop on the FlatList. | ComponentType | - |
| `LoadingErrorIndicator` | Rendered when [`error` from `ChannelsContext`](/chat/docs/sdk/react-native/contexts/channels-context#error/) is true, and the channel list is empty and not loading. | ComponentType | [`LoadingErrorIndicator`](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Indicators/LoadingErrorIndicator.tsx) |
| `LoadingIndicator` | Rendered when the channel list is empty and loading via the [ListEmptyComponent](https://reactnative.dev/docs/flatlist#listemptycomponent) prop on the FlatList. | ComponentType | [`ChannelListLoadingIndicator`](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/ChannelList/ChannelListLoadingIndicator.tsx) |
---
This page was last updated at 2026-04-17T17:33:46.075Z.
For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react-native/ui-components/channel-list-view/](https://getstream.io/chat/docs/sdk/react-native/ui-components/channel-list-view/).