Skip to main content

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. The component integrates with InputBoxContext for managing state and utilizes Redux for dispatching actions related to message input.

GitHub File:

LMFeedMediaPreviewScreen

UI Components​

The InputBoxView includes the following elements:

  • Text Input: Supports multiline input, mentions, and dynamic placeholders.
  • Voice Notes: Enables recording, playback, and clearing of voice notes.
  • GIF Picker: Optional GIF selection button integrated with GiphyDialog.
  • Dynamic States: Manages animations and states like deleting recordings, voice playback, and recording lock.

Theming Customizations​

The InputBoxView component supports theming through inputBoxStyles.inputBoxViewStyles. These styles are dynamically applied using STYLES.setInputBoxViewStyles. The following properties are available:

Property NameTypeDescription
voiceNotesInputParentViewStyleCustom styling for the parent container of voice notes input.
recordTitleTextStyleCustom styling for the title of the voice recording.
emojiLMChatIconPropsCustomization of emoji icons, including assetPath, iconStyle, height, and width.
inputObjectCustomization of input box styles such as border, padding, and background color.
chevronLMChatIconPropsCustomization of the chevron icon, including assetPath, iconStyle, height, and width.

Customization of Icons​

You can customize asset paths and styles of the icons used in the InputBoxView component:

Icon NameProperty NameDescription
Record IconemojiCustomize the record button icon.
Stop Recording IconemojiCustomize the stop recording button icon.
Cross IconemojiCustomize the close button icon.
Left Chevron IconchevronCustomize the left chevron icon.
Play IconemojiCustomize the play icon for voice notes.
Pause IconemojiCustomize the pause icon for voice notes.

Props​

PropertyTypeDescriptionOptional
handleStopRecordPropFunctionCustom callback triggered when stopping voice recording. Defaults to context's handleStopRecord.✔️
clearVoiceRecordPropFunctionCustom callback triggered to clear the current voice recording. Defaults to context's clearVoiceRecord.✔️
onPausePlayPropFunctionCustom callback triggered to pause voice playback. Defaults to context's onPausePlay.✔️
onResumePlayPropFunctionCustom callback triggered to resume voice playback. Defaults to context's onResumePlay.✔️
handleGifPropFunctionCustom 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 Styling:

    • Supports mentions using "@" with configurable styles.

  5. Animations:

    • Includes Lottie animations for delete actions.

Usage Example​

Customizing Callbacks and Styling​

Define custom callbacks and apply styles dynamically using STYLES.setInputBoxViewStyles directly within MessageInputBox.

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 MessageInputBox = () => {
    // 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");
  };

  // Define custom styles
  const inputBoxStyles = {
    voiceNotesInputParent: {
      padding: 10,
      backgroundColor: "lightgray",
    },
    recordTitle: {
      fontSize: 16,
      color: "#333",
    },
    emoji: {
      assetPath: "path to your image", // Replace with your image path
      height: 25,
      width: 25,
    },
    chevron: {
      assetPath: "path to your image", // Replace with your image path
      height: 20,
      width: 20,
    },
    input: {
      borderWidth: 1,
      borderColor: "#ccc",
      borderRadius: 8,
      padding: 10,
      backgroundColor: "#f9f9f9",
    },
    stopRecordingIcon: {
      assetPath: "path to your image", // Replace with your image path
      height: 25,
      width: 25,
    },
    crossIcon: {
      assetPath: "path to your image", // Replace with your image path
      height: 20,
      width: 20,
    },
    leftChevronIcon: {
      assetPath: "path to your image", // Replace with your image path
      height: 20,
      width: 20,
    },
    playIcon: {
      assetPath: "path to your image", // Replace with your image path
      height: 25,
      width: 25,
    },
    pauseIcon: {
      assetPath: "path to your image", // Replace with your image path
      height: 25,
      width: 25,
    },
  };
  STYLES.setInputBoxViewStyles(inputBoxStyles);

  return (
    <View>
      <VoiceNoteRecordToast />

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

          <TextInputWrapper>
            <AddMoreFilesView />
            {/* InputBoxView with dynamic styles from STYLES and custom callbacks */}
            <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 MessageInputBox;