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"
      }
    }
  },
  "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;

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

​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

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