ReactionListClustered

ReactionListClustered renders reactions in a compact clustered style. It can be used as a custom implementation for reaction list rendering in MessageList.

Best Practices

  • Use clustered mode when horizontal space is limited.
  • Keep supportedReactions aligned with your channel configuration.
  • Avoid heavy logic inside press handlers to keep list interactions smooth.
  • Use accessibilityLabel for improved screen-reader support.
  • Keep container styling minimal to preserve default hit targets.

Props

Prop Description Type
hasReactions True if the message has at least one reaction. boolean
onPress Default press handler for message UI. function
onPressIn Default pressIn handler for message UI. function
preventPress Disables press interactions on reaction items. boolean
reactions Reactions summary list for the message. array
showReactionsOverlay Opens reactions overlay. (reactionType?: string) => void
supportedReactions List of reactions users can add to messages. See customizing reactions. Defaults to reactionData. array
containerStyle Custom style for the clustered content container. StyleProp<ViewStyle>
accessibilityLabel Accessibility label for the clustered reaction list container. string
Add Chat to my app: getstream.io/SKILL.md

The fastest way to build with Stream. Start a new project or improve an existing one. Full CLI and documentation integration out of the box.

Ask your agent:

/stream Build me a Social App with Feeds and Moderation.
/stream Any livestream calls running?
/stream Chat React Native v9: <Your Question>