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?