# ImageGalleryContext

`ImageGalleryContext` is provided by [`OverlayProvider`](/chat/docs/sdk/react-native/v8/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`.
- Combine `setSelectedMessage` with `setOverlay('gallery')` to open the viewer cleanly.
- Pass only messages with image attachments to keep the gallery focused.
- Keep `messages` and `selectedMessage` in sync to avoid empty viewers.
- Avoid heavy preprocessing before calling `setMessages`.

## Basic Usage

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

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

const { messages, setMessages } = useContext(ImageGalleryContext);
```

Alternatively, use the `useImageGalleryContext` hook.

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

const { messages, setMessages } = useImageGalleryContext();
```

Use this context if you're building a separate channel images screen. Combine it with `OverlayContext` to open the image viewer for a selected image.

```tsx
const { messages, setMessages, setSelectedMessage } = useImageGalleryContext();
const { setOverlay } = useOverlayContext();

onPress={() => {
  setMessages(messagesWithImage);
  setSelectedMessage({
    messageId: selectedItem.messageId,
    url: selectedItem.uri,
  });
  setOverlay('gallery');
}}
```

See [`ChannelImagesScreen`](https://github.com/GetStream/stream-chat-react-native/v8/blob/main/examples/SampleApp/src/screens/ChannelImagesScreen.tsx) in the SampleApp for a full example.

## Value

### `selectedMessage`

Current message shown in the image viewer.

```tsx
{
  messageId?: string;
  url?: string;
}
```

| Type   |
| ------ |
| object |

### messages

All messages in the channel that contain image attachments. The viewer uses this to navigate between images.

| Type             |
| ---------------- |
| `LocalMessage[]` |

### setSelectedMessage

Setter for value [`selectedMessage`](/chat/docs/sdk/react-native/v8/contexts/image-gallery-context#selectedmessage/).

| Type                                                             |
| ---------------------------------------------------------------- |
| `(selectedMessage: {messageId?: string; url?: string;}) => void` |

### `setMessages`

Setter for [messages](#messages).

| Type                                 |
| ------------------------------------ |
| (messages: `LocalMessage[]`) => void |


---

This page was last updated at 2026-04-17T17:33:45.008Z.

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