Skip to content

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

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

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
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:

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.