# ImageGalleryContext

`ImageGalleryContext` is provided by [`OverlayProvider`](/chat/docs/sdk/react-native/v5/core-components/overlay-provider/) component. If you are not familiar with React Context API, please read about it on [React docs](https://reactjs.org/docs/context.html).

## Basic Usage

`ImageGalleryContext` can be consumed by any of the child component of `OverlayProvider` component as following:

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

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

Alternatively, you can also use `useImageGalleryContext` hook provided by library to consume ImageGalleryContext.

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

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

This context can be useful if you are planning to build a separate screen for channel images, where you may want to open image viewer/gallery when user presses on image.
You can use this `ImageGalleryContext` in combination with `OverlayContext` to open image viewer and show pressed image.

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

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

Please check the implementation of [`ChannelImagesScreen`](https://github.com/GetStream/stream-chat-react-native/blob/main/examples/SampleApp/src/screens/ChannelImagesScreen.tsx) within SampleApp, for exact implementation.

## Value

### `selectedMessage`

Current active message in image viewer/gallery.

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

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

### messages

All the messages in channel which contain image attachments. Image viewer/gallery uses this array to navigate to next or previous image.

| Type                                                                                                                                        |
| ------------------------------------------------------------------------------------------------------------------------------------------- |
| [MessageType](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageList/hooks/useMessageList.ts)[] |

### setSelectedMessage

<partial id="chat-sdk/react-native/v5/_partials/common-content/contexts/image-gallery-context/set_selected_message"></partial>

### `setMessages`

Setter for value [messages](#messages).

| Type                                                                                                                                                            |
| --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| (messages: [MessageType](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageList/hooks/useMessageList.ts)[]) => void |

---

This page was last updated at 2025-08-15T14:16:17.706Z.

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