# ChannelsContext
`ChannelsContext` is provided by [`ChannelList`](/chat/docs/sdk/react-native/v8/core-components/channel-list/). If you are not familiar with the React Context API, see the [React docs](https://reactjs.org/docs/context.html).
## Best Practices
- Use `useChannelsContext` for consistent access and typings.
- Treat `channels` as read-only; use context helpers to mutate list state.
- Use `reloadList` when filters change, and `refreshList` for pull-to-refresh.
- Check `hasNextPage` and `loadingNextPage` before triggering pagination.
- Keep list UI components lightweight to preserve scroll performance.
## Basic Usage
Consume `ChannelsContext` in any child of `ChannelList`:
```tsx
import { useContext } from "react";
import { ChannelsContext } from "stream-chat-react-native";
const { channels, reloadList } = useContext(ChannelsContext);
```
Alternatively, use the `useChannelsContext` hook.
```tsx
import { useChannelsContext } from "stream-chat-react-native";
const { channels, reloadList } = useChannelsContext();
```
## Value
### additionalFlatListProps
Additional props provided to the underlying [FlatList](https://reactnative.dev/docs/flatlist#props).
#### Example
```tsx
const flatListProps = { bounces: true };
;
```
Don't use `additionalFlatListProps` to access the FlatList ref, use `setFlatListRef` instead.
| Type |
| ------ |
| Object |
### channels
Array of channels currently loaded within the `ChannelList` component.
| Type |
| ----- |
| 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.
| Type |
| --------------------------- |
| `Error Object` \| `Boolean` |
### hasNextPage
False if `ChannelList` has loaded all channels for the current [`filters`](/chat/docs/sdk/react-native/v8/core-components/channel-list#recommended-filters/).
| Type |
| ------- |
| Boolean |
### ListHeaderComponent
Rendered when provided if the channel list is not empty via the [`ListHeaderComponent`](https://reactnative.dev/docs/flatlist#listheadercomponent) prop on the FlatList.
| Type |
| ------------- |
| ComponentType |
### `loadingChannels`
True if `ChannelList` component is loading the first page of channels.
| Type |
| ------- |
| 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.
| Type | Default |
| ------ | ------- |
| Number | 0.1 |
### 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/v8/contexts/channels-context#hasnextpage/) is true.
| Type |
| ------- |
| Boolean |
### loadNextPage
Loads the next page for `ChannelList`.
| Type |
| -------- |
| Function |
### maxUnreadCount
Max number to display within unread notification badge. The value cannot be higher than 255, which is the limit on backend side.
| Type | Default |
| ------ | ------- |
| number | 255 |
### numberOfSkeletons
The number of [`Skeleton`](#skeleton) items to display in the [`LoadingIndicator`](#loadingindicator).
| Type | Default |
| ------ | ------- |
| number | 6 |
### `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 */ }}
```
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 |
### refreshing
True if `ChannelList` component is refreshing the list (using [`refreshList`](#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`.
| Type |
| ------- |
| 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 underlying FlatList component.
| Type |
| -------- |
| Function |
### `reloadList`
Manually reloads channels in `ChannelList`.
Calling `reloadList` clears the current list and shows a loading indicator until new results arrive.
| Type |
| -------- |
| Function |
### setFlatListRef
Callback function to access the underlying [FlatList](https://reactnative.dev/docs/flatlist) ref.
#### Example
```tsx
const flatListRef = useRef();
(flatListRef.current = ref)} />;
```
| Type |
| -------- |
| Function |
| Parameter | Description |
| ------------------------------------------------------------------------------------------- | ------------ |
| [`React ref`](https://reactjs.org/docs/refs-and-the-dom.html#adding-a-ref-to-a-dom-element) | FlatList ref |
### EmptyStateIndicator
Rendered when the channel list is empty and not loading via the [ListEmptyComponent](https://reactnative.dev/docs/flatlist#listemptycomponent) prop on the FlatList.
| Type | Default |
| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
| ComponentType | [`EmptyStateIndicator`](https://github.com/GetStream/stream-chat-react-native/v8/blob/main/package/src/components/Indicators/EmptyStateIndicator.tsx) |
### FooterLoadingIndicator
Rendered when [`loadingNextPage` from `ChannelsContext`](/chat/docs/sdk/react-native/v8/contexts/channels-context#loadingnextpage/) is true via the [`ListFooterComponent`](https://reactnative.dev/docs/flatlist#listfootercomponent) prop on the FlatList.
| Type | Default |
| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `ComponentType` | [`ChannelListFooterLoadingIndicator`](https://github.com/GetStream/stream-chat-react-native/v8/blob/main/package/src/components/ChannelList/ChannelListFooterLoadingIndicator.tsx) |
### HeaderErrorIndicator
Rendered when [`error` from `ChannelsContext`](/chat/docs/sdk/react-native/v8/contexts/channels-context#error/) is true.
| Type | Default |
| ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ComponentType | [ChannelListHeaderErrorIndicator](https://github.com/GetStream/stream-chat-react-native/v8/blob/main/package/src/components/ChannelList/ChannelListHeaderErrorIndicator.tsx) |
### HeaderNetworkDownIndicator
Rendered when [`isOnline` from `ChatContext`](/chat/docs/sdk/react-native/v8/contexts/chat-context#isonline/) is false.
| Type | Default |
| ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ComponentType | [ChannelListHeaderNetworkDownIndicator](https://github.com/GetStream/stream-chat-react-native/v8/blob/main/package/src/components/ChannelList/ChannelListHeaderNetworkDownIndicator.tsx) |
### LoadingErrorIndicator
Rendered when [`error` from `ChannelsContext`](/chat/docs/sdk/react-native/v8/contexts/channels-context#error/) is true, and the channel list is empty and not loading.
| Type | Default |
| ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ComponentType | [`LoadingErrorIndicator`](https://github.com/GetStream/stream-chat-react-native/v8/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.
| Type | Default |
| ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ComponentType | [`ChannelListLoadingIndicator`](https://github.com/GetStream/stream-chat-react-native/v8/blob/main/package/src/components/ChannelList/ChannelListLoadingIndicator.tsx) |
### Preview
List item rendered by the underlying [FlatList](https://reactnative.dev/docs/flatlist#required-renderitem).
| Type | Default |
| ------------- | -------------------------------------------------------------------------------------------------- |
| ComponentType | [ChannelPreviewMessenger](/chat/docs/sdk/react-native/v8/ui-components/channel-preview-messenger/) |
### 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/) |
### Skeleton
Row item rendered in the [`LoadingIndicator`](#loadingindicator).
| Type | Default |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------ |
| ComponentType | [Skeleton](https://github.com/GetStream/stream-chat-react-native/v8/blob/main/package/src/components/ChannelList/Skeleton.tsx) |
---
This page was last updated at 2026-04-17T17:33:44.973Z.
For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react-native/v8/contexts/channels-context/](https://getstream.io/chat/docs/sdk/react-native/v8/contexts/channels-context/).