Compact Message Composer - CometChat Docs

AI Integration Quick Reference

{
  "component": "CometChatCompactMessageComposer",
  "package": "@cometchat/chat-uikit-react-native",
  "import": "import { CometChatCompactMessageComposer } from \"@cometchat/chat-uikit-react-native\";",
  "description": "Compact message input with optional rich text formatting (bold, italic, underline, strikethrough, code), auto-expanding input, attachments, mentions, voice recording, and message editing support.",
  "primaryOutput": {
    "prop": "onSendButtonPress",
    "type": "(message: CometChat.BaseMessage) => void"
  },
  "props": {
    "data": {
      "user": { "type": "CometChat.User", "default": "undefined" },
      "group": { "type": "CometChat.Group", "default": "undefined" },
      "parentMessageId": { "type": "string | number", "default": "undefined" },
      "text": { "type": "string", "default": "\"\"" },
      "initialComposertext": { "type": "string", "default": "\"\"" },
      "placeHolderText": { "type": "string", "default": "\"Enter your message here\"" }
    },
    "callbacks": {
      "onSendButtonPress": "(message: CometChat.BaseMessage) => void",
      "onChangeText": "(text: string) => void",
      "onError": "(error: CometChat.CometChatException) => void",
      "onVoiceRecordingStart": "() => void",
      "onVoiceRecordingEnd": "(recordedFile: string) => void",
      "onAttachmentClick": "() => void",
      "onMentionLimitReached": "() => void"
    },
    "visibility": {
      "hideVoiceRecordingButton": { "type": "boolean", "default": false },
      "hideCameraOption": { "type": "boolean", "default": false },
      "hideImageAttachmentOption": { "type": "boolean", "default": false },
      "hideVideoAttachmentOption": { "type": "boolean", "default": false },
      "hideAudioAttachmentOption": { "type": "boolean", "default": false },
      "hideFileAttachmentOption": { "type": "boolean", "default": false },
      "hidePollsAttachmentOption": { "type": "boolean", "default": false },
      "hideCollaborativeDocumentOption": { "type": "boolean", "default": false },
      "hideCollaborativeWhiteboardOption": { "type": "boolean", "default": false },
      "hideAttachmentButton": { "type": "boolean", "default": false },
      "hideStickersButton": { "type": "boolean", "default": false },
      "hideSendButton": { "type": "boolean", "default": false },
      "hideAuxiliaryButtons": { "type": "boolean", "default": false }
    },
    "richText": {
      "enableRichTextEditor": { "type": "boolean", "default": true },
      "hideRichTextFormattingOptions": { "type": "boolean", "default": false },
      "showTextSelectionMenuItems": { "type": "boolean", "default": true },
      "enterKeyBehavior": { "type": "EnterKeyBehavior", "default": "EnterKeyBehavior.NewLine", "note": "Android only" }
    },
    "autoExpand": {
      "maxLines": { "type": "number", "default": 5 },
      "minInputHeight": { "type": "number", "default": 40 },
      "maxInputHeight": { "type": "number", "default": 144 }
    },
    "configuration": {
      "imageQuality": { "type": "number (1-100)", "default": 20 },
      "auxiliaryButtonsAlignment": { "type": "\"left\" | \"right\"", "default": "\"left\"" },
      "maxMentionLimit": { "type": "number", "default": 10 }
    },
    "sound": {
      "disableSoundForOutgoingMessages": { "type": "boolean", "default": false },
      "customSoundForOutgoingMessage": { "type": "audio source", "default": "built-in" }
    },
    "behavior": {
      "disableTypingEvents": { "type": "boolean", "default": false },
      "disableMentions": { "type": "boolean", "default": false },
      "disableMentionAll": { "type": "boolean", "default": false },
      "mentionAllLabel": { "type": "string", "default": "\"all\"" }
    },
    "viewSlots": {
      "HeaderView": "({ user, group }) => JSX.Element",
      "FooterView": "({ user, group }) => JSX.Element",
      "AuxiliaryButtonView": "({ user, group, composerId }) => JSX.Element",
      "SecondaryButtonView": "({ user, group, composerId }) => JSX.Element",
      "SendButtonView": "({ user, group, composerId }) => JSX.Element"
    },
    "formatting": {
      "textFormatters": {
        "type": "CometChatTextFormatter[]",
        "default": "default formatters from data source"
      },
      "attachmentOptions": {
        "type": "CometChatMessageComposerAction[]",
        "note": "Custom attachment options list"
      },
      "addAttachmentOptions": {
        "type": "CometChatMessageComposerAction[]",
        "note": "Additional attachment options to append to defaults"
      }
    }
  },
  "events": [
    {
      "name": "ccMessageSent",
      "payload": "{ message: CometChat.BaseMessage, status: string }",
      "description": "Triggers when a message is sent with status: inProgress, success, or error"
    },
    {
      "name": "ccMessageEdited",
      "payload": "{ message: CometChat.BaseMessage, status: string }",
      "description": "Triggers when a message is edited with status: inProgress, success, or error"
    }
  ],
  "compositionExample": {
    "description": "Compact message composer wired with message header and list for complete chat view",
    "components": [
      "CometChatMessageHeader",
      "CometChatMessageList",
      "CometChatCompactMessageComposer"
    ],
    "flow": "Pass user or group prop to composer -> onSendButtonPress fires with CometChat.BaseMessage -> message appears in MessageList"
  }
}

Where It Fits

CometChatCompactMessageComposer is a Component that provides a compact, streamlined message input with optional rich text formatting capabilities. It supports bold, italic, underline, strikethrough, and code formatting, 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
Code	Inline code

The toolbar supports multiple display modes controlled via props:

`enableRichTextEditor`	`hideRichTextFormattingOptions`	Result
`false`	-	Plain text, no formatting UI
`true`	`true`	Toolbar always visible above input
`true`	`false`	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 always visible above input
<CometChatCompactMessageComposer
  user={chatUser}
  enableRichTextEditor={true}
  hideRichTextFormattingOptions={true}
/>

// Rich text enabled with text selection menu items only
<CometChatCompactMessageComposer
  user={chatUser}
  enableRichTextEditor={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
`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}
  />
);

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`	Always-visible toolbar mode	`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

​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

HeaderView

FooterView

Styling

Visibility Props

Configuration

Next Steps