OverlayContext

OverlayContext tells the components inside OverlayProvider whether the image gallery is open, and lets them open and close it. Read it with useOverlayContext().

The message menu isn't tracked here. It has a store of its own, overlayStore, and useHasActiveId() returns true while a message's menu is open. See Overlays and bottom sheets.

Best practices

  • Call useOverlayContext() only inside OverlayProvider. It throws anywhere else.
  • Let the SDK open the gallery. A press on an image or a video in a message fills the gallery's state store with the message's media and then calls setOverlay('gallery'). Calling setOverlay('gallery') yourself shows whatever the store holds.
  • Read overlayOpacity in worklets and animated styles, not during render. It's a Reanimated shared value.

Basic usage

This component hides the status bar while the gallery is open:

src/GalleryStatusBar.tsx
import { StatusBar } from "react-native";
import { useOverlayContext } from "stream-chat-react-native";

export const GalleryStatusBar = () => {
  const { overlay } = useOverlayContext();

  return <StatusBar hidden={overlay === "gallery"} />;
};

Render it anywhere inside OverlayProvider. The value changes when the gallery opens or closes, so the component re-renders then.

Values

Value Type Description
overlay Overlay 'gallery' while the image gallery is open, 'none' otherwise. Overlay also has 'alert', which no SDK component sets. It starts as value.overlay of OverlayProvider, or 'none'.
overlayOpacity SharedValue<number> Animates to 1 when an overlay opens and to 0 when it closes. The gallery's swipe-to-close gesture writes it as the user drags.
setOverlay React.Dispatch<React.SetStateAction<Overlay>> Opens or closes an overlay. setOverlay('none') closes the gallery, as the gallery's back button and the Android back button do.
style DeepPartial<Theme> | undefined value.style of OverlayProvider, as passed: the theme before it's merged over the default. Read the merged theme with useTheme().

Overlay is 'alert' | 'gallery' | 'none'.

Related hooks

  • useOverlayContext() returns the value above, and throws outside OverlayProvider.
  • useImageGalleryContext() returns the gallery's state store, imageGalleryStateStore, with the media the gallery shows and the selected one.
  • useHasActiveId() returns true while the menu of a message is open.