ThreadList

A component used to render threads along with the ability to do an action when clicked. Needs to be structured inside a Chat component.

General Usage

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

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

Props

additionalFlatListProps

An object containing FlatListProps that can be used to override the default ones provided in the ThreadList.

Type
object

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.

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

ThreadListItem

ThreadListEmptyPlaceholder

A custom UI component used to render the empty placeholder if there are no available threads.

Type	Default
ComponentType	DefaultThreadListEmptyPlaceholder

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

ThreadList

A custom UI component used to render the entire ThreadList.

Type	Default
ComponentType	ThreadList