Message Input Box

The MessageInputBox component is designed to facilitate message sending within our chat app. It internally utilizes the LMChatTextInput component, offering full customization capabilities.

Customisations Available

MessageInputBox supports below styling customisations as of now. All of the styling customisations are optional as of now, if some styling customisation is not provided, then we pick up the default styling which we have.

Customisable props available along with their types:

Parameter	Type	Optional	Customizable Properties for objects
placeholderTextColor	string	✔️
selectionColor	string	✔️
partsTextStyle	object	✔️	• color: string
plainTextStyle	object	✔️	• color: string
placeholderText	string	✔️
inputTextStyle	object	✔️	• flexGrow: number • fontSize: string • fontFamily: string • maxHeight: number • padding: number • marginBottom: number • overflow: string
sendIconStyles	object	✔️	• width: number • height: number • resizeMode: string • marginLeft: number • tintColor: string
attachmentIconStyles	object	✔️	• width: number • height: number • resizeMode: string
micIconStyles	object	✔️	• width: number • height: number • resizeMode: string • tintColor: string
cameraIconStyles	object	✔️	• width: number • height: number • resizeMode: string
galleryIconStyles	object	✔️	• width: number • height: number • resizeMode: string
documentIconStyles	object	✔️	• width: number • height: number • resizeMode: string
pollIconStyles	object	✔️	• width: number • height: number • resizeMode: string

Code snippet

import { STYLES } from "@likeminds.community/chat-rn-core";

// styling for inputBoxStyles
const inputBoxStyles = {
  placeholderTextColor: "#aaa",
  selectionColor: "#3CA874",
  partsTextStyle: {
    color: "#3CA874",
  },
  sendIconStyles: {
    tintColor: "black",
  },
  micIconStyles: {
    tintColor: "black",
  },
};

if (inputBoxStyles) {
  STYLES.setInputBoxStyle(inputBoxStyles);
}

return <LMOverlayProvider
  lmChatClient={lmChatClient}
  userName={userName}
  userUniqueId={userUniqueId}
  profileImageUrl={profileImageUrl}
  lmChatInterface={lmChatInterface}
>
  {/* Add navigation container */}
</LMOverlayProvider>;