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

ReactionListTop

ReactionListTop 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 ReactionListTop on the Channel component.

Basic Usage

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

import { Channel, ReactionListTop, ReactionListTopProps } from 'stream-chat-react-native';

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

<Channel ReactionListTop={ReactionListTopWithCustomBackground} />

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