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

Type	Default
number	2

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.

Type	Default
number	255

forwarded from ChannelList props

numberOfSkeletons

The number of Skeleton items to display in the LoadingIndicator.

Type	Default
number	6

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 parameter through navigation to another screen.

Type
function

Parameter	Description
channel	Channel 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 re-sync 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

Parameter	Description
ref	FlatList ref

forwarded from ChannelList props

EmptyStateIndicator

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

Type	Default
component	EmptyStateIndicator

forwarded from ChannelList props

FooterLoadingIndicator

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

Type	Default
component	ChannelListFooterLoadingIndicator

forwarded from ChannelList props

HeaderErrorIndicator

Rendered when error from ChannelsContext is true.

Type	Default
component	ChannelListHeaderErrorIndicator

forwarded from ChannelList props

HeaderNetworkDownIndicator

Rendered when isOnline from ChatContext is false.

Type	Default
component	ChannelListHeaderNetworkDownIndicator

forwarded from ChannelList props

LoadingErrorIndicator

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

Type	Default
component	LoadingErrorIndicator

forwarded from ChannelList props

LoadingIndicator

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

Type	Default
component	ChannelListLoadingIndicator

forwarded from ChannelList props

Preview

List item rendered by the underlying FlatList.

Type	Default
component	ChannelPreviewMessenger

forwarded from ChannelList props

PreviewAvatar

Avatar component rendered within Preview.

Type	Default
component	ChannelAvatar

forwarded from ChannelList props

PreviewMessage

Message component rendered within Preview.

Type	Default
component	ChannelPreviewMessage

forwarded from ChannelList props

PreviewStatus

Status component rendered within Preview.

Type	Default
component	ChannelPreviewStatus

forwarded from ChannelList props

PreviewTitle

Title component rendered within Preview.

Type	Default
component	ChannelPreviewTitle

forwarded from ChannelList props

PreviewUnreadCount

Unread count component rendered within Preview.

Type	Default
component	ChannelPreviewUnreadCount

forwarded from ChannelList props

Skeleton

Row item rendered in the LoadingIndicator.

Type	Default
component	Skeleton