import { useContext } from 'react';
import { ImageGalleryContext } from 'stream-chat-react-native';
const { images, setImages } = useContext(ImageGalleryContext);
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:
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 |