React
iOS
Android
Flutter
Angular
JavaScript
Unity
Unreal
Node
Python
Ruby
PHP
Java
.NET
Go
RESTThis is beta documentation for Stream Chat React Native SDK v9. For the latest stable version, see the latest version (v8)
.
ReactionListItem
ReactionListItem renders a single reaction chip inside reaction lists.
Best Practices
- Keep
reactiondata stable to reduce unnecessary re-renders. - Use
selectedto clearly indicate the current user's reaction state. - Use
showCount={false}only when count context is available elsewhere. - Keep interaction handlers lightweight.
- Reuse
supportedReactionsfromChannelconfig for icon consistency.
Props
reaction
Reaction summary item to render.
| Type |
|---|
object |
showCount
Whether to render the reaction count next to the icon.
| Type | Default |
|---|---|
boolean | true |
selected
Whether this reaction is currently selected by the active user.
| Type | Default |
|---|---|
boolean | false |
handleReaction
Handles adding/removing a reaction.
| Type |
|---|
(reactionType: string) => Promise<void> | undefined |
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
Disables press interactions.
| Type |
|---|
boolean |
showReactionsOverlay
Opens reactions overlay.
| Type |
|---|
(reactionType?: string) => void |
supportedReactions
List of reactions users can add to messages. See customizing reactions.
| Type | Default |
|---|---|
| Array | reactionData |
Related Component
ReactionListItem.tsx also exports ReactionListCountItem, which renders the overflow count chip (+N) for additional reactions.