Skip to main content
Version: v3

OverlayContext

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

Value​

overlay​

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
Type
enum('alert', 'gallery', 'message', 'none')

setBlurType​

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

Type
(blurType) => void

setOverlay​

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.

Type
(overlay) => void

Did you find this page helpful?