---
id: gallery
title: Gallery
---

import SetImage from '../common-content/contexts/image-gallery-context/set_image.mdx';

import Alignment from '../common-content/contexts/message-context/alignment.mdx';
import GroupStyles from '../common-content/contexts/message-context/group_styles.mdx';
import HasReactions from '../common-content/contexts/message-context/has_reactions.mdx';
import Images from '../common-content/contexts/message-context/images.mdx';
import IsMyMessage from '../common-content/contexts/message-context/is_my_message.mdx';
import LastGroupMessage from '../common-content/contexts/message-context/last_group_message.mdx';
import MessageContentOrder from '../common-content/contexts/message-context/message_content_order.mdx';
import MessageProp from '../common-content/contexts/message-context/message.mdx';
import OnLongPress from '../common-content/contexts/message-context/on_long_press.mdx';
import OnPress from '../common-content/contexts/message-context/on_press.mdx';
import OnPressIn from '../common-content/contexts/message-context/on_press_in.mdx';
import OnlyEmojis from '../common-content/contexts/message-context/only_emojis.mdx';
import OtherAttachments from '../common-content/contexts/message-context/other_attachments.mdx';
import ThreadList from '../common-content/contexts/message-context/thread_list.mdx';

import SetBlurType from '../common-content/contexts/overlay-context/set_blur_type.mdx';
import SetOverlay from '../common-content/contexts/overlay-context/set_overlay.mdx';

import AdditionalTouchableProps from '../common-content/core-components/channel/props/additional_touchable_props.mdx';
import LegacyImageViewerSwipeBehaviour from '../common-content/core-components/channel/props/legacy_image_viewer_swipe_behaviour.mdx'

Component to render image attachments within the [`MessageList`](./message_list.mdx).

## Basic Usage

You can customize the `Gallery` component and provide it back to the SDK via the [`Gallery`](../core-components/channel.mdx#gallery) prop on `Channel` if desired.

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

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

## Props

### <div class="label description">_overrides the value from [MessagesContext](../contexts/messages_context.mdx#additionaltouchableprops)_</div> additionalTouchableProps {#additionaltouchableprops}

<AdditionalTouchableProps />

### <div class="label description">_overrides the value from [MessageContext](../contexts/message_context.mdx#alignment)_</div> alignment {#alignment}

<Alignment />

### <div class="label description">_overrides the value from [MessageContext](../contexts/message_context.mdx#groupstyles)_</div> groupStyles {#groupstyles}

<GroupStyles />

### 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` |

### <div class="label description">_overrides the value from [MessageContext](../contexts/message_context.mdx#images)_</div> images {#images}

<Images />

### <div class="label description">_overrides the value from [MessagesContext](../contexts/messages_context.mdx#legacyimageviewerswipebehaviour)_</div> legacyImageViewerSwipeBehaviour {#legacyimageviewerswipebehaviour}

<LegacyImageViewerSwipeBehaviour />

### 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 |

### <div class="label description">_overrides the value from [MessageContext](../contexts/message_context.mdx#onlongpress)_</div> onLongPress {#onlongpress}

<OnLongPress />

### <div class="label description">_overrides the value from [MessageContext](../contexts/message_context.mdx#onpress)_</div> onPress {#onpress}

<OnPress />

### <div class="label description">_overrides the value from [MessageContext](../contexts/message_context.mdx#onpressin)_</div> onPressIn {#onpressin}

<OnPressIn />

### preventPress

If true, onPress handler will be disabled.

| Type | Default |
| - | - |
| boolean | false |

### <div class="label description">_overrides the value from [OverlayContext](../contexts/overlay_context.mdx#setblurtype)_</div> setBlurType {#setblurtype}

<SetBlurType />

### <div class="label description">_overrides the value from [ImageGalleryContext](../contexts/image_gallery_context.mdx#setimage)_</div> setImage {#setimage}

<SetImage />

### <div class="label description">_overrides the value from [OverlayContext](../contexts/overlay_context.mdx#setoverlay)_</div> setOverlay {#setoverlay}

<SetOverlay />

### <div class="label description">_overrides the value from [MessageContext](../contexts/message_context.mdx#threadlist)_</div> threadList {#threadlist}

<ThreadList />