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