Skip to content

ReactionListTop

ReactionListTop displays reactions above a message. This is the default component for the 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.
  • Keep reaction sizes consistent across the app.

Basic Usage

Use case: Wrap or customize the reaction list rendered above the message bubble.

import {
  WithComponents,
  ReactionListTop,
  ReactionListTopProps,
} from "stream-chat-react-native";

const CustomReactionListTop = (props: ReactionListTopProps) => (
  <ReactionListTop {...props} />
);

<WithComponents overrides={{ ReactionListTop: CustomReactionListTop }}>
  <Channel channel={channel}>
    <MessageList />
    <MessageComposer />
  </Channel>
</WithComponents>;

To restyle the reaction list container (including its background), use the messageItemView.reactionListTop.container theme key.

Props

Prop Description Type
alignment Sets whether the message aligns left or right in the list. Defaults to 'right'. enum('right', 'left')
handleReaction Handles a reaction on a message. Called when a user reacts; should update the message and context. (reactionType: string) => Promise<void>
hasReactions True if the message has at least one reaction. boolean
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 Disable press interactions for the reaction list. boolean
reactions Reactions added to the message. array
reactionListType Default layout style used for the reaction list, sourced from MessagesContext. 'clustered' | 'segmented'
showCount Whether to show the count next to each reaction. Defaults to true. boolean
showReactionsOverlay Opens the reactions overlay. (selectedReaction?: string) => void
supportedReactions List of reactions users can add to messages. See customizing reactions. Defaults to reactionData. array
type Layout of the reaction list. 'clustered' renders a clustered list; otherwise a horizontal segmented list is used. 'clustered' | 'segmented'

Examples

Reactions data structure:

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