import { Channel, Gallery } from 'stream-chat-react-native';
<Channel Gallery={() => <Gallery preventPress />}
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.
Props
additionalPressableProps
Additional props provided to the underlying Pressable used by components within a message such as MessageContent
.
Type |
---|
object |
alignment
Sets if the message should be aligned to right or left side of list.
Type | Default |
---|---|
enum(‘right’, ‘left’) | ‘right’ |
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 |
images
Array of image
type attachments on message.
const images = message.attachments.filter(a => a.type === 'image');
Type |
---|
Array |
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 |
onLongPress
Default long press handler for message UI.
Type |
---|
function |
onPress
Default press handler for message UI.
Type |
---|
function |
onPressIn
Default pressIn
handler for message UI.
Type |
---|
function |
preventPress
If true, onPress
handler will be disabled.
Type | Default |
---|---|
Boolean | false |
setSelectedMessage
Setter for value selectedMessage
.
Type |
---|
(selectedMessage: {messageId?: string; url?: string;}) => void |
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 |
setOverlay
Setter for overlay
. You can use this setter to show the overlay.
Type |
---|
(overlay) => void |
threadList
True if current message is part of a message thread.
Type |
---|
Boolean |
videos
Array of video
file attachments.
const videos = message.attachments.filter(a => a.type === 'video' && !a.og_scrape_url);
Type |
---|
array |
UI Component Props
VideoThumbnail
Component to render the video thumbnail for video attachments in MessageList.
Type | Default |
---|---|
ComponentType | VideoThumbnail |