GIF Conversation

Overview

The GIFConversation component handles the display of GIFs shared within conversations in the LikeMinds chat application. It allows users to view and engage with animated GIFs seamlessly, enhancing the visual and expressive elements of chat interactions. This component ensures smooth integration of GIFs into conversations, contributing to a more dynamic and engaging user experience.

GitHub File:

• GIFConversation

Customisation

The GIFConversation customisations can be done using chatBubbleStyles as shown in the Message component.

Usage Example

• In your app, create a CustomChatroomScreen file, wrap it with the ChatRoom context provider.
• Now, you can pass your own custom GIF message 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 
      customGifAttachmentConversation={<"CUSTOM_GIF_MESSAGE_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>
  );
}