# Contexts Overview

Stream Chat React Native uses contexts to distribute data, functions, and components. Use them to build reusable custom components that replace the defaults.

## Best Practices

- Use hooks (`useChannelContext`, `useMessageContext`, etc.) instead of prop drilling.
- Keep context consumption as shallow as possible to reduce re-renders.
- Prefer `WithComponents` for UI component overrides; use `useComponentsContext()` to read them.
- Use TypeScript generics to keep custom data types consistent.
- Avoid mixing contexts across providers (e.g., `OverlayProvider` themes won't affect Chat overlays).

### Providers

Most contexts are created by higher-level components. `OverlayProvider`, `Chat`, and `Channel` expose them via hooks (or HOCs).

- `WithComponents`
- [`ComponentsContext`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/contexts/componentsContext/ComponentsContext.tsx)
- `ChannelList`
- [`ChannelsContext`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/contexts/channelsContext/ChannelsContext.tsx)
- `Channel`
- [`ChannelContext`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/contexts/channelContext/ChannelContext.tsx)
- [`ChannelStateContext`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/contexts/channelsStateContext/ChannelsStateContext.tsx)
- [`KeyboardContext`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/contexts/keyboardContext/KeyboardContext.tsx)
- [`MessageInputContext`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/contexts/messageInputContext/MessageInputContext.tsx)
- [`MessagesContext`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/contexts/messagesContext/MessagesContext.tsx)
- [`PaginatedMessageListContext`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/contexts/paginatedMessageListContext/PaginatedMessageListContext.tsx)
- [`AttachmentPickerContext`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/contexts/attachmentPickerContext/AttachmentPickerContext.tsx)
- [`ThreadContext`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/contexts/threadContext/ThreadContext.tsx)
- [`TypingContext`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/contexts/typingContext/TypingContext.tsx)
- [`OwnCapabilitiesContext`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/contexts/ownCapabilitiesContext/OwnCapabilitiesContext.tsx)

- `MessageComposer`
- [`MessageComposerAPIContext`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/contexts/messageComposerContext/MessageComposerAPIContext.tsx)
- `Chat`
- [`ChatContext`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/contexts/chatContext/ChatContext.tsx)
- [`ThemeContext`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/contexts/themeContext/ThemeContext.tsx)
- [`TranslationContext`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/contexts/translationContext/TranslationContext.tsx)
- `OverlayProvider`
- [`ImageGalleryContext`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/contexts/imageGalleryContext/ImageGalleryContext.tsx)
- [`OverlayContext`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/contexts/overlayContext/OverlayContext.tsx)
- [`ThemeContext`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/contexts/themeContext/ThemeContext.tsx)
- [`TranslationContext`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/contexts/translationContext/TranslationContext.tsx)

- `ThreadList`
- [`ThreadsContext`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/contexts/threadsContext/ThreadsContext.tsx)
- [`ThreadListItemContext`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/contexts/threadsContext/ThreadListItemContext.tsx)
- `CreatePollContent`
- [`CreatePollContentContext`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/contexts/pollContext/createPollContentContext.tsx)
- `Poll`
- [`PollContext`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/contexts/pollContext/pollContext.tsx)
- `MessageItemView`
- [`MessageContext`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/contexts/messageContext/MessageContext.tsx)
- `BottomSheetModal`
- [`BottomSheetContext`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/contexts/bottomSheetContext/BottomSheetContext.tsx)
- For Debugging using Flipper Plugin
- [`DebugContext`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/contexts/debugContext/DebugContext.tsx)

The channel-details providers are not created by a core component — mount them yourself around your channel-details UI:

- `ChannelDetailsContextProvider`
- [`ChannelDetailsContext`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/contexts/channelDetailsContext/channelDetailsContext.tsx)
- `ChannelAddMembersProvider`
- [`ChannelAddMembersContext`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/contexts/channelAddMembersContext/ChannelAddMembersContext.tsx)
- `ChannelEditDetailsProvider`
- [`ChannelEditDetailsContext`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/contexts/channelEditDetailsContext/ChannelEditDetailsContext.tsx)
- `ChannelMemberListProvider`
- [`ChannelMemberListContext`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/contexts/channelMemberListContext/ChannelMemberListContext.tsx)
- `ChannelFileAttachmentListProvider`
- [`ChannelFileAttachmentListContext`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/contexts/channelFileAttachmentListContext/ChannelFileAttachmentListContext.tsx)
- `ChannelPinnedMessageListProvider`
- [`ChannelPinnedMessageListContext`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/contexts/channelPinnedMessageListContext/ChannelPinnedMessageListContext.tsx)
- `ChannelMediaListProvider`
- [`ChannelMediaListContext`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/contexts/channelMediaListContext/ChannelMediaListContext.tsx)

These contexts provide most of the SDK's functions and data. `ComponentsContext` provides all overridable UI components. Start here when building custom components.

Most components receive few or no props; use contexts to pull the data you need. Use `useComponentsContext()` to access UI component overrides.

## Hooks

Use the provided hooks to access context values.

| Context                            | Hook                                                                                                                                                 |
| ---------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
| `AttachmentPickerContext`          | `useAttachmentPickerContext`                                                                                                                         |
| `BottomSheetContext`               | `useBottomSheetContext`                                                                                                                              |
| `ComponentsContext`                | `useComponentsContext`                                                                                                                               |
| `ChannelContext`                   | `useChannelContext`                                                                                                                                  |
| `ChannelFileAttachmentListContext` | `useChannelFileAttachmentListContext`                                                                                                                |
| `ChannelMediaListContext`          | `useChannelMediaListContext`                                                                                                                         |
| `ChannelMemberListContext`         | `useChannelMemberListContext`                                                                                                                        |
| `ChannelPinnedMessageListContext`  | `useChannelPinnedMessageListContext`                                                                                                                 |
| `ChannelsContext`                  | `useChannelsContext`                                                                                                                                 |
| `ChannelStateContext`              | [`useChannelState`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/contexts/channelsStateContext/useChannelState.ts) |
| `ChatContext`                      | `useChatContext`                                                                                                                                     |
| `CreatePollContentContext`         | `useCreatePollContentContext`                                                                                                                        |
| `DebugContext`                     | `useDebugContext`                                                                                                                                    |
| `ImageGalleryContext`              | `useImageGalleryContext`                                                                                                                             |
| `KeyboardContext`                  | `useKeyboardContext`                                                                                                                                 |
| `MessageComposerAPIContext`        | `useMessageComposerAPIContext`                                                                                                                       |
| `MessageContext`                   | `useMessageContext`                                                                                                                                  |
| `MessageInputContext`              | `useMessageInputContext`                                                                                                                             |
| `MessagesContext`                  | `useMessagesContext`                                                                                                                                 |
| `OverlayContext`                   | `useOverlayContext`                                                                                                                                  |
| `OwnCapabilitiesContext`           | `useOwnCapabilitiesContext`                                                                                                                          |
| `PaginatedMessageListContext`      | `usePaginatedMessageListContext`                                                                                                                     |
| `PollContext`                      | `usePollContext`                                                                                                                                     |
| `ThreadContext`                    | `useThreadContext`                                                                                                                                   |
| `ThreadListItemContext`            | `useThreadListItemContext`                                                                                                                           |
| `ThreadsContext`                   | `useThreadsContext`                                                                                                                                  |
| `ThemeContext`                     | `useTheme`                                                                                                                                           |
| `TranslationContext`               | `useTranslationContext`                                                                                                                              |
| `TypingContext`                    | `useTypingContext`                                                                                                                                   |

>
> **Note:** If you use TypeScript, pass your custom data types to the hooks.
>

HOCs are also available for class components.

### Usage

UI component overrides are provided via `WithComponents` and read from `useComponentsContext()`. Other data and callbacks are available through the relevant context hooks (e.g., `useMessageContext`, `useChannelContext`).

This example shows a custom `MessageStatus` component that consumes context, registered via `WithComponents`:

```tsx
import { WithComponents, useMessageContext } from "stream-chat-react-native";

const CustomMessageStatus = () => {
  const { message } = useMessageContext();
  return <Text>{message.readBy}</Text>;
};

// Register the override via WithComponents
<WithComponents overrides={{ MessageStatus: CustomMessageStatus }}>
  <Channel channel={channel}>
    <MessageList />
    <MessageComposer />
  </Channel>
</WithComponents>;
```

A simple custom `MessageStatus` component that pulls `message` from `useMessageContext` and returns `readBy` as text. The override is registered via `WithComponents` and internally read from `useComponentsContext()`.

>
> **Note:** Component overrides that were previously passed as props to `Channel`, `ChannelList`, or other components are now provided via `WithComponents` and consumed via `useComponentsContext()`. Data and callback props remain on their respective components.
>

---

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