Skip to main content

Reply Box View

Overview​

The ReplyBoxView component displays a reply interface for responding to specific messages in a chatroom. It allows users to view the message they are replying to and includes a close button to dismiss the reply box. The component integrates seamlessly with state management and provides customization options.

LMFeedMediaPreviewScreen

UI Components​

The ReplyBoxView includes the following elements:

  • Reply Box: Displays the message being replied to, utilizing the ReplyBox component.
  • Close Button: A clickable button to dismiss the reply box, with customizable behavior.

Props​

PropertyTypeDescriptionOptional
handleReplyBoxClosePropFunctionCustom callback function triggered when the close button is pressed. If not provided, the default behavior dispatches actions to reset the reply state.✔️

Features​

  1. Dynamic Reply Box:

    • Displays the message being replied to, with additional context (e.g., chatroom name).

  2. Customizable Close Action:

    • Supports a custom callback for closing the reply box or defaults to resetting the reply state.

  3. Seamless State Management:

    • Uses context (InputBoxContext) and Redux dispatch for managing reply states (isReply and replyMessage).

Usage Example​

To Customise Callbacks​

Define a custom method like handleReplyBoxClose and pass it to the handleReplyBoxCloseProp of the <ReplyBoxView/> component.

import React from "react";
import { View } from "react-native";
import {
  AddFilesView,
  AddMoreFilesView,
  EditBox,
  InputBoxView,
  InputWrapper,
  InputWrapperLeftSection,
  LinkPreviewInputView,
  ReplyBoxView,
  SelectFilesModal,
  SendDMRequestModal,
  TextInputWrapper,
  useInputBoxContext,
  VoiceNoteRecordToast,
  UserTaggingList,
  RecordSendInputFabView,
} from "@likeminds.community/chat-rn-core";

const CustomMessageInputBox = () => {
  const { hideDMSentAlert, message, DMSentAlertModalVisible, onSend } =
    useInputBoxContext();

  // Customize the reply box close behavior, else simply avoid passing it as a prop to the ReplyBoxView component
  const handleReplyBoxClose = () => {
    console.log("Reply box closed");
  };

  return (
    <View>
      <VoiceNoteRecordToast />

      <InputWrapper>
        <InputWrapperLeftSection>
          <UserTaggingList />
          {/* Add ReplyBoxView component like this*/}
          <ReplyBoxView handleReplyBoxCloseProp={handleReplyBoxClose} />
          <LinkPreviewInputView />
          <EditBox />

          <TextInputWrapper>
            <AddMoreFilesView />
            <InputBoxView />
            <AddFilesView />
          </TextInputWrapper>
        </InputWrapperLeftSection>

        <RecordSendInputFabView />
      </InputWrapper>

      <SelectFilesModal />
      <SendDMRequestModal
        hideDMSentAlert={hideDMSentAlert}
        DMSentAlertModalVisible={DMSentAlertModalVisible}
        onSend={onSend}
        message={message}
      />
    </View>
  );
};

export default CustomMessageInputBox;

Customise <ReplyBoxView /> UI Component​

  • Create a new component CustomReplyBoxView, referencing the ReplyBoxView component.
  • Perform your UI customizations in the new component.
import React from "react";
import { View } from "react-native";
import {
  AddFilesView,
  AddMoreFilesView,
  EditBox,
  InputBoxView,
  InputWrapper,
  InputWrapperLeftSection,
  LinkPreviewInputView,
  ReplyBoxView,
  SelectFilesModal,
  SendDMRequestModal,
  TextInputWrapper,
  useInputBoxContext,
  VoiceNoteRecordToast,
  UserTaggingList,
  RecordSendInputFabView,
} from "@likeminds.community/chat-rn-core";
import CustomReplyBoxView from "<path_to_custom_reply_box_view_component>";

const CustomMessageInputBox = () => {
  const { hideDMSentAlert, message, DMSentAlertModalVisible, onSend } =
    useInputBoxContext();

  return (
    <View>
      <VoiceNoteRecordToast />

      <InputWrapper>
        <InputWrapperLeftSection>
          <UserTaggingList />
          {/* Add CustomReplyBoxView component like this*/}
          <CustomReplyBoxView />
          <LinkPreviewInputView />
          <EditBox />

          <TextInputWrapper>
            <AddMoreFilesView />
            <InputBoxView />
            <AddFilesView />
          </TextInputWrapper>
        </InputWrapperLeftSection>

        <RecordSendInputFabView />
      </InputWrapper>

      <SelectFilesModal />
      <SendDMRequestModal
        hideDMSentAlert={hideDMSentAlert}
        DMSentAlertModalVisible={DMSentAlertModalVisible}
        onSend={onSend}
        message={message}
      />
    </View>
  );
};

export default CustomMessageInputBox;