# ReactionListTop

`ReactionListTop` displays reactions above a message. This is the default component for the [`ReactionListTop`](/chat/docs/sdk/react-native/v8/core-components/channel#reactionlisttop/) prop.

## Best Practices

- Keep reaction lists compact to avoid covering message content.
- Use `supportedReactions` to keep available reactions consistent.
- Avoid heavy logic in press handlers for smooth interactions.
- Use `messageContentWidth` for precise alignment with message bubbles.
- Keep reaction sizes consistent across the app.

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

Sets whether the message aligns left or right in the list.

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


### `fill`

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

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

### `hasReactions`

True if the message has at least one reaction.

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


### `messageContentWidth`

Width of the message content. Computed in [`MessageContent`](/chat/docs/sdk/react-native/v8/ui-components/message-content/) after layout, and used to align the reactions to the message edge.

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

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

### `reactions`

Reactions added to the message.

```tsx
[
  {
    own: true,
    type: "love",
  },
  {
    own: false,
    type: "haha",
  },
];
```

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

### `reactionSize`

Reaction icon size.

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

### `showMessageOverlay`

Opens the message action overlay (called on long press).

| Type                                       |
| ------------------------------------------ |
| `(showMessageReactions?: boolean) => void` |

### `supportedReactions`

List of reactions users can add to messages. See [customizing reactions](/chat/docs/sdk/react-native/v8/guides/message-customization#message-with-custom-reactions/).

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



---

This page was last updated at 2026-04-17T17:33:44.707Z.

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