---
id: overlay-reactions
title: OverlayReactions
---

import SupportedReactions from '../common-content/core-components/channel/props/supported_reactions.mdx';

import Alignment from '../common-content/contexts/message-context/alignment.mdx';

`OverlayReactions` component is used to display the list of existing reactions within the message overlay, which opens up when the user long presses a message.

This is the default component provided to the prop [`OverlayReactions`](../core-components/overlay_provider.mdx#overlayreactions) on the `OverlayProvider` component.

## Props

### alignment

<Alignment />

### reactions

List of existing reactions which can be extracted from a message.

```tsx
const reactions = message.latest_reactions.map((reaction) => ({
  alignment:
    clientId && clientId === reaction.user?.id ? 'right' : 'left',
  image: reaction?.user?.image,
  name: reaction?.user?.name || reaction.user_id || '',
  type: reaction.type,
}))
```

| Type |
| - |
| array |

### <div class="label required">required</div> **showScreen** {#showscreen}

`Shared` value from React Native Reanimated's [`useSharedValue`](https://docs.swmansion.com/react-native-reanimated/docs/api/useSharedValue/) hook.

| Type |
| - |
| object |

### <div class="description">overrides the value from [MessagesContext](../contexts/messages_context.mdx#supportedreactions)</div> supportedReactions {#supportedreactions}

<SupportedReactions />

### <div class="label required">required</div> **title** {#title}

Title for the component.

| Type |
| - |
| string |