Skip to main content
Version: v3


OverlayContext is provided by OverlayProvider component. If you are not familiar with React Context API, please read about it on React docs.

Basic Usage

OverlayContext can be consumed by any of the child component of OverlayProvider component as following:

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

const { setBlurType, setOverlay } = useContext(OverlayContext);

Alternatively, you can also use useOverlayContext hook provided by library to consume OverlayContext.

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

const { setBlurType, setOverlay } = useOverlayContext();



Current active overlay. Overlay gets rendered in following cases

  • 'alert' - For delete message confirmation alert box
  • 'gallery' - When image viewer/gallery is opened
  • 'message' - When message overlay is opened by long pressing a message
  • 'none' - Default value
enum('alert', 'gallery', 'message', 'none')


Function to set the blur background type for overlay - 'light' | 'dark' | undefined

(blurType) => void


Setter for overlay. You can use this setter to show the overlay. Please make sure to explicitly relevant blur background type for overlay by using setBlurType.

(overlay) => void

Did you find this page helpful?