ThemeContext

ThemeContext is provided by OverlayProvider and Chat. See the theming section for customization details. If you are not familiar with the React Context API, see the React docs.

Best Practices

• Use useTheme for consistent access and typings.
• Keep theme objects stable to avoid unnecessary re-renders.
• Override only the keys you need; rely on defaults for the rest.
• Apply theme at OverlayProvider when you want overlays to match.
• Keep theme logic separate from component render logic.

Basic Usage

Consume ThemeContext in any child of OverlayProvider or Chat.

import { useContext } from "react";
import { ThemeContext } from "stream-chat-react-native";

const {
  theme: {
    colors: { accent_red },
  },
} = useContext(ThemeContext);

Alternatively, use the useTheme hook.

import { useTheme } from "stream-chat-react-native";

const {
  theme: {
    colors: { accent_red },
  },
} = useTheme();

Value

theme

The default theme in theme.ts, merged with the theme you pass as style to OverlayProvider or Chat.