Message Composer - CometChat Docs

AI Integration Quick Reference

{
  "component": "CometChatMessageComposer",
  "package": "@cometchat/chat-uikit-react-native",
  "import": "import { CometChatMessageComposer } from \"@cometchat/chat-uikit-react-native\";",
  "description": "Rich text input for composing and sending text, media, attachments, mentions, voice notes, and custom messages.",
  "primaryOutput": {
    "prop": "onSendButtonPress",
    "type": "(message: CometChat.BaseMessage) => void"
  },
  "props": {
    "data": {
      "user": { "type": "CometChat.User", "default": "undefined" },
      "group": { "type": "CometChat.Group", "default": "undefined" },
      "parentMessageId": { "type": "number", "default": "undefined" },
      "initialComposertext": { "type": "string", "default": "\"\"" }
    },
    "callbacks": {
      "onSendButtonPress": "(message: CometChat.BaseMessage) => void",
      "onTextChange": "(text: string) => void",
      "onError": "(error: CometChat.CometChatException) => 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 }
    },
    "configuration": {
      "imageQuality": { "type": "number (1-100)", "default": 20 },
      "auxiliaryButtonsAlignment": { "type": "\"left\" | \"right\"", "default": "\"left\"" }
    },
    "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 }: { user?: CometChat.User, group?: CometChat.Group }) => JSX.Element",
      "AuxiliaryButtonView": "({ user, group, composerId }: { user?: CometChat.User, group?: CometChat.Group, composerId: string | number }) => JSX.Element",
      "SendButtonView": "({ user, group, composerId }: { user?: CometChat.User, group?: CometChat.Group, composerId: string | number }) => 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"
      },
      "enableMultipleAttachments": {
        "type": "boolean",
        "default": true,
        "note": "Enable the multi-attachment staging tray and batched send. Set false for legacy single-select, send-immediately behavior."
      }
    }
  },
  "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"
    },
    {
      "name": "ccMessageLiveReaction",
      "payload": "object",
      "description": "Triggers when user clicks on live reaction"
    }
  ],
  "compositionExample": {
    "description": "Message composer wired with message header and list for complete chat view",
    "components": [
      "CometChatMessageHeader",
      "CometChatMessageList",
      "CometChatMessageComposer"
    ],
    "flow": "Pass user or group prop to composer -> onSendButtonPress fires with CometChat.BaseMessage -> message appears in MessageList"
  }
}

Where It Fits

CometChatMessageComposer is a Component that enables users to write and send a variety of messages, including text, image, video, and custom messages. Features such as Live Reaction, Attachments, and Message Editing are also supported. Wire it alongside CometChatMessageHeader and CometChatMessageList to build a standard chat view.

Minimal Render

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

function MessageComposerDemo() {
  return <CometChatMessageComposer group={group} />;
}

export default MessageComposerDemo;

Multi-Attachment Staging Tray

When enableMultipleAttachments is true (the default), picking files does not send them immediately. Files are staged in a tray below the input, uploaded in the background, and sent together when the user taps send:

Pick — choose one or more files from the attachment (+) menu. In CometChatCompactMessageComposer, images and files copied to the clipboard can also be pasted straight into the composer — they stage into the tray as tiles, just like a pick (subject to the same count and size limits).
Stage & upload — each file becomes a tile in the tray and starts uploading right away with its own progress. The user can keep typing or add more files while uploads run. The voice-recording button hides while attachments are staged.
Review — remove any tile, or retry one whose upload failed. Tapping a rejected tile shows why it was rejected (as a toast).
Send — the staged files fan out into media messages that share a single batch, and the message list renders them as one connected group of plural bubbles.

Tray tile states

State	Meaning	Tile UI	Retryable
`UPLOADING`	Bytes are transferring	Progress overlay with percentage	—
`COMPLETED`	Uploaded, ready to send	Thumbnail (image/video first frame) or file/audio card	—
`FAILED`	Transfer failed (transient — e.g. network drop)	Retry control on the tile	Yes
`REJECTED`	File not accepted (see below)	Rejected marker; tap for the reason	No

Failed uploads are transient and can be retried; rejected files must be swapped out.

Attachment limits

Count — a batch holds up to a server-configured maximum (default 10, from the file.count.max app setting, resolved at runtime). The limit is all-or-nothing: if a pick would push the tray past the maximum, the entire new selection is rejected — nothing is staged — and a toast explains the limit. Already-staged files are untouched.
Per-file size — a file larger than the allowed size (file.size.max) is rejected as an individual tile; tapping the tile shows the size limit.

Batch send

On send, staged files are grouped by media kind and sent as one media message per kind, in a fixed order — Images → Videos → Audios → Files — all sharing a single batchId. The caption goes on the last message of the batch. The message list groups messages with the same batchId and renders them as one visually connected set.

Disabling the tray

Set enableMultipleAttachments={false} to revert to legacy single-select, send-immediately behavior — each attachment option sends one file straight away, with no staging tray. Pass the same value to CometChatMessageList so rendering matches.

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 { CometChatMessageComposer } from "@cometchat/chat-uikit-react-native";
import { CometChat } from "@cometchat/chat-sdk-react-native";

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

  return (
    <CometChatMessageComposer
      group={group}
      onSendButtonPress={onSendButtonPressHandler}
    />
  );
}

onError

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

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

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

function ComposerWithErrorHandler() {
  return (
    <CometChatMessageComposer
      group={group}
      onError={(error: CometChat.CometChatException) => {
        console.error("Composer error:", error);
      }}
    />
  );
}

onTextChange

Fires as the user types in the composer input.

onTextChange?: (text: string) => void

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

function ComposerWithTextTracking() {
  return (
    <CometChatMessageComposer
      group={group}
      onTextChange={(text: string) => {
        console.log("Text changed:", text);
      }}
    />
  );
}

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 }`
`ccMessageLiveReaction`	User clicks on live reaction	`object`

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 useComposerEvents() {
  useEffect(() => {
    const listenerId = "MESSAGE_COMPOSER_EVENTS_" + Date.now();

    CometChatUIEventHandler.addMessageListener(listenerId, {
      ccMessageSent: (item) => {
        console.log("Message sent:", item);
      },
      ccMessageEdited: (item) => {
        console.log("Message edited:", item);
      },
      ccMessageLiveReaction: (item) => {
        console.log("Live reaction:", 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.

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
`AuxiliaryButtonView`	`({ user, group, composerId }) => JSX.Element`	Sticker button area
`SendButtonView`	`({ user, group, composerId }) => JSX.Element`	Send button
`attachmentOptions`	`CometChatMessageComposerAction[]`	Default attachment options list
`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 {
  CometChatMessageComposer,
  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 (
  <CometChatMessageComposer
    group={group}
    textFormatters={getTextFormatters()}
  />
);

attachmentOptions

Override the default attachment options with custom actions.

import { CometChatMessageComposer } 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 (
  <CometChatMessageComposer
    group={group}
    attachmentOptions={getCustomAttachmentOptions}
  />
);

addAttachmentOptions

Extends the default attachment options with additional actions.

import { CometChatMessageComposer } 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 (
  <CometChatMessageComposer
    group={group}
    addAttachmentOptions={getAdditionalAttachmentOptions}
  />
);

AuxiliaryButtonView

Replace the sticker button area with a custom view.

import { CometChat } from "@cometchat/chat-sdk-react-native";
import { CometChatMessageComposer } 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 (
  <CometChatMessageComposer
    group={group}
    AuxiliaryButtonView={customAuxiliaryButtonView}
  />
);

The MessageComposer 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 { CometChatMessageComposer } 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 (
  <CometChatMessageComposer
    group={group}
    SendButtonView={customSendButtonView}
  />
);

HeaderView

Custom view above the composer input.

import { CometChat } from "@cometchat/chat-sdk-react-native";
import { CometChatMessageComposer } 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 (
  <CometChatMessageComposer
    group={group}
    HeaderView={customHeaderView}
  />
);

Styling

Using Style 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.

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"`
`customSoundForOutgoingMessage`	Custom sound for outgoing messages	`customSoundForOutgoingMessage="your-sound"`
`hideVoiceRecordingButton`	Hide voice recording option	`hideVoiceRecordingButton={true}`
`enableMultipleAttachments`	Multi-attachment staging tray and batched send (see Multi-Attachment Staging Tray)	`enableMultipleAttachments={false}`
`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"`

Next Steps

Message List

Display the list of messages in a conversation

Message Header

Display user or group details in the chat toolbar

Messages

Complete messaging interface with header, list, and composer

Component Styling

Customize the appearance of UI Kit components

​Where It Fits

​Minimal Render

​Multi-Attachment Staging Tray

​Tray tile states

​Attachment limits

​Batch send

​Disabling the tray

​Actions and Events

​Callback Props

​onSendButtonPress

​onError

​onTextChange

​Global UI Events

​Custom View Slots

​textFormatters

​attachmentOptions

​addAttachmentOptions

​AuxiliaryButtonView

​SendButtonView

​HeaderView

​Styling

​Visibility Props

​Next Steps

Message List

Message Header

Messages

Component Styling

Where It Fits

Minimal Render

Multi-Attachment Staging Tray

Tray tile states

Attachment limits

Batch send

Disabling the tray

Actions and Events

Callback Props

onSendButtonPress

onError

onTextChange

Global UI Events

Custom View Slots

textFormatters

attachmentOptions

addAttachmentOptions

AuxiliaryButtonView

SendButtonView

HeaderView

Styling

Visibility Props

Next Steps