OverlayContext

OverlayContext is provided by OverlayProvider. If you are not familiar with the React Context API, see the React docs.

Best Practices

• Access OverlayContext via useOverlayContext for cleaner code.
• Keep overlay state centralized; avoid multiple overlay controllers in the tree.
• Use overlay enum values consistently to prevent unexpected UI states.
• Provide theme overrides at OverlayProvider when you need overlay UI to match app theme.
• Prefer context updates over direct component manipulation for overlay changes.

Basic Usage

Consume OverlayContext in any child of OverlayProvider:

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

const { setOverlay } = useContext(OverlayContext);

Alternatively, use the useOverlayContext hook.

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

const { setOverlay } = useOverlayContext();

Value

overlay

Current active overlay. Rendered for:

• 'alert' - For delete message confirmation alert box
• 'gallery' - When image viewer/gallery is opened
• 'none' - Default value

setOverlay

Setter for overlay. You can use this setter to show the overlay.

style

A theme object to customize the styles of SDK components. Detailed information on theming can be found in the customization documentation.