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

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

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.

---

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/).