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

ReactionListBottom

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} />

Function to handle a reaction on a message. This function is called when a user reacts to a message. The function is passed the message ID, the reaction type, and the user ID of the user who reacted to the message. The function should update the message with the reaction and update the message in the message context.

Type	Default
`(reactionType: string) => Promise<void>` \| `undefined`	`undefined`

`hasReactions`

True if the message has at least 1 reaction.

Type
boolean

`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

`supportedReactions`

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

Type	Default
Array	reactionData

MessageSystem

ReactionListTop