# ThreadsContext

`ThreadsContext` is provided by [`ThreadList`](/chat/docs/sdk/react-native/v8/ui-components/thread-list/). If you are not familiar with the React Context API, see the [React docs](https://reactjs.org/docs/context.html).

`ThreadsContext` must be used within [`Chat`](/chat/docs/sdk/react-native/v8/core-components/chat/) because it depends on [`ChatContext`](/chat/docs/sdk/react-native/v8/contexts/chat-context/).

## 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`:

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

const value = useContext(ThreadsContext);
```

Alternatively, use the `useThreadsContext` hook to consume `ThreadsContext`.

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

const value = useThreadsContext();
```

## Value

### `isLoading` \*

Whether threads are currently loading.

| Type    | Default |
| ------- | ------- |
| boolean | false   |

### `isLoadingMore` \*

Whether the next page of threads is loading.

| Type    | Default |
| ------- | ------- |
| boolean | false   |

### `threads` \*

Array of [Thread](https://github.com/GetStream/stream-chat-js/blob/master/src/thread.ts) instances used to render `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](https://reactnavigation.org/docs/use-is-focused/)) for lazy loading purposes.

| Type    |
| ------- |
| boolean |

Example:

```tsx
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`](https://reactnative.dev/docs/flatlist#props) that can be used to override the default ones provided in the `ThreadList`.

| Type   |
| ------ |
| object |

### `loadMore`

Loads 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](/chat/docs/sdk/react-native/v8/core-components/channel/#thread/) to the `Channel` component.

| Type   |
| ------ |
| object |

The `threadInstance` property is an instance of the [`Thread` class](https://github.com/GetStream/stream-chat-js/blob/master/src/thread.ts).

The `thread` property is a reference to the parent message of the thread.

#### `channel`

Channel instance from the Stream Chat client.

| Type                                                |
| --------------------------------------------------- |
| [Channel](/chat/docs/javascript/creating_channels/) |


### `ThreadListEmptyPlaceholder`

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

| Type          | Default                                                                                                                                                    |
| ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ComponentType | [`DefaultThreadListEmptyPlaceholder`](https://github.com/GetStream/stream-chat-react-native/v8/blob/main/package/src/components/ThreadList/ThreadList.tsx) |

### `ThreadListItem`

A custom UI component used to render each item within the `ThreadList`. It will override the UI of the [default `ThreadListItem`](https://github.com/GetStream/stream-chat-react-native/v8/blob/main/package/src/components/ThreadList/ThreadListItem.tsx) while still keeping all of the data.

| Type          | Default                                                                                                                                     |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
| ComponentType | [`ThreadListItem`](https://github.com/GetStream/stream-chat-react-native/v8/blob/main/package/src/components/ThreadList/ThreadListItem.tsx) |

Example usage:

```tsx
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`](https://github.com/GetStream/stream-chat-react-native/v8/blob/main/package/src/components/ThreadList/ThreadList.tsx) |

### `ThreadListLoadingMoreIndicator`

A custom UI component used to render the loading indicator when `isLoadingNext` is `true`.

| Type          | Default                                                                                                                                                        |
| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ComponentType | [`DefaultThreadListLoadingMoreIndicator`](https://github.com/GetStream/stream-chat-react-native/v8/blob/main/package/src/components/ThreadList/ThreadList.tsx) |

### `ThreadListUnreadBanner`

A custom UI component used to render the unread threads banner at the top of the list.

| Type          | Default                                                                                                                                                     |
| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ComponentType | [`ThreadListUnreadBanner`](https://github.com/GetStream/stream-chat-react-native/v8/blob/main/package/src/components/ThreadList/ThreadListUnreadBanner.tsx) |


---

This page was last updated at 2026-04-17T17:33:45.119Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react-native/v8/contexts/threads-context/](https://getstream.io/chat/docs/sdk/react-native/v8/contexts/threads-context/).