Input Box View

Overview

The InputBoxView component provides an input area for messages in a chat application. It includes features for text input, voice recording, and GIF selection, making it a versatile and interactive chat input component.

UI Components

The InputBoxView includes the following elements:

• Text Input: Allows users to type messages with support for multiline input, mentions, and dynamic placeholders.
• Voice Notes: Features for recording, playing, and clearing voice notes.
• GIF Picker: An optional GIF selection button integrated with GiphyDialog.
• Dynamic States: Handles animations and states like deleting recordings, voice playback, and recording lock.

Props

Property	Type	Description	Optional
handleStopRecordProp	Function	Custom callback triggered when stopping voice recording. Defaults to context's handleStopRecord.	✔️
clearVoiceRecordProp	Function	Custom callback triggered to clear the current voice recording. Defaults to context's clearVoiceRecord.	✔️
onPausePlayProp	Function	Custom callback triggered to pause voice playback. Defaults to context's onPausePlay.	✔️
onResumePlayProp	Function	Custom callback triggered to resume voice playback. Defaults to context's onResumePlay.	✔️
handleGifProp	Function	Custom callback triggered when selecting a GIF. Defaults to GiphyDialog.show.	✔️

Features

1. Voice Recording:

   • Start, stop, and clear voice recordings.
   • Lock recordings with a slide-to-cancel feature.
   • Supports playback with pause and resume functionality.

2. GIF Selection:

   • Integrated GIF picker with customizable callback.

3. Dynamic Input Styles:

   • Adapts placeholder text, text color, and styles based on the chatroom type and upload screen state.

4. Mentions and Mentions Styling:

   • Supports mentions using "@" with configurable styles.

5. Animations:

   • Includes Lottie animations for delete actions.

Usage Example

To Customise Callbacks

Define custom callbacks for recording, gif selection and pass them to the handleStopRecordProp, clearVoiceRecordProp and handleGifProp of the <InputBoxView/> 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 gif selection behavior
  const handleGifSelection = () => {
    console.log("GIF Picker activated");
  };

  // Customize stop recording behavior
  const handleStopRecording = () => {
    console.log("Recording stopped");
  };

  // Customize clear recording behavior
  const clearRecording = () => {
    console.log("Recording cleared");
  };

  return (
    <View>
      <VoiceNoteRecordToast />

      <InputWrapper>
        <InputWrapperLeftSection>
          <UserTaggingList />
          <ReplyBoxView />
          <LinkPreviewInputView />
          <EditBox />

          <TextInputWrapper>
            <AddMoreFilesView />
            {/* Add InputBoxView component like this*/}
            <InputBoxView
              handleStopRecordProp={handleStopRecording}
              clearVoiceRecordProp={clearRecording}
              handleGifProp={handleGifSelection}
            />
            <AddFilesView />
          </TextInputWrapper>
        </InputWrapperLeftSection>

        <RecordSendInputFabView />
      </InputWrapper>

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

export default CustomMessageInputBox;

Customise <InputBoxView /> UI Component

• Create a new component CustomInputBoxView, referencing the InputBoxView 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 CustomInputBoxView from "<path_to_custom_input_box_view_component>";

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

  return (
    <View>
      <VoiceNoteRecordToast />

      <InputWrapper>
        <InputWrapperLeftSection>
          <UserTaggingList />
          <ReplyBoxView />
          <LinkPreviewInputView />
          <EditBox />

          <TextInputWrapper>
            <AddMoreFilesView />
            {/* Add CustomInputBoxView component like this*/}
            <CustomInputBoxView />
            <AddFilesView />
          </TextInputWrapper>
        </InputWrapperLeftSection>

        <RecordSendInputFabView />
      </InputWrapper>

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

export default CustomMessageInputBox;

• Use the CustomMessageInputBox component as a child of the MessageInput component in the relevant screens:
  • Chatroom Screen
  • File Upload Screen