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
Channel
MessageComposer
- MessageComposerAPIContext
Chat
OverlayProvider
ThreadListContext
- ThreadListItemContext
MessageSimple
- MessageContext
For Debugging using Flipper Plugin
- DebugContext

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

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.