# ReactionListTop

`ReactionListTop` component is used to display the reactions added to a message right on top of it.

This is the default component provided to the prop [`ReactionListTop`](/chat/docs/sdk/react-native/v6/core-components/channel#reactionlisttop/) on the `Channel` component.

## Basic Usage

**Use case**: Override the background color on the reaction list container.

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

const ReactionListTopWithCustomBackground = (props: ReactionListTopProps) => <ReactionListTop {...props} fill={'#00DDDD'} />

<Channel ReactionListTop={ReactionListTopWithCustomBackground} />
```

## Props

### `alignment`

<partial id="chat-sdk/react-native/v6/_partials/common-content/contexts/message-context/alignment"></partial>

### `fill`

Background color for reaction list container when [`alignment`](#alignment) is `left`.

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

### `hasReactions`

<partial id="chat-sdk/react-native/v6/_partials/common-content/contexts/message-context/has_reactions"></partial>

### `messageContentWidth`

Width of message content. This helps ReactionList align itself on the front-edge of the message content.
This value gets computed in [`MessageContent`](/chat/docs/sdk/react-native/v6/ui-components/message-content/) once the content gets loaded.

| Type   |
| ------ |
| Number |

### `onLongPress`

<partial id="chat-sdk/react-native/v6/_partials/common-content/contexts/message-context/on_long_press"></partial>

### `onPress`

<partial id="chat-sdk/react-native/v6/_partials/common-content/contexts/message-context/on_press"></partial>

### `onPressIn`

<partial id="chat-sdk/react-native/v6/_partials/common-content/contexts/message-context/on_press_in"></partial>

### `preventPress`

<partial id="chat-sdk/react-native/v6/_partials/common-content/contexts/message-context/prevent_press"></partial>

### `reactions`

<partial id="chat-sdk/react-native/v6/_partials/common-content/contexts/message-context/reactions"></partial>

### `reactionSize`

Dimensions for each reaction icon.

| Type   |
| ------ |
| Number |

### `showMessageOverlay`

<partial id="chat-sdk/react-native/v6/_partials/common-content/contexts/message-context/show_message_overlay"></partial>

### `supportedReactions`

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/supported_reactions"></partial>

---

This page was last updated at 2025-08-19T14:51:58.153Z.

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