ImageGalleryContext
ImageGalleryContext
is provided by OverlayProvider
component. If you are not familiar with React Context API, please read about it on React docs.
#
Basic UsageImageGalleryContext
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#
imageCurrent active image in image viewer/gallery.
{
messageId?: string;
url?: string;
}
Type |
---|
object |
#
imagesAll 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 |