import { Channel, ReactionListTop, ReactionListTopProps } from 'stream-chat-react-native';
const ReactionListTopWithCustomBackground = (props: ReactionListTopProps) => <ReactionListTop {...props} fill={'#00DDDD'} />
<Channel ReactionListTop={ReactionListTopWithCustomBackground} />
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.
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 |