> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-rn-guide-message-privately.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Message Composer

> Compose and send messages including text, media, and attachments with CometChatMessageComposer component in React Native UI Kit.

<Accordion title="AI Integration Quick Reference">
  ```json theme={null}
  {
    "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"
    }
  }
  ```
</Accordion>

## Where It Fits

`CometChatMessageComposer` is a [Component](/ui-kit/react-native/components-overview#components) 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.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/ubfBSdV1t6rmjxeA/images/8becc772-message_composer-0cc03defaf535f332f7f8bb1ebd65392.png?fit=max&auto=format&n=ubfBSdV1t6rmjxeA&q=85&s=63ac0e879493e89c1e9c1f3cf64762da" width="2560" height="464" data-path="images/8becc772-message_composer-0cc03defaf535f332f7f8bb1ebd65392.png" />
</Frame>

***

## Minimal Render

```tsx lines theme={null}
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.

```tsx lines theme={null}
onSendButtonPress?: (message: CometChat.BaseMessage) => void
```

```tsx lines theme={null}
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).

```tsx lines theme={null}
onError?: (error: CometChat.CometChatException) => void
```

```tsx lines theme={null}
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.

```tsx lines theme={null}
onTextChange?: (text: string) => void
```

```tsx lines theme={null}
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.

```tsx lines theme={null}
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);
    };
  }, []);
}
```

<Note>
  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.
</Note>

***

## 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](/ui-kit/react-native/mentions-formatter-guide).

```tsx lines theme={null}
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()}
  />
);
```

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/21UBnagXOw-XG0Sv/images/b2f00911-mentions_message_composer-b1d1dd7961bc3c2953e7439bb516200b.png?fit=max&auto=format&n=21UBnagXOw-XG0Sv&q=85&s=c886b57cd8be05c98b3bd434564b0fa4" width="1280" height="800" data-path="images/b2f00911-mentions_message_composer-b1d1dd7961bc3c2953e7439bb516200b.png" />
</Frame>

### attachmentOptions

Override the default attachment options with custom actions.

```tsx lines theme={null}
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}
  />
);
```

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/mkn0UqPQ5BXljCV1/images/927b388b-message_composer_attachment_options-7fab1d4e46f7ec14b998d555d3d26968.png?fit=max&auto=format&n=mkn0UqPQ5BXljCV1&q=85&s=d2e9b3451e541330e1f7ab0d931caf67" width="1280" height="935" data-path="images/927b388b-message_composer_attachment_options-7fab1d4e46f7ec14b998d555d3d26968.png" />
</Frame>

### addAttachmentOptions

Extends the default attachment options with additional actions.

```tsx lines theme={null}
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.

```tsx lines theme={null}
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}
  />
);
```

<Note>
  The MessageComposer Component utilizes the AuxiliaryButton to provide sticker functionality. Overriding the AuxiliaryButton will replace the sticker functionality.
</Note>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/mq8rEbFfi0JjKmkM/images/673c7c47-message_composer_auxiliary_button_view-d7be5a9bcabce2d9260e8338658c8fc7.png?fit=max&auto=format&n=mq8rEbFfi0JjKmkM&q=85&s=8929f8860703b90cc37190fc9613417a" width="1280" height="240" data-path="images/673c7c47-message_composer_auxiliary_button_view-d7be5a9bcabce2d9260e8338658c8fc7.png" />
</Frame>

### SendButtonView

Replace the send button with a custom view.

```tsx lines theme={null}
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}
  />
);
```

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/PaxBG9I1yMoeQmt2/images/3a7932a2-message_composer_send_button_view-f2e27a65301a5ced00e5854fa3b4ee6f.png?fit=max&auto=format&n=PaxBG9I1yMoeQmt2&q=85&s=e7fc395bd6636a43914c08b6bd3bc59d" width="1280" height="240" data-path="images/3a7932a2-message_composer_send_button_view-f2e27a65301a5ced00e5854fa3b4ee6f.png" />
</Frame>

### HeaderView

Custom view above the composer input.

```tsx lines theme={null}
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}
  />
);
```

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/OOBJyP9hM0C-rAe_/images/dbb04a8b-message_composer_header_view-11ddf1d50aa74a8868351007037451f9.png?fit=max&auto=format&n=OOBJyP9hM0C-rAe_&q=85&s=6bee9583cac2bc229ac5dc609bf183ac" width="1280" height="240" data-path="images/dbb04a8b-message_composer_header_view-11ddf1d50aa74a8868351007037451f9.png" />
</Frame>

***

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

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/_MYSdWhXnUkTkjEH/images/482915e0-message_composer_styling-db627f8855f376a0287e9d2d7f0be603.png?fit=max&auto=format&n=_MYSdWhXnUkTkjEH&q=85&s=fe719e924fae4184690af713328fdf28" width="1280" height="232" data-path="images/482915e0-message_composer_styling-db627f8855f376a0287e9d2d7f0be603.png" />
</Frame>

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

<CardGroup cols={2}>
  <Card title="Message List" icon="message" href="/ui-kit/react-native/message-list">
    Display the list of messages in a conversation
  </Card>

  <Card title="Message Header" icon="heading" href="/ui-kit/react-native/message-header">
    Display user or group details in the chat toolbar
  </Card>

  <Card title="Messages" icon="comments" href="/ui-kit/react-native/message-list">
    Complete messaging interface with header, list, and composer
  </Card>

  <Card title="Component Styling" icon="paintbrush" href="/ui-kit/react-native/component-styling">
    Customize the appearance of UI Kit components
  </Card>
</CardGroup>