# ImageGalleryContext

`ImageGalleryContext` is provided by [`OverlayProvider`](https://getstream.io/chat/docs/sdk/react-native/v4/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 { 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 { setOverlay } = useOverlayContext();

onPress={() => {
  setImages(messagesWithImage);
  setImage({
    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

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

### `setImage`

Setter for value [`image`](https://getstream.io/chat/docs/sdk/react-native/v4/contexts/image-gallery-context/#image).

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

### `setImages`

Setter for value [images](#images).

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

---

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