# ReactionListItem

`ReactionListItem` renders a single reaction chip inside reaction lists.

## Best Practices

- Keep `reaction` data stable to reduce unnecessary re-renders.
- Use `selected` to clearly indicate the current user's reaction state.
- Use `showCount={false}` only when count context is available elsewhere.
- Keep interaction handlers lightweight.
- Reuse `supportedReactions` from `Channel` config for icon consistency.

## Props

| Prop                   | Description                                                                                                                                                                                                                                                                                                                                         | Type                                                     |
| ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------- |
| `reaction`             | Reaction summary item to render.                                                                                                                                                                                                                                                                                                                    | `object`                                                 |
| `showCount`            | Whether to render the reaction count next to the icon. Defaults to `true`.                                                                                                                                                                                                                                                                          | `boolean`                                                |
| `selected`             | Whether this reaction is currently selected by the active user. Defaults to `false`.                                                                                                                                                                                                                                                                | `boolean`                                                |
| `handleReaction`       | Handles adding/removing a reaction.                                                                                                                                                                                                                                                                                                                 | `(reactionType: string) => Promise<void>` \| `undefined` |
| `onLongPress`          | Default long press handler for message UI.                                                                                                                                                                                                                                                                                                          | `function`                                               |
| `onPress`              | Default press handler for message UI.                                                                                                                                                                                                                                                                                                               | `function`                                               |
| `onPressIn`            | Default `pressIn` handler for message UI.                                                                                                                                                                                                                                                                                                           | `function`                                               |
| `preventPress`         | Disables press interactions.                                                                                                                                                                                                                                                                                                                        | `boolean`                                                |
| `showReactionsOverlay` | Opens reactions overlay.                                                                                                                                                                                                                                                                                                                            | `(reactionType?: string) => void`                        |
| `supportedReactions`   | List of reactions users can add to messages. See [customizing reactions](/chat/docs/sdk/react-native/guides/message-customization#message-with-custom-reactions/). Defaults to [reactionData](https://github.com/GetStream/stream-chat-react-native/blob/182f1047a1417da64047a12f9a6cfaf1252cfbd8/package/src/components/Channel/Channel.tsx#L129). | `array`                                                  |

## Related Component

`ReactionListItem.tsx` also exports `ReactionListCountItem`, which renders the overflow count chip (`+N`) for additional reactions.


---

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

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