# OverlayReactionList

`OverlayReactionList` component is used to display reaction selector within message overlay.

This is the default component provided to the prop [`OverlayReactionList`](/chat/docs/sdk/react-native/v5/core-components/overlay-provider#overlayreactionlist/) on the `OverlayProvider` component.

## Props

### `data`

This is an object with following keys:

- `alignment`

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

| Type                  | Default |
| --------------------- | ------- |
| enum('right', 'left') | 'right' |


- `clientId`

Id of the current user connected to the chat.

| Type   |
| ------ |
| String |

- `files`

Array of `file` type attachments to be shown in the grouped UI component.

```tsx
const files = message.attachments.filter((a) => a.type === "file");
```

| Type  |
| ----- |
| Array |


- `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') |


- `handleReaction`

Function called when a reaction is selected in the message overlay, this is called on both the add and remove action.
This function does not override the default behavior of the reaction being selected.
Please refer to [the guide on customizing message actions](/chat/docs/sdk/react-native/v5/guides/customize-message-actions/) for details.

| Type     |
| -------- |
| Function |

| Parameter      | Description                              |
| -------------- | ---------------------------------------- |
| `message`      | Message the action is called on.         |
| `reactionType` | String designating the type of reaction. |


- `images`

Array of `image` type attachments on message.

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

| Type  |
| ----- |
| Array |


- `message`

Message object.

| Type           |
| -------------- |
| `Message` type |


- `messageActions`

An array of, or function that returns and array of, actions that can be performed on a message shown in the message overlay.
Please refer to [the guide on customizing message actions](/chat/docs/sdk/react-native/v5/guides/customize-message-actions/) for details.

| Type              | Default                                                                                                                                  |
| ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
| Array \| Function | [messageActions](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Message/utils/messageActions.ts) |

| Parameter    | Description                                                         |
| ------------ | ------------------------------------------------------------------- |
| `actionInfo` | An object containing the original actions and relevant message data |


- `messageReactionTitle`

Title for `MessageReactions` component.

| Type   | Default             |
| ------ | ------------------- |
| String | "Message Reactions" |

- `messagesContext`

Entire value object of [MessagesContext](/chat/docs/sdk/react-native/v5/contexts/messages-context#value/)

- `onlyEmojis`

True if the message text only contains emojis and nothing else.

| Type    |
| ------- |
| Boolean |


- `otherAttachments`

All the attachments on the message except for types `file` and `image`.

| Type  |
| ----- |
| Array |


- `OverlayReactionList`

Reaction selector component displayed within the message overlay when user long presses a message.

| Type          | Default                                                                                    |
| ------------- | ------------------------------------------------------------------------------------------ |
| ComponentType | [OverlayReactionList](/chat/docs/sdk/react-native/v5/ui-components/overlay-reaction-list/) |


- `supportedReactions`

List of reactions which can be added on message.
Please refer to [the guide on customizing reactions](/chat/docs/sdk/react-native/v5/guides/message-customization#message-with-custom-reactions/) for details.

| Type  | Default                                                                                                                                                             |
| ----- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Array | [reactionData](https://github.com/GetStream/stream-chat-react-native/blob/182f1047a1417da64047a12f9a6cfaf1252cfbd8/package/src/components/Channel/Channel.tsx#L129) |


- `threadList`

True if current message is part of a message thread.

| Type    |
| ------- |
| Boolean |



### `setOverlay`

Setter for [`overlay`](/chat/docs/sdk/react-native/v5/contexts/overlay-context#overlay/). You can use this setter to show the overlay.

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


### `supportedReactions`

List of reactions which can be added on message.
Please refer to [the guide on customizing reactions](/chat/docs/sdk/react-native/v5/guides/message-customization#message-with-custom-reactions/) for details.

| Type  | Default                                                                                                                                                             |
| ----- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Array | [reactionData](https://github.com/GetStream/stream-chat-react-native/blob/182f1047a1417da64047a12f9a6cfaf1252cfbd8/package/src/components/Channel/Channel.tsx#L129) |



---

This page was last updated at 2026-06-09T08:45:33.095Z.

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