Compact Message Composer - CometChat Docs

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}. 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

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

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 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

​Where It Fits

​Minimal Render

​Actions and Events

​Callback Props

​onSendButtonPress

​onError

​onChangeText

​onMentionLimitReached

​Global UI Events

​Rich Text Formatting

​Formatting Toolbar

​Toolbar Visibility Modes

​Text Selection Menu Items

​Enter Key Behavior (Android Only)

​Toolbar Configuration Examples

​Auto-Expanding Input

​Custom View Slots

​textFormatters

​attachmentOptions

​addAttachmentOptions

​AuxiliaryButtonView

​SendButtonView

​ToolbarTrailingButtonsView

​HeaderView

​FooterView

​Styling

​Visibility Props

​Configuration

​Next Steps

Message Composer

Message List

Mentions Formatter

Component Styling

Where It Fits

Minimal Render

Actions and Events

Callback Props

onSendButtonPress

onError

onChangeText

onMentionLimitReached

Global UI Events

Rich Text Formatting

Formatting Toolbar

Toolbar Visibility Modes

Text Selection Menu Items

Enter Key Behavior (Android Only)

Toolbar Configuration Examples

Auto-Expanding Input

Custom View Slots

textFormatters

attachmentOptions

addAttachmentOptions

AuxiliaryButtonView

SendButtonView

ToolbarTrailingButtonsView

HeaderView

FooterView

Styling

Visibility Props

Configuration

Next Steps