# ReactionListBottom

`ReactionListBottom` 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 [`ReactionListBottom`](https://getstream.io/chat/docs/sdk/react-native/v6/core-components/channel#reactionlistbottom) on the `Channel` component.

## Basic Usage

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

const CustomReactionListBottom = (props: ReactionListBottomProps) => <ReactionListBottom {...props} />

<Channel ReactionListBottom={CustomReactionListBottom} />
```

## Props

### `handleReaction`

Function to handle a reaction on a message. This function is called when a user reacts to a message. The function is passed the message ID, the reaction type, and the user ID of the user who reacted to the message. The function should update the message with the reaction and update the message in the message context.

| Type                                                     | Default     |
| -------------------------------------------------------- | ----------- |
| `(reactionType: string) => Promise<void>` \| `undefined` | `undefined` |

### `hasReactions`

True if the message has at least 1 reaction.

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

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

List of reactions added to the message.

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

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

### `supportedReactions`

List of reactions which can be added on message.
Please refer to [the guide on customizing reactions](https://getstream.io/chat/docs/sdk/react-native/v6/guides/message-customization/) for details.

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

---

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