Skip to main content
Version: v5

ImageGalleryContext

ImageGalleryContext is provided by OverlayProvider component. If you are not familiar with React Context API, please read about it on React docs.

Basic Usage#

ImageGalleryContext can be consumed by any of the child component of OverlayProvider component as following:

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

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

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

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

const { messages, setMessages } = 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.

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

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

Please check the implementation of ChannelImagesScreen within SampleApp, for exact implementation.

Value#

selectedMessage#

Current active message in image viewer/gallery.

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

messages#

All the messages in channel which contain image attachments. Image viewer/gallery uses this array to navigate to next or previous image.

Type
MessageType[]

setSelectedMessage#

Setter for value selectedMessage.

Type
(selectedMessage: {messageId?: string; url?: string;}) => void

setMessages#

Setter for value messages.

Type
(messages: MessageType[]) => void

Did you find this page helpful?