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

• ChannelList

  • ChannelsContext

• Channel

  • ChannelContext
  • ChannelStateContext
  • KeyboardContext
  • MessageInputContext
  • MessagesContext
  • PaginatedMessageListContext
  • AttachmentPickerContext
  • ThreadContext
  • TypingContext
  • OwnCapabilitiesContext

• MessageComposer

  • MessageComposerAPIContext

• Chat

  • ChatContext
  • ThemeContext
  • TranslationContext

• OverlayProvider

  • ImageGalleryContext
  • OverlayContext
  • ThemeContext
  • TranslationContext

• ThreadList

  • ThreadsContext
  • ThreadListItemContext

• CreatePollContent

  • CreatePollContentContext

• Poll

  • PollContext

• MessageItemView

  • MessageContext

• BottomSheetModal

  • BottomSheetContext

• For Debugging using Flipper Plugin

  • DebugContext

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.

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