Reaction List

Overview

The ReactionList component is responsible for rendering a list of emojis that a user can press so to react to a message in a chatroom

GitHub File:

• ReactionList

Styling Customisations

These styling customisations can be applied through the setReactionListStyle method on the STYLES class

Property	Type	Description
reactionSize	number	Defines the size of the reaction icon.
reactionLeftItemStroke	string	Sets the stroke color for the left reaction.
reactionRightItemStroke	string	Sets the stroke color for the right reaction.
reactionItemBorderRadius	number	Defines the border radius for reaction items.
gap	number	Specifies the gap between items.
selectedMessageBackgroundColor	string	Sets the background color of selected messages.
tabOptionColor	string	Defines the color for the tab option.

Usage Example

• In your app, create a CustomChatroomScreen file, wrap it with the ChatRoom context provider.
• Now, you can pass your own reaction list component as prop to the ChatRoom context provider

import {
  ChatRoom,
  ChatroomHeader,
  MessageList,
  MessageInput,
  useChatroomContext,
  useMessageListContext,

  ChatroomTopic,
  STYLES
} from "@likeminds.community/chat-rn-core";
import {InputBoxContextProvider} from '@likeminds.community/chat-rn-core/ChatSX/context/InputBoxContext';
import {ChatroomContextValues} from '@likeminds.community/chat-rn-core/ChatSX/context/ChatroomContext';
import MessageInputBox from "@likeminds.community/chat-rn-core/ChatSX/components/InputBox";

export function CustomChatroomScreen() {

  const {
    chatroomID,
    chatroomWithUser,
    currentChatroomTopic,
    chatroomType,
    replyChatID,
    isEditable,
    chatroomName,
    isSecret,
    refInput,
    chatroomDBDetails,
    chatRequestState,
    setIsEditable,
    handleFileUpload,
    joinSecretChatroom,
    onTapToUndo,
  }: ChatroomContextValues = useChatroomContext();

  return (
    <ChatRoom 
      customReactionList={<"CUSTOM_REACTION_LIST_COMPONENT">}
    >

      {/* ChatroomHeader */}
      <ChatroomHeader />

      {/* ChatroomTopic */}
      <ChatroomTopic />

      {/* MessageList */}
      <MessageList />

      {/* Input Box Flow */}
      <InputBoxContextProvider
        chatroomName={chatroomName}
        chatroomWithUser={chatroomWithUser}
        replyChatID={replyChatID}
        chatroomID={chatroomID}
        isUploadScreen={false}
        myRef={refInput}
        handleFileUpload={handleFileUpload}
        isEditable={isEditable}
        setIsEditable={(value: boolean) => {
          setIsEditable(value);
        }}
        isSecret={isSecret}
        chatroomType={chatroomType}
        currentChatroomTopic={currentChatroomTopic}
        isPrivateMember={chatroomDBDetails.isPrivateMember}
        chatRequestState={chatRequestState}>
        <MessageInput>
          <MessageInputBox />
        </MessageInput>
      </InputBoxContextProvider>
    </ChatRoom>
  );
}