# Gallery

Component to render image attachments within the [`MessageList`](https://getstream.io/chat/docs/sdk/react-native/v3/ui-components/message-list/).

## Basic Usage

You can customize the `Gallery` component and provide it back to the SDK via the [`Gallery`](https://getstream.io/chat/docs/sdk/react-native/v3/core-components/channel/#gallery) prop on `Channel` if desired.

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

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

## Props

### additionalTouchableProps

Additional props provided to the underlying [TouchableOpacity](https://reactnative.dev/docs/touchableopacity#props) used by components within a message such as [`MessageContent`](https://getstream.io/chat/docs/sdk/react-native/v3/ui-components/message-content/#additionaltouchableprops).

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

```tsx
const images = message.attachments.filter((a) => a.type === "image");
```

| Type  |
| ----- |
| array |

### legacyImageViewerSwipeBehaviour

**Note:** This prop is available only in SDK version >= [v3.9.0](https://github.com/GetStream/stream-chat-react-native/releases)

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.

| Type    | Default |
| ------- | ------- |
| boolean | true    |

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

### setBlurType

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

| Type                 |
| -------------------- |
| `(blurType) => void` |

### `setImage`

Setter for value [`image`](https://getstream.io/chat/docs/sdk/react-native/v3/contexts/image-gallery-context/#image).

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

### `setOverlay`

Setter for [`overlay`](https://getstream.io/chat/docs/sdk/react-native/v3/contexts/overlay-context/#overlay). You can use this setter to show the overlay. Please make sure to explicitly relevant blur background type for overlay by using [`setBlurType`](https://getstream.io/chat/docs/sdk/react-native/v3/contexts/overlay-context/#setblurtype).

| Type                |
| ------------------- |
| `(overlay) => void` |

### `threadList`

True if current message is part of a message thread.

| Type    |
| ------- |
| boolean |

---

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react-native/v3/ui-components/gallery/](https://getstream.io/chat/docs/sdk/react-native/v3/ui-components/gallery/).