Skip to main content
Version: v4

ChannelsContext

ChannelsContext is provided by ChannelList component. If you are not familiar with React Context API, please read about it on React docs.

Basic Usage#

ChannelsContext can be consumed by any of the child component of ChannelList component as following:

import { useContext } from 'react';
import { ChannelsContext } from 'stream-chat-react-native';

const { channels, reloadList } = useContext(ChannelsContext);

Alternatively, you can also use useChannelsContext hook provided by library to consume ChannelsContext.

import { useChannelsContext } from 'stream-chat-react-native';

const { channels, reloadList } = useChannelsContext();

Value#

forwarded from ChannelList props
additionalFlatListProps#

Additional props provided to the underlying FlatList.

Example#

const flatListProps = { bounces: true };

<ChannelList additionalFlatListProps={flatListProps} />;
caution

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 within ChannelList component results in error, either during first load or during pagination.

Type
Error object | boolean

hasNextPage#

False if ChannelList component has loaded all the channels corresponding to filters.

Type
boolean

forwarded from ChannelList props
ListHeaderComponent#

Rendered when provided if the channel list is not empty via the ListHeaderComponent prop on the FlatList.

Type
component

loadingChannels#

True if ChannelList component is loading the first page of channels.

Type
boolean

forwarded from ChannelList props
loadMoreThreshold#

Sets the onEndReachedThreshold of the underlying FlatList.

TypeDefault
number2

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 is true.

Type
boolean

loadNextPage#

Function to load next page for the ChannelList component.

Type
function

forwarded from ChannelList props
maxUnreadCount#

Max number to display within unread notification badge. The value cannot be higher than 255, which is the limit on backend side.

TypeDefault
number255

forwarded from ChannelList props
numberOfSkeletons#

The number of Skeleton items to display in the LoadingIndicator.

TypeDefault
number6

forwarded from ChannelList props
onSelect#

Function called when a user presses an item in the ChannelList. The function is called with the Channel instance corresponding to the list item as the only parameter. This callback is often used for navigating to a channel screen.

Example#

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

A Channel instance is not serializable and will therefore raise warnings if passed as a param through navigation to another screen.

Type
function
ParameterDescription
channelChannel instance

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 prop of underlying FlatList component of ChannelList.

Type
boolean

refreshList#

Function to manually resync or refresh the channels in ChannelList component.

note

Calling refreshList will trigger a RefreshControl on underlying FlatList component.

Type
function

reloadList#

Function to manually reload the channels in ChannelList component.

note

Calling reloadList will wipe out the existing list of channels and show a loading indicator until new results are ready.

Type
function

forwarded from ChannelList props
setFlatListRef#

Callback function to access the underlying FlatList ref.

Example#

const flatListRef = useRef();

<ChannelList setFlatListRef={ref => (flatListRef.current = ref)} />;
Type
function
ParameterDescription
refFlatList ref

forwarded from ChannelList props
EmptyStateIndicator#

Rendered when the channel list is empty and not loading via the ListEmptyComponent prop on the FlatList.

TypeDefault
componentEmptyStateIndicator

forwarded from ChannelList props
FooterLoadingIndicator#

Rendered when loadingNextPage from ChannelsContext is true via the ListFooterComponent prop on the FlatList.

TypeDefault
componentChannelListFooterLoadingIndicator

forwarded from ChannelList props
HeaderErrorIndicator#

Rendered when error from ChannelsContext is true.

TypeDefault
componentChannelListHeaderErrorIndicator

forwarded from ChannelList props
HeaderNetworkDownIndicator#

Rendered when isOnline from ChatContext is false.

TypeDefault
componentChannelListHeaderNetworkDownIndicator

forwarded from ChannelList props
LoadingErrorIndicator#

Rendered when error from ChannelsContext is true, and the channel list is empty and not loading.

TypeDefault
componentLoadingErrorIndicator

forwarded from ChannelList props
LoadingIndicator#

Rendered when the channel list is empty and loading via the ListEmptyComponent prop on the FlatList.

TypeDefault
componentChannelListLoadingIndicator

forwarded from ChannelList props
Preview#

List item rendered by the underlying FlatList.

TypeDefault
componentChannelPreviewMessenger

forwarded from ChannelList props
PreviewAvatar#

Avatar component rendered within Preview.

TypeDefault
componentChannelAvatar

forwarded from ChannelList props
PreviewMessage#

Message component rendered within Preview.

TypeDefault
componentChannelPreviewMessage

forwarded from ChannelList props
PreviewStatus#

Status component rendered within Preview.

TypeDefault
componentChannelPreviewStatus

forwarded from ChannelList props
PreviewTitle#

Title component rendered within Preview.

TypeDefault
componentChannelPreviewTitle

forwarded from ChannelList props
PreviewUnreadCount#

Unread count component rendered within Preview.

TypeDefault
componentChannelPreviewUnreadCount

forwarded from ChannelList props
Skeleton#

Row item rendered in the LoadingIndicator.

TypeDefault
componentSkeleton

Did you find this page helpful?