# ThreadsContext

`ThreadsContext` is provided by [`ThreadList`](/chat/docs/sdk/react-native/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/core-components/chat/) because it depends on [`ChatContext`](/chat/docs/sdk/react-native/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();
```

## Values

| Value                     | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Type                                 |
| ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ |
| `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](https://github.com/GetStream/stream-chat-js/blob/master/src/thread.ts) instances used to render `ThreadList`.                                                                                                                                                                                                                                                                                                                                      | `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. | `boolean`                            |
| `additionalFlatListProps` | An object containing [`FlatListProps`](https://reactnative.dev/docs/flatlist#props) that can be used to override the default ones provided in the `ThreadList`.                                                                                                                                                                                                                                                                                                      | `object`                             |
| `loadMore`                | Loads more `threads`. Returns a promise.                                                                                                                                                                                                                                                                                                                                                                                                                             | `() => 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.                                                                                                                                                                                                                                                                                               | `(thread, channel) => Promise<void>` |

## Examples

### isFocused

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

### 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](/chat/docs/sdk/react-native/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/) |

### ThreadListItem

```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>
  );
};
```


---

This page was last updated at 2026-05-12T09:03:39.335Z.

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