# ImageGalleryContext

`ImageGalleryContext` 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

- Use `useImageGalleryContext` only within `OverlayProvider`.
- Use the `imageGalleryStateStore` to manage gallery state (messages, selected message, etc.).
- Pass only messages with image attachments to keep the gallery focused.
- Avoid heavy preprocessing before updating the state store.

## Basic Usage

Consume `ImageGalleryContext` in any child of `OverlayProvider`:

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

const { imageGalleryStateStore } = useContext(ImageGalleryContext);
```

Alternatively, use the `useImageGalleryContext` hook.

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

const { imageGalleryStateStore } = useImageGalleryContext();
```

## Values

| Value                             | Description                                                                                                                                                                    | Type                     |
| --------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------ |
| `autoPlayVideo`                   | Enable or disable autoplay for videos in the image gallery.                                                                                                                    | `boolean`                |
| `giphyVersion`                    | The Giphy image rendition to render. See the [Image Object](https://developers.giphy.com/docs/api/schema#image-object) keys for possible values. Defaults to `'fixed_height'`. | `string`                 |
| `imageGalleryStateStore`          | State store instance that manages gallery state such as selected message, messages with images, and navigation. Use this store to programmatically control the image gallery.  | `ImageGalleryStateStore` |
| `numberOfImageGalleryGridColumns` | Number of columns to render within the image gallery grid. Defaults to `3`.                                                                                                    | `number`                 |

Gallery UI components (`ImageGalleryHeader`, `ImageGalleryFooter`, `ImageGalleryGrid`) are provided through [`WithComponents`](/chat/docs/sdk/react-native/customization/custom-components/) and can be read via `useComponentsContext()`:

```tsx
const { ImageGalleryHeader, ImageGalleryFooter } = useComponentsContext();
```


---

This page was last updated at 2026-07-10T16:05:11.924Z.

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