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 { 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.
#
ValueselectedMessage
#
Current active message in image viewer/gallery.
{
messageId?: string;
url?: string;
}
Type |
---|
object |
#
messagesAll the messages in channel which contain image attachments. Image viewer/gallery uses this array to navigate to next or previous image.
Type |
---|
MessageType[] |
#
setSelectedMessageSetter for value selectedMessage
.
Type |
---|
(selectedMessage: {messageId?: string; url?: string;}) => void |
setMessages
#
Setter for value messages.
Type |
---|
(messages: MessageType[]) => void |