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.
| Type | Default |
|---|---|
| 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.
For example, 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.
| Type | Default |
|---|---|
| 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.
When true, within the image viewer you can keep swiping left to scroll through all the images that have been loaded within a channel so far. Be aware that 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.
| Type | Default |
|---|---|
| boolean | false |
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.
| Type | Default |
|---|---|
| boolean | false |
overrides the value from ImageGalleryContext setSelectedMessage#
Setter for value selectedMessage.
| Type |
|---|
(selectedMessage: {messageId?: string; url?: string;}) => void |
overrides the value from ImageGalleryContext setMessages#
Setter for value messages.
| Type |
|---|
(messages: [MessageType](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageList/hooks/useMessageList.ts)[]) => void |
overrides the value from OverlayContext setOverlay#
Setter for overlay. You can use this setter to show the overlay.
| Type |
|---|
(overlay) => void |
overrides the value from MessageContext threadList#
True if current message is part of a message thread.
| Type |
|---|
| boolean |
overrides the value from MessageContext videos#
Array of video file attachments.
const videos = message.attachments.filter(a => a.type === 'video' && !a.og_scrape_url);
| Type |
|---|
| array |
overrides the value from MessageContext VideoThumbnail#
Component to render the video thumbnail for video attachments in MessageList.
| Type | Default |
|---|---|
| component | VideoThumbnail |