ImageGalleryContext

ImageGalleryContext is provided by OverlayProvider. If you are not familiar with the React Context API, see the React docs.

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:

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

const { imageGalleryStateStore } = useContext(ImageGalleryContext);

Alternatively, use the useImageGalleryContext hook.

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 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 and can be read via useComponentsContext():

const { ImageGalleryHeader, ImageGalleryFooter } = useComponentsContext();

AttachmentPickerContext

KeyboardContext