ThreadList

ThreadList lists the threads the current user takes part in. It reads client.threads, the thread manager, and renders a row for each thread in a React Native FlatList. Thread UI describes what it shows, and Replies and threads how the list loads and stays current.

Best practices

• Render it anywhere inside Chat. It needs no Channel.
• Pass the focus state of its screen as isFocused, such as useIsFocused() from React Navigation. The list keeps client.threads active only while it's true, so a hidden screen doesn't keep reloading the list.
• Render one ThreadList at a time. Each one deactivates client.threads when it unmounts or loses focus, even while another list is still on screen.
• Open the thread in onThreadSelect, for example by navigating to a screen that renders Thread with it. Without onThreadSelect, tapping a row does nothing.
• Change the rows through the ThreadListItem override key, and keep them light: rows mount and unmount as the user scrolls.

Basic usage

import { useIsFocused } from "@react-navigation/native";
import type { Thread } from "stream-chat";
import { ThreadList } from "stream-chat-react-native";

export const ThreadsScreen = ({
  openThread,
}: {
  openThread: (thread: Thread) => void;
}) => {
  const isFocused = useIsFocused();

  return <ThreadList isFocused={isFocused} onThreadSelect={openThread} />;
};

openThread gets the Thread instance of the row. Navigate with it, and render <Thread thread={thread}> on the thread's screen, as Moving between channels, threads and messages shows. The thread's channel is thread.channel.

ThreadList renders, from top to bottom:

• ThreadListUnreadBanner, while threads outside the loaded list have new replies;
• the rows, one for each thread in client.threads.paginator;
• ThreadListLoadingMoreIndicator after the last row while the next page loads, or ThreadListEmptyPlaceholder, "Reply to a message to start a thread", when there are no threads;
• a NotificationList for the list's notifications.

While the first page loads, it renders ThreadListLoadingIndicator, ten placeholder rows, instead of the banner and the rows. It loads the next page when the user scrolls to the end.

UI customization

ThreadList reads these keys from WithComponents. Thread UI shows a replacement row.

The banner shows "2 new threads" while client.threads.state lists unseen threads, and tapping it reloads the list with client.threads.reload(). When the reload fails, it says so, and tapping it tries again.

Props

When the list unmounts, it deactivates client.threads.

ThreadsContext

ThreadList provides ThreadsContext to everything it renders. useThreadsContext() reads it, and throws outside a ThreadList.

ThreadsContext, ThreadsProvider and the ThreadsContextValue type are exported. A ThreadListComponent of your own reads the threads and the loading states from it:

import { FlatList, Pressable, Text } from "react-native";
import type { Thread } from "stream-chat";
import { useThreadsContext } from "stream-chat-react-native";

const keyExtractor = (thread: Thread) => thread.id;

export const CompactThreadList = () => {
  const { isLoading, loadMore, onThreadSelect, threads } = useThreadsContext();

  if (isLoading) return <Text>Loading threads...</Text>;

  return (
    <FlatList
      data={threads}
      keyExtractor={keyExtractor}
      onEndReached={loadMore}
      renderItem={({ item }) => (
        <Pressable onPress={() => onThreadSelect?.(item)}>
          <Text numberOfLines={1}>{item.id}</Text>
        </Pressable>
      )}
    />
  );
};

Register it as ThreadListComponent. It replaces the banner too, so render ThreadListUnreadBanner from useComponentsContext() to keep it. A row of your own reads the thread's state with useStateStore(thread.state, selector); see Thread and thread manager.

Related hooks

client.threads.state holds unreadThreadCount and unseenThreadIds, and client.threads.paginator.state the threads, isLoading and lastQueryError. See useThreadsContext and Thread and thread manager.