This is documentation for Stream Chat React Native SDK v5, which is nolonger actively maintained. For up-to-date documentation, see the latest version (v6).

OverlayReactions

OverlayReactions component is used to display the list of existing reactions within the message overlay, which opens up when the user long presses a message.

This is the default component provided to the prop OverlayReactions on the OverlayProvider component.

Props

`alignment`

Sets if the message should be aligned to right or left side of list.

Type	Default
enum(‘right’, ‘left’)	‘right’

`messageId`

The message ID for which the reactions are displayed.

Type	Default
`String` \| `undefined`	`undefined`

`reactions`

List of existing reactions which can be extracted from a message.

const reactions = message.latest_reactions.map((reaction) => ({
  alignment: clientId && clientId === reaction.user?.id ? "right" : "left",
  id: reaction?.user?.id || "",
  image: reaction?.user?.image,
  name: reaction?.user?.name || reaction.user_id || "",
  type: reaction.type,
}));

Type	Default
`Array` \| `undefined`	`undefined`

`showScreen`

Shared value from React Native Reanimated useSharedValue hook.

Type
Object

`supportedReactions`

List of reactions which can be added on message. Please refer to the guide on customizing reactions for details.

Type	Default
Array	reactionData

`title`

Title for the component.

Type
String

OverlayReactionsAvatar

OverlayContext