ThreadList

Renders threads and lets you handle selection. Must be rendered inside Chat.

Best Practices

  • Render inside Chat to ensure thread data and context are available.
  • Use onThreadSelect for navigation and keep it lightweight.
  • Provide empty and loading states for better UX.
  • Keep list items simple to maintain scroll performance.
  • Use additionalFlatListProps sparingly to avoid unexpected list behavior.

General Usage

import { OverlayProvider, Chat, ThreadList } from "stream-chat-react-native";

const App = () => {
  return (
    <OverlayProvider>
      <Chat client={client}>
        <ThreadList />
      </Chat>
    </OverlayProvider>
  );
};

Props

PropDescriptionType
additionalFlatListPropsAn object containing FlatListProps that can be used to override the default ones provided in the ThreadList.object
onThreadSelectA callback invoked whenever a thread in the list is clicked. Can be used to navigate to a thread screen. The callback receives (thread, channel) where thread contains thread (parent message) and threadInstance (Thread class) properties.(thread, channel) => Promise<void>
isFocusedWhether the ThreadList is currently in focus. Controls when updates to the list are active. Best used with hooks from navigation libraries (such as useIsFocused() from React Navigation) for lazy loading.boolean

UI Component Props

PropDescriptionType
ThreadListItemCustom component to render a single thread item. Defaults to DefaultThreadListItem.ComponentType
ThreadListEmptyPlaceholderCustom component to render the empty placeholder when there are no threads. Defaults to DefaultThreadListEmptyPlaceholder.ComponentType
ThreadListLoadingIndicatorCustom component to render the loading indicator when isLoading is true. Defaults to DefaultThreadListLoadingIndicator.ComponentType
ThreadListLoadingMoreIndicatorCustom component to render the loading indicator when isLoadingNext is true. Defaults to DefaultThreadListLoadingMoreIndicator.ComponentType
ThreadListUnreadBannerCustom component to render the unread threads banner at the top of the list. Defaults to ThreadListUnreadBanner.ComponentType
ThreadListCustom component to render the entire ThreadList. Defaults to ThreadList.ComponentType

Examples

Using isFocused with React Navigation

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} />;
};
Previous
useMutedUsers
Next
ThreadListItem