ChannelsContext
ChannelsContext
is provided by ChannelList
component. If you are not familiar with React Context API, please read about it on React docs.
#
Basic UsageChannelsContext
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();
#
Valueforwarded from ChannelList props additionalFlatListProps#
Additional props provided to the underlying FlatList.
#
Exampleconst flatListProps = { bounces: true };
<ChannelList additionalFlatListProps={flatListProps} />;
caution
Don't use additionalFlatListProps
to access the FlatList ref, use setFlatListRef
instead.
Type |
---|
object |
#
channelsArray of channels currently loaded within the ChannelList
component.
Type |
---|
array |
#
errorTrue 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 |
#
hasNextPageFalse 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. 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 |
#
loadingNextPageTrue 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 |
#
loadNextPageFunction 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.
#
ExampleonSelect={(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 |
#
refreshingTrue 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.
#
Exampleconst 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 |