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: Override the background color on the reaction list container.

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

const ReactionListTopWithCustomBackground = (props: ReactionListTopProps) => (
  <ReactionListTop {...props} fill="#00DDDD" />
);

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

Props

Prop	Description	Type
`alignment`	Sets whether the message aligns left or right in the list. Defaults to `'right'`.	`enum('right', 'left')`
`fill`	Background color for reaction list container when `alignment` is `left`.	`string`
`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`
`reactions`	Reactions added to the message.	`array`
`reactionSize`	Reaction icon size.	`number`
`showMessageOverlay`	Opens the message action overlay (called on long press).	`(showMessageReactions?: boolean) => void`
`supportedReactions`	List of reactions users can add to messages. See customizing reactions. Defaults to reactionData.	`array`

Examples

Reactions data structure:

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

MessageRepliesAvatar

ReactionListBottom