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();

Value

autoPlayVideo

Enable or disable autoplay for videos in the image gallery.

giphyVersion

The Giphy image rendition to render. See the Image Object keys for possible values.

ImageGalleryFooter

Custom component to render as the image gallery footer. Receives ImageGalleryFooterProps.

ImageGalleryGrid

Custom component to render the image gallery grid. Receives ImageGalleryGridProps.

ImageGalleryHeader

Custom component to render as the image gallery header. Receives ImageGalleryHeaderProps.

ImageGalleryVideoControls

Custom component to render the video controls within the image gallery. Receives ImageGalleryVideoControlProps.

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.

numberOfImageGalleryGridColumns

Number of columns to render within the image gallery grid.