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.
• Combine setSelectedMessage with setOverlay('gallery') to open the viewer cleanly.
• Pass only messages with image attachments to keep the gallery focused.
• Keep messages and selectedMessage in sync to avoid empty viewers.
• Avoid heavy preprocessing before calling setMessages.

Basic Usage

Consume ImageGalleryContext in any child of OverlayProvider:

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

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

Alternatively, use the useImageGalleryContext hook.

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

const { messages, setMessages } = useImageGalleryContext();

Use this context if you're building a separate channel images screen. Combine it with OverlayContext to open the image viewer for a selected image.

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

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

See ChannelImagesScreen in the SampleApp for a full example.

Value

selectedMessage

Current message shown in the image viewer.

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

messages

All messages in the channel that contain image attachments. The viewer uses this to navigate between images.

setSelectedMessage

Setter for value selectedMessage.

setMessages

Setter for messages.