Reaction components

Reactions show in three places: on the message, as a list above or under the bubble; in the message menu, as a picker above the message; and in a bottom sheet that lists who reacted. Every component on this page is an override key of the same name. The ReactionListItemWrapper key has no effect; see ReactionListItemWrapper. Reactions covers the feature across the layers.

Best practices

• Set the reactions on offer with supportedReactions on Channel or Thread. Every component here reads them from MessagesContext, and a reaction of a type not in the list doesn't show on messages.
• Pick the layout with reactionListPosition and reactionListType on Channel before you replace a component.
• Change what a tap on a reaction does with onPressMessage on Channel: the payload's emitter is reactionList and additionalInfo.reactionType the pressed type. Toggling a reaction with a tap shows it.
• Change what picking a reaction does with selectReaction or handleReaction on Channel, not by replacing the picker.

Basic usage

This wrapper shows the reactions above the bubble as separate pills without counts:

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

const ReactionListTopWithoutCounts = (props: ReactionListTopProps) => (
  <ReactionListTop {...props} showCount={false} type="segmented" />
);

const overrides = { ReactionListTop: ReactionListTopWithoutCounts };

export const MessagesWithPlainReactions = ({
  children,
}: {
  children: React.ReactNode;
}) => <WithComponents overrides={overrides}>{children}</WithComponents>;

Custom reactions changes the reactions on offer and their icons.

The reactions on a message

MessageItemView renders ReactionListTop above the bubble with reactionListPosition="top", the default, and ReactionListBottom under it with "bottom", passing reactionListType as type. Both render nothing while the message has no reaction of a supported type. A message's reactions come from MessageContext.reactions: one entry for each type, with its count and whether the user gave it, the oldest type first.

Pressing a reaction reports the reactionList emitter, and by default opens the reactions sheet with that type selected. Pressing the clustered list, or the "+N" pill, opens it with every type.

ReactionListTop

With type="clustered" it renders ReactionListClustered. With any other type, or none, it renders up to four ReactionListItem pills in a row, then a ReactionListCountItem with the number of other types. A prop set here is used when it's truthy; otherwise the context value is.

ReactionListBottom

With type="segmented" it renders a ReactionListItem pill for every type, five to a row, or six without counts. With any other type, or none, it renders ReactionListClustered. A prop set here is used when it's truthy; otherwise the context value is.

ReactionListClustered

Renders the icons of up to four reaction types in one pill, followed by the number of other types when there are more. Pressing it reports the reactionList emitter, and by default opens the reactions sheet with every type.

ReactionListItem

Renders one reaction type as a pill: its icon, or the Unknown icon when the type isn't in supportedReactions, and its count. A press or a long press reports the reactionList emitter with additionalInfo.reactionType, and by default opens the reactions sheet at that type.

ReactionListItem reads nothing from context: the lists pass every prop.

ReactionListCountItem

Renders "+3", the number of reaction types ReactionListTop leaves out. It renders nothing for a count of 0. Pressing it opens the reactions sheet with every type.

ReactionListItemWrapper

The Pressable pill the items and the clustered list render in. They import it directly, so the ReactionListItemWrapper override key has no effect; style the pill through theme.messageItemView.reactionListItemWrapper. It takes every Pressable prop, and:

The reaction picker

MessageReactionPicker renders above the message while the message menu is open: the reactions of supportedReactions with isMain, the ones the user gave highlighted, and a button that opens a sheet with the full emoji list. Picking a reaction closes the menu, then calls handleReaction. It renders nothing when the user can't send reactions.

The emoji sheet lists a fixed set of emojis, whatever supportedReactions holds.

The reactions sheet

MessageUserReactions renders in a bottom sheet, which showReactionsOverlay opens: the total count, a row of the message's reaction types with their counts, and the users who reacted, loaded page by page, newest first. Picking a type in the row filters the users. The + button at the start of the row shows the emoji list; picking an emoji calls the message's handleReaction and closes the sheet.

MessageUserReactionsItem

Renders one user in the sheet, with the MessageUserReactionsAvatar override, the name, or "You" with "Tap to remove", and the reaction's icon. Pressing the user's own reaction removes it through handleReaction. It isn't exported; replace it with the MessageUserReactionsItem key.

MessageUserReactionsAvatar

Renders the avatar of the user who reacted, or their initials.

Related hooks

• useMessageContext() returns the message's reactions, hasReactions, handleReaction, handleToggleReaction and showReactionsOverlay.
• useMessagesContext() returns supportedReactions, reactionListPosition and reactionListType.
• useFetchReactions({ message, reactionType, sort }) loads the users who reacted, as the sheet does. See Message hooks.