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