# 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 `Channel`-level customization; most UI overrides flow through it.
- 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).

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

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

- [`ThreadListContext`](https://github.com/GetStream/stream-chat-react-native/v8/blob/develop/package/src/contexts/threadsContext/ThreadsContext.tsx)
  - [`ThreadListItemContext`](https://github.com/GetStream/stream-chat-react-native/v8/blob/develop/package/src/contexts/threadsContext/ThreadListItemContext.tsx)
- `MessageSimple`
  - [`MessageContext`](https://github.com/GetStream/stream-chat-react-native/v8/blob/develop/package/src/contexts/messageContext/MessageContext.tsx)
- For Debugging using Flipper Plugin
  - [`DebugContext`](https://github.com/GetStream/stream-chat-react-native/v8/blob/develop/package/src/contexts/debugContext/DebugContext.tsx)

These contexts provide most of the SDK’s components, functions, and data. Start here when building custom components.

Most components receive few or no props; use contexts to pull the data you need.

## Hooks

Use the provided hooks to access context values.

| Context                       | Hook                                                                                                                                                    |
| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `AttachmentPickerContext`     | `useAttachmentPickerContext`                                                                                                                            |
| `ChannelContext`              | `useChannelContext`                                                                                                                                     |
| `ChannelsContext`             | `useChannelsContext`                                                                                                                                    |
| `ChannelStateContext`         | [`useChannelState`](https://github.com/GetStream/stream-chat-react-native/v8/blob/develop/package/src/contexts/channelsStateContext/useChannelState.ts) |
| `ChatContext`                 | `useChatContext`                                                                                                                                        |
| `DebugContext`                | `useDebugContext`                                                                                                                                       |
| `ImageGalleryContext`         | `useImageGalleryContext`                                                                                                                                |
| `KeyboardContext`             | `useKeyboardContext`                                                                                                                                    |
| `MessageContext`              | `useMessageContext`                                                                                                                                     |
| `MessageInputContext`         | `useMessageInputContext`                                                                                                                                |
| `MessagesContext`             | `useMessagesContext`                                                                                                                                    |
| `OverlayContext`              | `useOverlayContext`                                                                                                                                     |
| `OwnCapabilitiesContext`      | `useOwnCapabilitiesContext`                                                                                                                             |
| `PaginatedMessageListContext` | `usePaginatedMessageListContext`                                                                                                                        |
| `ThreadContext`               | `useThreadContext`                                                                                                                                      |
| `ThemeContext`                | `useTheme`                                                                                                                                              |
| `TranslationContext`          | `useTranslationContext`                                                                                                                                 |
| `TypingContext`               | `useTypingContext`                                                                                                                                      |

<admonition type="note">

If you use TypeScript, pass your custom data types to the hooks.

</admonition>

HOCs are also available for class components.

### Usage

Most UI customization flows through `Channel`. This example shows how a custom component consumes context when passed as a `Channel` prop.

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

A simple custom `MessageStatus` component that pulls `message` from `useMessageContext` and returns `readBy` as text.


---

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

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