---
id: image-gallery-context
title: ImageGalleryContext
---

import SetImage from '../common-content/contexts/image-gallery-context/set_image.mdx'

`ImageGalleryContext` is provided by [`OverlayProvider`](../core-components/overlay_provider.mdx) 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 { images, setImages } = useContext(ImageGalleryContext);
```

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

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

const { images, setImages } = 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 { images, setImages } = useImageGalleryContext();
const { setBlurType, setOverlay } = useOverlayContext();

onPress={() => {
  setImages(messagesWithImage);
  setImage({
    messageId: selectedItem.messageId,
    url: selectedItem.uri,
  });
  setBlurType('dark');
  setOverlay('gallery');
}}
```

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

## Value

### image

Current active image in image viewer/gallery.

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

| Type |
| - |
| object |

### images

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/master/package/src/components/MessageList/hooks/useMessageList.ts)[] |

### setImage

<SetImage />

### setImages

Setter for value [images](#images).

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