import { useContext } from 'react';
import { ThreadsContext } from 'stream-chat-react-native';
const value = useContext(ThreadsContext);
ThreadsContext
The ThreadsContext
is provided by the ThreadList
component. If you are not familiar with React Context API, please read about it on React docs.
The ThreadsContext
needs to be used within the Chat
component as it depends on the ChatContext
.
Basic Usage
The ThreadsContext
can be consumed by any of the child components of Chat
as following:
Alternatively, you can also use useThreadsContext
hook provided by library to consume ThreadContext
.
import { useThreadsContext } from 'stream-chat-react-native';
const value = useThreadsContext();
Value
isLoading
*
A boolean flag that lets us know whether the threads are currently loading or not.
Type | Default |
---|---|
boolean | false |
isLoadingMore
*
A boolean flag that lets us whether the next page of threads is being loaded or not.
Type | Default |
---|---|
boolean | false |
threads
*
An array of Thread instances that are used as input for rendering the ThreadList
.
Type |
---|
array |
isFocused
A boolean indicating if the ThreadList
is currently in focus or not. Essentially a flag that lets us know whether the component is present in the viewport. Whenever present, it controls when updates to the ThreadList
are active and when they are not. Best used in conjunction with hooks from popular navigation libraries (such as useIsFocused()
from React Navigation) for lazy loading purposes.
Type |
---|
boolean |
Example:
import React from 'react';
import { useIsFocused } from '@react-navigation/native';
import { ThreadList } from 'stream-chat-react-native';
export const ThreadListScreen = () => {
const isFocused = useIsFocused();
return <ThreadList isFocused={isFocused} />;
};
additionalFlatListProps
An object containing FlatListProps
that can be used to override the default ones provided in the ThreadList
.
Type |
---|
object |
loadMore
A method that can be invoked to load more threads
. Returns a promise.
Type |
---|
() => Promise<void> |
onThreadSelect
A method that will be used as a callback whenever a thread in the list is clicked. As an example, it can be used to navigate to a thread screen displaying the thread.
Type |
---|
(thread, channel) => Promise<void> |
The arguments passed are as follows:
thread
An object containing two properties, thread
and threadInstance
. This entire object can be passed as the thread
prop to the Channel
component.
Type |
---|
object |
The threadInstance
property is an instance of the Thread
class.
The thread
property is a reference to the parent message of the thread.
channel
Channel instance from the StreamChat client.
Type |
---|
Channel |
ThreadListEmptyPlaceholder
A custom UI component used to render the empty placeholder if there are no available threads.
Type | Default |
---|---|
ComponentType | DefaultThreadListEmptyPlaceholder |
ThreadListItem
A custom UI component used to render each item within the ThreadList
. It will override the UI of the default ThreadListItem
while still keeping all of the data.
Type | Default |
---|---|
ComponentType | ThreadListItem |
Example usage:
import { Text, TouchableOpacity } from 'react-native';
import {
OverlayProvider,
Chat,
ThreadList,
useThreadListItemContext,
useThreadsContext,
} from 'stream-chat-react-native';
const ThreadListItem = () => {
const { parentMessage, thread, channel } = useThreadListItemContext();
const { onThreadSelect } = useThreadsContext();
return (
<TouchableOpacity onPress={() => onThreadSelect(thread, channel)}>
<Text>{parentMessage?.text || 'Text not available !'}</Text>
</TouchableOpacity>
);
};
const App = () => {
return (
<OverlayProvider>
<Chat client={client}>
<ThreadList ThreadListItem={ThreadListItem} />
</Chat>
</OverlayProvider>
);
};
ThreadListLoadingIndicator
A custom UI component used to render the loading indicator when isLoading
is true
.
Type | Default |
---|---|
ComponentType | DefaultThreadListLoadingIndicator |
ThreadListLoadingMoreIndicator
A custom UI component used to render the loading indicator when isLoadingNext
is true
.
Type | Default |
---|---|
ComponentType | DefaultThreadListLoadingMoreIndicator |
ThreadListUnreadBanner
A custom UI component used to render the unread threads banner at the top of the list.
Type | Default |
---|---|
ComponentType | ThreadListUnreadBanner |