ReactionListTop

ReactionList component is used to display the reactions added to a message right on top of it.

This is the default component provided to the prop ReactionList on the Channel component.

Basic Usage

Use case: Override the background color on the reaction list container.

import { Channel, ReactionList, ReactionListProps } from 'stream-chat-react-native';

const ReactionListWithCustomBackground = (props: ReactionListProps) => <ReactionList {...props} fill={'#00DDD'} stroke={'#fffff'} />

<Channel ReactionList={ReactionListWithCustomBackground} />

Props

`alignment`

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

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

`fill`

Background color for reaction list container when alignment is left.

Type
String

`hasReactions`

True if the message has at least 1 reaction.

Type
boolean

`messageContentWidth`

Width of message content. This helps ReactionList align itself on the front-edge of the message content. This value gets computed in MessageContent once the content gets loaded.

Type
Number

`onLongPress`

Default long press handler for message UI.

Type
function

`onPress`

Default press handler for message UI.

Type
function

`onPressIn`

Default pressIn handler for message UI.

Type
function

`preventPress`

`reactions`

List of reactions added to the message.

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

Type
array

`reactionSize`

Dimensions for each reaction icon.

Type
Number

`showMessageOverlay`

Function to open the message action overlay. This function gets called when user long presses a message.

Type
`(showMessageReactions?: boolean) => void`

`supportedReactions`

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

Type	Default
Array	reactionData

ReactionListBottom

Video Thumbnail