import { useContext } from 'react';
import { ChannelsContext } from 'stream-chat-react-native';
const { channels, reloadList } = useContext(ChannelsContext);
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:
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
additionalFlatListProps
Additional props provided to the underlying FlatList.
Example
const flatListProps = { bounces: true };
<ChannelList additionalFlatListProps={flatListProps} />;
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 |
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 |
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 |
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
items to display in the 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 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 */ }}
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.
Calling refreshList
will trigger a RefreshControl on underlying FlatList component.
Type |
---|
function |
reloadList
Function to manually reload the channels in ChannelList
component.
Calling reloadList
will wipe out the existing list of channels and show a loading indicator until new results are ready.
Type |
---|
function |
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 |
EmptyStateIndicator
Rendered when the channel list is empty and not loading via the ListEmptyComponent prop on the FlatList.
Type | Default |
---|---|
component | EmptyStateIndicator |
FooterLoadingIndicator
Rendered when loadingNextPage
from ChannelsContext
is true via the ListFooterComponent
prop on the FlatList.
Type | Default |
---|---|
component | ChannelListFooterLoadingIndicator |
HeaderErrorIndicator
Rendered when error
from ChannelsContext
is true.
Type | Default |
---|---|
component | ChannelListHeaderErrorIndicator |
HeaderNetworkDownIndicator
Rendered when isOnline
from ChatContext
is false.
Type | Default |
---|---|
component | ChannelListHeaderNetworkDownIndicator |
LoadingErrorIndicator
Rendered when error
from ChannelsContext
is true, and the channel list is empty and not loading.
Type | Default |
---|---|
component | LoadingErrorIndicator |
LoadingIndicator
Rendered when the channel list is empty and loading via the ListEmptyComponent prop on the FlatList.
Type | Default |
---|---|
component | ChannelListLoadingIndicator |
Preview
List item rendered by the underlying FlatList.
Type | Default |
---|---|
component | ChannelPreviewMessenger |
PreviewAvatar
Avatar component rendered within Preview
.
Type | Default |
---|---|
component | ChannelAvatar |
PreviewMessage
Message component rendered within Preview
.
Type | Default |
---|---|
component | ChannelPreviewMessage |
PreviewStatus
Status component rendered within Preview
.
Type | Default |
---|---|
component | ChannelPreviewStatus |
PreviewTitle
Title component rendered within Preview
.
Type | Default |
---|---|
component | ChannelPreviewTitle |
PreviewUnreadCount
Unread count component rendered within Preview
.
Type | Default |
---|---|
component | ChannelPreviewUnreadCount |
Skeleton
Row item rendered in the LoadingIndicator
.
Type | Default |
---|---|
component | Skeleton |
- Basic Usage
- Value
- additionalFlatListProps
- channels
- error
- hasNextPage
- ListHeaderComponent
- loadingChannels
- loadMoreThreshold
- loadingNextPage
- loadNextPage
- maxUnreadCount
- numberOfSkeletons
- onSelect
- refreshing
- refreshList
- reloadList
- setFlatListRef
- EmptyStateIndicator
- FooterLoadingIndicator
- HeaderErrorIndicator
- HeaderNetworkDownIndicator
- LoadingErrorIndicator
- LoadingIndicator
- Preview
- PreviewAvatar
- PreviewMessage
- PreviewStatus
- PreviewTitle
- PreviewUnreadCount
- Skeleton