This is documentation for the release candidate Stream Chat React Native SDK v6. For the latest stable version, see the latest version (v5).

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