ThreadsContext

ThreadsContext is provided by ThreadList. If you are not familiar with the React Context API, see the React docs.

ThreadsContext must be used within Chat because it depends on ChatContext.

Best Practices

  • Use useThreadsContext inside Chat to ensure context availability.
  • Check isLoading/isLoadingMore before triggering pagination.
  • Use onThreadSelect for navigation and keep it lightweight.
  • Provide empty and loading UI for a clear UX.
  • Avoid mutating threads directly; rely on context updates.

Basic Usage

Consume ThreadsContext in any child of Chat:

import { useContext } from "react";
import { ThreadsContext } from "stream-chat-react-native";

const value = useContext(ThreadsContext);

Alternatively, use the useThreadsContext hook to consume ThreadsContext.

import { useThreadsContext } from "stream-chat-react-native";

const value = useThreadsContext();

Values

ValueDescriptionType
isLoading *Whether threads are currently loading. Defaults to false.boolean
isLoadingNext *Whether the next page of threads is loading. Defaults to false.boolean
threads *Array of Thread instances used to render ThreadList.array
isFocusedA 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.boolean
additionalFlatListPropsAn object containing FlatListProps that can be used to override the default ones provided in the ThreadList.object
loadMoreLoads more threads. Returns a promise.() => Promise<void>
onThreadSelectA 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.(thread, channel) => Promise<void>

Examples

isFocused

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} />;
};

onThreadSelect

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 Stream Chat client.

Type
Channel

ThreadListItem

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>
  );
};
Previous
TypingContext
Next
ThreadListItemContext