# OverlayContext

`OverlayContext` is provided by [`OverlayProvider`](/chat/docs/sdk/react-native/core-components/overlay-provider/). If you are not familiar with the React Context API, see the [React docs](https://reactjs.org/docs/context.html).

## 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`:

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

const { setOverlay } = useContext(OverlayContext);
```

Alternatively, use the `useOverlayContext` hook.

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

const { setOverlay } = useOverlayContext();
```

## Values

| Value            | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Type                               |
| ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- |
| `overlay`        | Current active overlay. Rendered for: 'alert' (delete message confirmation alert box), 'gallery' (when image viewer/gallery is opened), 'none' (default value).                                                                                                                                                                                                                                                                                                                                                                                      | `enum('alert', 'gallery', 'none')` |
| `overlayOpacity` | A Reanimated [`SharedValue`](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#shared-value) that tracks the current opacity of the overlay. Automatically animated to `1` when an overlay is active and `0` when dismissed.                                                                                                                                                                                                                                                                                             | `SharedValue<number>`              |
| `setOverlay`     | Setter for [`overlay`](/chat/docs/sdk/react-native/contexts/overlay-context#overlay/). You can use this setter to show the overlay.                                                                                                                                                                                                                                                                                                                                                                                                                  | `(overlay) => void`                |
| `style`          | A `theme` object to customize the styles of SDK components. Detailed information on theming can be found in the [customization documentation](/chat/docs/sdk/react-native/customization/theming/). Themes are inherited from parent providers. A [theme provided to the `OverlayProvider`](/chat/docs/sdk/react-native/core-components/overlay-provider#value/) will be the base theme `style` is merged into. Themes are not hoisted though, therefore a theme provided to `Chat` will not change overlay components such as the attachment picker. | `object`                           |


---

This page was last updated at 2026-05-13T13:38:51.081Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react-native/contexts/overlay-context/](https://getstream.io/chat/docs/sdk/react-native/contexts/overlay-context/).