Skip to main content
Version: v3

Gallery

Component to render image attachments within the MessageList.

Basic Usage#

You can customize the Gallery component and provide it back to the SDK via the Gallery prop on Channel if desired.

import { Channel, Gallery } from 'stream-chat-react-native';

<Channel Gallery={() => <Gallery preventPress />}

Props#

overrides the value from MessagesContext
additionalTouchableProps#

Additional props provided to the underlying TouchableOpacity used by components within a message such as MessageContent.

Type
object

overrides the value from MessageContext
alignment#

Sets if the message should be aligned to right or left side of list.

TypeDefault
enum('right', 'left')'right'

overrides the value from MessageContext
groupStyles#

Position of message in the group. A message group is a group of consecutive messages from the same user. groupStyles can be used to style the message as per their position in message group.

e.g. user avatar (to which message belongs to) is only showed for last (bottom) message in group.

Type
array of enum('top', 'bottom', 'middle', 'single')

hasThreadReplies#

Weather current message has any thread replies or not. This boolean is used for setting borderBottomLeftRadius for left aligned messages and borderBottomRightRadius for right aligned messages.

TypeDefault
boolean!!message.reply_count

overrides the value from MessageContext
images#

Array of image type attachments on message.

const images = message.attachments.filter(a => a.type === 'image');
Type
array

overrides the value from MessagesContext
legacyImageViewerSwipeBehaviour#

Note: This prop is available only in SDK version >= v3.9.0

Enables/disables the legacy image viewer behavior.

By default, when you open (press) an image attachment it opens the image in a full-screen image viewer. Within the viewer, you can keep swiping left to scroll through all the images that have been loaded within a channel so far. This creates quite a lot of extra work for the JS thread to keep track of image attachments loaded in a channel and pre-populating them in the viewer for smooth transitions.

For performance reason, you can switch to an alternate UX for the image viewer where image attachments are only loaded for the selected messages in a viewer, by setting this prop to false.

TypeDefault
booleantrue

messageId#

Id of the current message.

Type
string

messageText#

Text content of current message - message.text. This prop gets used for styling purpose of gallery.

Type
string

overrides the value from MessageContext
onLongPress#

Default long press handler for message UI.

Type
function

overrides the value from MessageContext
onPress#

Default press handler for message UI.

Type
function

overrides the value from MessageContext
onPressIn#

Default pressIn handler for message UI.

Type
function

preventPress#

If true, onPress handler will be disabled.

TypeDefault
booleanfalse

overrides the value from OverlayContext
setBlurType#

Function to set the blur background type for overlay - 'light' | 'dark' | undefined

Type
(blurType) => void

overrides the value from ImageGalleryContext
setImage#

Setter for value image.

Type
(image: {messageId?: string; url?: string;}) => void

overrides the value from OverlayContext
setOverlay#

Setter for overlay. You can use this setter to show the overlay. Please make sure to explicitely relevant blur background type for overlay by using setBlurType.

Type
(overlay) => void

overrides the value from MessageContext
threadList#

True if current message is part of a message thread.

Type
boolean

Did you find this page helpful?