Skip to main content
Version: v3

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 { images, setImages } = useContext(ImageGalleryContext);

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

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.

const { images, setImages } = useImageGalleryContext();
const { setBlurType, setOverlay } = useOverlayContext();

onPress={() => {
setImages(messagesWithImage);
setImage({
messageId: selectedItem.messageId,
url: selectedItem.uri,
});
setBlurType('dark');
setOverlay('gallery');
}}

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

Value#

image#

Current active image in image viewer/gallery.

{
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[]

setImage#

Setter for value image.

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

setImages#

Setter for value images.

Type
(messageWithImages: MessageType[]) => void

Did you find this page helpful?