Compact Message Composer

Compact React Native message input with rich text, attachments, mentions, voice recording, and message editing.

AI Integration Quick Reference

Field	Value
Component	CometChatCompactMessageComposer
Package	@cometchat/chat-uikit-react-native
Import	import { CometChatCompactMessageComposer } from "@cometchat/chat-uikit-react-native";
Purpose	Compact message input with optional rich text formatting (bold, italic, underline, strikethrough, links, lists, blockquotes, inline code, code blocks), auto-expanding input, attachments, mentions, voice recording, and message editing support.
Data props	user · group · parentMessageId · text · initialComposertext · placeHolderText
Primary output	onSendButtonPress(message) — fires before the message is sent
Other actions	onChangeText · onError · onVoiceRecordingStart · onVoiceRecordingEnd · onAttachmentClick · onMentionLimitReached — details
View slots	HeaderView · FooterView · AuxiliaryButtonView · SecondaryButtonView · SendButtonView — details
UI events	ccMessageSent · ccMessageEdited
Styling	style prop — tokens and overrides
Prerequisites	CometChatUIKit.init() completed and a user logged in
Stitching	Pass user or group prop to composer -> onSendButtonPress fires with CometChat.BaseMessage -> message appears in MessageList (with CometChatMessageHeader · CometChatMessageList)

composer.replaceSelection() requires @cometchat/chat-uikit-react-native 5.5.1 or later. It does not exist on the ComposerInputHandle in 5.5.0. Every other handle method, and the rest of this page, works on either version.

Where It Fits

CometChatCompactMessageComposer is a Component that provides a compact, streamlined message input with optional rich text formatting capabilities. Its formatting toolbar supports bold, italic, underline, strikethrough, links, lists, blockquotes, inline code, and code blocks, along with auto-expanding input, attachments, mentions, voice recording, and message editing.

This is a compact variant of CometChatMessageComposer. It shares the same props API but adds rich text formatting controls, auto-expanding input configuration, and additional callbacks.

Wire it alongside CometChatMessageHeader and CometChatMessageList to build a standard chat view.

---

Minimal Render

import { CometChatCompactMessageComposer } from "@cometchat/chat-uikit-react-native";

function CompactComposerDemo() {
  return <CometChatCompactMessageComposer user={chatUser} />;
}

export default CompactComposerDemo;

---

Actions and Events

Callback Props

onSendButtonPress

Fires when the send message button is clicked. Overrides the default send behavior.

onSendButtonPress?: (message: CometChat.BaseMessage) => void

import { CometChatCompactMessageComposer } from "@cometchat/chat-uikit-react-native";
import { CometChat } from "@cometchat/chat-sdk-react-native";

function CompactComposerWithCustomSend() {
  const onSendButtonPressHandler = (message: CometChat.BaseMessage) => {
    console.log("Custom send:", message);
  };

  return (
    <CometChatCompactMessageComposer
      user={chatUser}
      onSendButtonPress={onSendButtonPressHandler}
    />
  );
}

onError

Fires on internal errors (network failure, auth issue, SDK exception).

onError?: (error: CometChat.CometChatException) => void

import { CometChatCompactMessageComposer } from "@cometchat/chat-uikit-react-native";
import { CometChat } from "@cometchat/chat-sdk-react-native";

function CompactComposerWithErrorHandler() {
  return (
    <CometChatCompactMessageComposer
      user={chatUser}
      onError={(error: CometChat.CometChatException) => {
        console.error("Composer error:", error);
      }}
    />
  );
}

onChangeText

Fires as the user types in the composer input.

onChangeText?: (text: string) => void

import { CometChatCompactMessageComposer } from "@cometchat/chat-uikit-react-native";

function CompactComposerWithTextTracking() {
  return (
    <CometChatCompactMessageComposer
      user={chatUser}
      onChangeText={(text: string) => {
        console.log("Text changed:", text);
      }}
    />
  );
}

onMentionLimitReached

Fires when the maximum mention limit per message is reached.

onMentionLimitReached?: () => void

import { CometChatCompactMessageComposer } from "@cometchat/chat-uikit-react-native";

function CompactComposerWithMentionLimit() {
  return (
    <CometChatCompactMessageComposer
      user={chatUser}
      maxMentionLimit={5}
      onMentionLimitReached={() => {
        console.log("Mention limit reached");
      }}
    />
  );
}

Global UI Events

CometChatUIEventHandler emits events subscribable from anywhere in the application. Add listeners and remove them on cleanup.

Event	Fires when	Payload
ccMessageSent	A message is sent	{ message: CometChat.BaseMessage, status: string }
ccMessageEdited	A message is edited	{ message: CometChat.BaseMessage, status: string }

When to use: sync external UI with message state changes. For example, update a notification badge when messages are sent, or trigger analytics when a message is edited.

import { useEffect } from "react";
import { CometChatUIEventHandler } from "@cometchat/chat-uikit-react-native";

function useCompactComposerEvents() {
  useEffect(() => {
    const listenerId = "COMPACT_COMPOSER_EVENTS_" + Date.now();

    CometChatUIEventHandler.addMessageListener(listenerId, {
      ccMessageSent: (item) => {
        console.log("Message sent:", item);
      },
      ccMessageEdited: (item) => {
        console.log("Message edited:", item);
      },
    });

    return () => {
      CometChatUIEventHandler.removeMessageListener(listenerId);
    };
  }, []);
}

In React 18 StrictMode, useEffect runs twice on mount in development. The component handles listener cleanup internally, but any additional listeners added alongside the component need cleanup in the useEffect return function to avoid duplicate event handling.

---

Rich Text Formatting

The CompactMessageComposer includes a built-in rich text editor. Rich text is enabled by default via enableRichTextEditor={true}.

Formatting Toolbar

The toolbar provides the following formatting tools:

Tool	Description
Bold	Bold text
Italic	Italic text
Underline	Underline text
Strikethrough	Strikethrough text
Link	Wrap the selected text in a link — opens a prompt for the URL
Numbered List	Convert the current line/block to an ordered list
Bulleted List	Convert the current line/block to an unordered list
Blockquote	Convert the current line/block to a blockquote
Code	Inline code
Code Block	Multi-line fenced code block

Toolbar Visibility Modes

The toolbar supports multiple display modes controlled via props:

enableRichTextEditor	hideRichTextFormattingOptions	Result
false	-	Plain text, no formatting UI
true (default)	false (default)	Toolbar visible above input
true	true	No toolbar UI, only text selection menu items work

Text Selection Menu Items

On React Native, the showTextSelectionMenuItems prop controls whether Bold, Italic, Underline, and Strikethrough options appear in the native text selection context menu (long-press popup). This is enabled by default.

Enter Key Behavior (Android Only)

The enterKeyBehavior prop controls what happens when the Enter key is pressed on Android. On iOS, Enter always inserts a new line.

import { CometChatCompactMessageComposer, EnterKeyBehavior } from "@cometchat/chat-uikit-react-native";

// Send message on Enter (Android)
<CometChatCompactMessageComposer
  user={chatUser}
  enterKeyBehavior={EnterKeyBehavior.SendMessage}
/>

// New line on Enter (default)
<CometChatCompactMessageComposer
  user={chatUser}
  enterKeyBehavior={EnterKeyBehavior.NewLine}
/>

Toolbar Configuration Examples

// Toolbar visible above input (the default)
<CometChatCompactMessageComposer
  user={chatUser}
  enableRichTextEditor={true}
  hideRichTextFormattingOptions={false}
/>

// Rich text enabled with text selection menu items only
<CometChatCompactMessageComposer
  user={chatUser}
  enableRichTextEditor={true}
  hideRichTextFormattingOptions={true}
  showTextSelectionMenuItems={true}
/>

// Plain text only (no formatting)
<CometChatCompactMessageComposer
  user={chatUser}
  enableRichTextEditor={false}
/>

---

Auto-Expanding Input

The CompactMessageComposer input auto-expands as the user types, up to a configurable maximum.

Prop	Type	Default	Description
maxLines	number	5	Maximum lines before scrolling is enabled
minInputHeight	number	40	Minimum height for the input in pixels
maxInputHeight	number	144 (calculated from maxLines)	Maximum height for the input. Overrides maxLines if both provided

<CometChatCompactMessageComposer
  user={chatUser}
  maxLines={3}
  minInputHeight={36}
  maxInputHeight={120}
/>

---

Custom View Slots

Each slot replaces a section of the default UI. Slots that accept parameters receive the relevant data for customization.

Slot	Signature	Replaces
HeaderView	({ user, group }) => JSX.Element	Area above the composer input
FooterView	({ user, group }) => JSX.Element	Area below the composer input
AuxiliaryButtonView	({ user, group, composerId }) => JSX.Element	Sticker button area
SecondaryButtonView	({ user, group, composerId }) => JSX.Element	Attachment button area
SendButtonView	({ user, group, composerId }) => JSX.Element	Send button
ToolbarTrailingButtonsView	({ user, group, composerId, composer }) => JSX.Element	Adds views at the end of the formatting toolbar
attachmentOptions	CometChatMessageComposerAction[]	Default attachment options list
addAttachmentOptions	CometChatMessageComposerAction[]	Additional attachment options appended to defaults
textFormatters	CometChatTextFormatter[]	Text formatting in composer

textFormatters

Custom text formatters for the composer input. To configure the existing Mentions look and feel check out CometChatMentionsFormatter.

import {
  CometChatCompactMessageComposer,
  CometChatTextFormatter,
  CometChatMentionsFormatter,
} from "@cometchat/chat-uikit-react-native";

const getTextFormatters = () => {
  const textFormatters: CometChatTextFormatter[] = [];
  const mentionsFormatter = new CometChatMentionsFormatter();
  mentionsFormatter.setMentionsStyle({
    textStyle: { color: "#D6409F" },
    selfTextStyle: { color: "#30A46C" },
  });
  textFormatters.push(mentionsFormatter);
  return textFormatters;
};

return (
  <CometChatCompactMessageComposer
    user={chatUser}
    textFormatters={getTextFormatters()}
  />
);

attachmentOptions

Override the default attachment options with custom actions.

import { CometChatCompactMessageComposer } from "@cometchat/chat-uikit-react-native";
import { CometChat } from "@cometchat/chat-sdk-react-native";

const getCustomAttachmentOptions = ({
  user,
  group,
  composerId,
}: {
  user?: CometChat.User;
  group?: CometChat.Group;
  composerId: Map<any, any>;
}): CometChatMessageComposerAction[] => {
  return [
    {
      id: "location",
      icon: LocationIcon,
      title: "Share Location",
      style: { iconStyle: { tintColor: "grey" } },
      onPress: () => {
        // handle location share
      },
    },
  ];
};

return (
  <CometChatCompactMessageComposer
    user={chatUser}
    attachmentOptions={getCustomAttachmentOptions}
  />
);

addAttachmentOptions

Extends the default attachment options with additional actions.

import { CometChatCompactMessageComposer } from "@cometchat/chat-uikit-react-native";
import { CometChat } from "@cometchat/chat-sdk-react-native";

const getAdditionalAttachmentOptions = ({
  user,
  group,
  composerId,
}: {
  user?: CometChat.User;
  group?: CometChat.Group;
  composerId: Map<any, any>;
}): CometChatMessageComposerAction[] => {
  return [
    {
      id: "location",
      icon: LocationIcon,
      title: "Share Location",
      style: { iconStyle: { tintColor: "grey" } },
      onPress: () => {
        // handle location share
      },
    },
  ];
};

return (
  <CometChatCompactMessageComposer
    user={chatUser}
    addAttachmentOptions={getAdditionalAttachmentOptions}
  />
);

AuxiliaryButtonView

Replace the sticker button area with a custom view.

import { CometChat } from "@cometchat/chat-sdk-react-native";
import { CometChatCompactMessageComposer } from "@cometchat/chat-uikit-react-native";
import { TouchableOpacity, Image, StyleSheet } from "react-native";

const styles = StyleSheet.create({
  button: {
    height: 25,
    width: 25,
    borderRadius: 0,
    backgroundColor: "transparent",
  },
  image: {
    height: 23,
    width: 24,
    tintColor: "#7E57C2",
  },
});

const customAuxiliaryButtonView = ({
  user,
  group,
  composerId,
}: {
  user?: CometChat.User;
  group?: CometChat.Group;
  composerId: string | number;
}): JSX.Element => {
  return (
    <TouchableOpacity style={styles.button} onPress={() => {}}>
      <Image source={LocationIcon} style={styles.image} />
    </TouchableOpacity>
  );
};

return (
  <CometChatCompactMessageComposer
    user={chatUser}
    AuxiliaryButtonView={customAuxiliaryButtonView}
  />
);

The CompactMessageComposer Component utilizes the AuxiliaryButton to provide sticker functionality. Overriding the AuxiliaryButton will replace the sticker functionality.

SendButtonView

Replace the send button with a custom view.

import { CometChat } from "@cometchat/chat-sdk-react-native";
import { CometChatCompactMessageComposer } from "@cometchat/chat-uikit-react-native";
import { TouchableOpacity, Image, StyleSheet } from "react-native";

const styles = StyleSheet.create({
  button: {
    height: 25,
    width: 25,
    borderRadius: 0,
    backgroundColor: "transparent",
  },
  image: {
    height: 23,
    width: 24,
    tintColor: "#7E57C2",
  },
});

const customSendButtonView = ({
  user,
  group,
  composerId,
}: {
  user?: CometChat.User;
  group?: CometChat.Group;
  composerId: string | number;
}): JSX.Element => {
  return (
    <TouchableOpacity style={styles.button} onPress={() => {}}>
      <Image source={SendButtonIcon} style={styles.image} />
    </TouchableOpacity>
  );
};

return (
  <CometChatCompactMessageComposer
    user={chatUser}
    SendButtonView={customSendButtonView}
  />
);

ToolbarTrailingButtonsView

Render your own buttons at the trailing end of the rich-text formatting toolbar, after the built-in buttons and a divider. This is the place for a formatting control the toolbar does not have — for example, a color button that colors the selected text.

Besides user, group and composerId, the render function receives a composer handle (ComposerInputHandle) for reading and changing the input — without it a toolbar button could not act on the text.

import { CometChat } from "@cometchat/chat-sdk-react-native";
import {
  CometChatCompactMessageComposer,
  ComposerInputHandle,
} from "@cometchat/chat-uikit-react-native";
import { Text, TouchableOpacity } from "react-native";

const ColorRedButton = ({ composer }: { composer: ComposerInputHandle }) => {
  // A code block is sent as raw text, so a color applied inside one is lost.
  const inCodeBlock = composer.getActiveStyles().codeBlock;

  return (
    <TouchableOpacity
      accessibilityLabel="Color selected text red"
      disabled={inCodeBlock}
      style={{ paddingHorizontal: 8, paddingVertical: 4, opacity: inCodeBlock ? 0.4 : 1 }}
      onPress={() => composer.applyInlineStyle("color", "#E11D48")}>
      <Text style={{ color: "#E11D48", fontWeight: "700" }}>A</Text>
    </TouchableOpacity>
  );
};

function ComposerWithColor({ chatUser }: { chatUser: CometChat.User }) {
  return (
    <CometChatCompactMessageComposer
      user={chatUser}
      ToolbarTrailingButtonsView={({ composer }) => <ColorRedButton composer={composer} />}
    />
  );
}

The slot lives inside the toolbar, so it only renders while the toolbar is visible — enableRichTextEditor true and hideRichTextFormattingOptions false, which are the defaults. It does not appear in the native text selection menu. For a complete walkthrough with a swatch picker, see the Text Color guide.

Render your controls inline in the toolbar rather than in a Modal. A modal takes focus from the input, which collapses the selection before your command runs.

The composer handle:

Method	Description
getText()	Current plain-text content
getSelection()	Current selection as { start, end } — collapsed when there is only a caret
setText(text)	Replaces the content
setSelection(start, end?)	Moves the selection; omit end for a caret
insertLink(url, text)	Inserts a link, wrapping the selection when there is one
replaceSelection(text)	Replaces the selected text, or inserts at the caret when nothing is selected
toggleBold() / toggleItalic() / toggleUnderline() / toggleStrikethrough() / toggleCode()	Same as the built-in toolbar buttons
clearFormatting()	Removes all inline formatting from the selection
applyInlineStyle(key, value)	Applies "color" or "backgroundColor" (any React Native color string) to the selection, skipping mentions
removeInlineStyle(key)	Removes that style from the selection
getMentionRanges()	Mention ranges in plain-text positions
getActiveStyles()	Formatting at the caret: bold, italic, underline, strikethrough, code, codeBlock, highlight, blockType, alignment

Only "color" is sent with the message, as <color=#rrggbb>…</color>, and the UI Kit renders it in the bubble automatically. "backgroundColor" styles the composer only and is dropped on send.

HeaderView

Custom view above the composer input.

import { CometChat } from "@cometchat/chat-sdk-react-native";
import { CometChatCompactMessageComposer } from "@cometchat/chat-uikit-react-native";
import { View, Text, StyleProp, ViewStyle } from "react-native";

const viewStyle: StyleProp<ViewStyle> = {
  flexDirection: "row",
  alignItems: "flex-start",
  justifyContent: "center",
  padding: 5,
  borderColor: "black",
  borderWidth: 1,
  backgroundColor: "white",
  borderRadius: 10,
  margin: 2,
  marginLeft: 7.4,
  height: 30,
  width: "95.5%",
};

const customHeaderView = ({
  user,
  group,
}: {
  user?: CometChat.User;
  group?: CometChat.Group;
}) => {
  return (
    <View style={viewStyle}>
      <Text style={{ color: "#6851D6", fontWeight: "bold" }}>Chat Bot</Text>
    </View>
  );
};

return (
  <CometChatCompactMessageComposer
    user={chatUser}
    HeaderView={customHeaderView}
  />
);

FooterView

Custom view below the composer input.

import { CometChat } from "@cometchat/chat-sdk-react-native";
import { CometChatCompactMessageComposer } from "@cometchat/chat-uikit-react-native";
import { View, Text } from "react-native";

const customFooterView = ({
  user,
  group,
}: {
  user?: CometChat.User;
  group?: CometChat.Group;
}) => {
  return (
    <View style={{ padding: 8 }}>
      <Text style={{ fontSize: 12, color: "#999" }}>End-to-end encrypted</Text>
    </View>
  );
};

return (
  <CometChatCompactMessageComposer
    user={chatUser}
    FooterView={customFooterView}
  />
);

---

Styling

Using the style prop you can customize the look and feel of the component in your app. These parameters typically control elements such as the color, size, shape, and fonts used within the component.

<CometChatCompactMessageComposer
  user={chatUser}
  style={{
    containerStyle: { backgroundColor: "#F5F5F5" },
    messageInputStyles: {
      containerStyle: { borderColor: "#6851D6" },
      textStyle: { color: "#333333" },
      placeHolderTextColor: "#999999",
    },
  }}
/>

Visibility Props

Property	Description	Code
user	User object for 1-on-1 conversation	user={chatUser}
group	Group object for group conversation	group={chatGroup}
disableTypingEvents	Disable/enable typing events	disableTypingEvents={true}
disableSoundForOutgoingMessages	Toggle sound for outgoing messages	disableSoundForOutgoingMessages={true}
initialComposertext	Set predefined text	initialComposertext="Your custom text"
placeHolderText	Placeholder text for the input	placeHolderText="Type a message..."
customSoundForOutgoingMessage	Custom sound for outgoing messages	customSoundForOutgoingMessage="your-sound"
hideVoiceRecordingButton	Hide voice recording option	hideVoiceRecordingButton={true}
hideCameraOption	Hide camera option from attachments	hideCameraOption={true}
hideImageAttachmentOption	Hide image attachment option	hideImageAttachmentOption={true}
hideVideoAttachmentOption	Hide video attachment option	hideVideoAttachmentOption={true}
hideAudioAttachmentOption	Hide audio attachment option	hideAudioAttachmentOption={true}
hideFileAttachmentOption	Hide file attachment option	hideFileAttachmentOption={true}
hidePollsAttachmentOption	Hide polls attachment option	hidePollsAttachmentOption={true}
hideCollaborativeDocumentOption	Hide collaborative document option	hideCollaborativeDocumentOption={true}
hideCollaborativeWhiteboardOption	Hide collaborative whiteboard option	hideCollaborativeWhiteboardOption={true}
hideAttachmentButton	Hide attachment button	hideAttachmentButton={true}
hideStickersButton	Hide stickers button	hideStickersButton={true}
hideSendButton	Hide send button	hideSendButton={true}
hideAuxiliaryButtons	Hide auxiliary buttons	hideAuxiliaryButtons={true}
disableMentions	Disable mentions functionality	disableMentions={true}
disableMentionAll	Disable @all mention	disableMentionAll={true}
mentionAllLabel	Custom label for @all mention	mentionAllLabel="everyone"
imageQuality	Image quality for camera (1-100)	imageQuality={50}
auxiliaryButtonsAlignment	Alignment of auxiliary buttons	auxiliaryButtonsAlignment="right"
enableRichTextEditor	Enable/disable rich text formatting	enableRichTextEditor={true}
hideRichTextFormattingOptions	Hide the formatting toolbar; formatting stays available from the text selection menu	hideRichTextFormattingOptions={true}
showTextSelectionMenuItems	Formatting in native text selection menu	showTextSelectionMenuItems={true}
enterKeyBehavior	Android Enter key behavior	enterKeyBehavior={EnterKeyBehavior.SendMessage}
maxLines	Maximum lines before scrolling	maxLines={3}
minInputHeight	Minimum input height in pixels	minInputHeight={36}
maxInputHeight	Maximum input height in pixels	maxInputHeight={120}
maxMentionLimit	Maximum mentions per message	maxMentionLimit={5}

---

Configuration

SingleLineMessageComposerConfiguration can be used to pass configuration when embedding the CompactMessageComposer inside other components:

import { SingleLineMessageComposerConfiguration } from "@cometchat/chat-uikit-react-native";

const config = new SingleLineMessageComposerConfiguration({
  disableTypingEvents: true,
  hideVoiceRecording: true,
  disableMentions: false,
  maxLines: 3,
  placeHolderText: "Write something...",
});

---

Next Steps

Message Composer

Full-featured multi-line message composer component

Message List

Display the list of messages in a conversation

Mentions Formatter

Implement @mentions in your chat application

Component Styling

Customize the appearance of UI Kit components