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

# Compact Message Composer

> Compact React Native message input with rich text, attachments, mentions, voice recording, and message editing.

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

## Where It Fits

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

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

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

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

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

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

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

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

```tsx lines theme={null}
onMentionLimitReached?: () => void
```

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

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

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

***

## Rich Text Formatting

The CompactMessageComposer includes a built-in rich text editor. Rich text is enabled by default via `enableRichTextEditor={true}`.

### Formatting Toolbar

The toolbar provides the following formatting tools:

| Tool          | Description        |
| ------------- | ------------------ |
| Bold          | Bold text          |
| Italic        | Italic text        |
| Underline     | Underline text     |
| Strikethrough | Strikethrough text |
| Code          | Inline code        |

### Toolbar Visibility Modes

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 |

### Text Selection Menu Items

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.

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

```tsx lines theme={null}
// Toolbar always visible above input
<CometChatCompactMessageComposer
  user={chatUser}
  enableRichTextEditor={true}
  hideRichTextFormattingOptions={true}
/>
```

```tsx lines theme={null}
// Rich text enabled with text selection menu items only
<CometChatCompactMessageComposer
  user={chatUser}
  enableRichTextEditor={true}
  showTextSelectionMenuItems={true}
/>
```

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

```tsx lines theme={null}
<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](/ui-kit/react-native/mentions-formatter-guide).

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

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

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

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

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

### SendButtonView

Replace the send button with a custom view.

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

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

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

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

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

<CardGroup cols={2}>
  <Card title="Message Composer" icon="pen-to-square" href="/ui-kit/react-native/message-composer">
    Full-featured multi-line message composer component
  </Card>

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

  <Card title="Mentions Formatter" icon="at" href="/ui-kit/react-native/mentions-formatter-guide">
    Implement @mentions in your chat application
  </Card>

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