> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-agent-native-development.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">
  | Field | Value |
  | - | - |
  | Component | `CometChatCompactMessageComposer` |
  | Package | `@cometchat/chat-uikit-react-native` |
  | Import | `import { CometChatCompactMessageComposer } from "@cometchat/chat-uikit-react-native";` |
  | Purpose | Compact message input with optional rich text formatting (bold, italic, underline, strikethrough, links, lists, blockquotes, inline code, code blocks), auto-expanding input, attachments, mentions, voice recording, and message editing support. |
  | Data props | `user` · `group` · `parentMessageId` · `text` · `initialComposertext` · `placeHolderText` |
  | Primary output | `onSendButtonPress(message)` — fires before the message is sent |
  | Other actions | `onChangeText` · `onError` · `onVoiceRecordingStart` · `onVoiceRecordingEnd` · `onAttachmentClick` · `onMentionLimitReached` — [details](#actions-and-events) |
  | View slots | `HeaderView` · `FooterView` · `AuxiliaryButtonView` · `SecondaryButtonView` · `SendButtonView` — [details](#custom-view-slots) |
  | UI events | `ccMessageSent` · `ccMessageEdited` |
  | Styling | `style` prop — [tokens and overrides](#styling) |
  | Prerequisites | `CometChatUIKit.init()` completed and a user logged in |
  | Stitching | Pass user or group prop to composer -> onSendButtonPress fires with CometChat.BaseMessage -> message appears in MessageList (with `CometChatMessageHeader` · `CometChatMessageList`) |
</Accordion>

<Note>
  **`composer.replaceSelection()` requires `@cometchat/chat-uikit-react-native` 5.5.1 or later.** It does not exist on the `ComposerInputHandle` in 5.5.0. Every other handle method, and the rest of this page, works on either version.
</Note>

## 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. Its formatting toolbar supports bold, italic, underline, strikethrough, links, lists, blockquotes, inline code, and code blocks, 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 |
| Link | Wrap the selected text in a link — opens a prompt for the URL |
| Numbered List | Convert the current line/block to an ordered list |
| Bulleted List | Convert the current line/block to an unordered list |
| Blockquote | Convert the current line/block to a blockquote |
| Code | Inline code |
| Code Block | Multi-line fenced code block |

### Toolbar Visibility Modes

The toolbar supports multiple display modes controlled via props:

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

```tsx lines theme={null}
// Rich text enabled with text selection menu items only
<CometChatCompactMessageComposer
  user={chatUser}
  enableRichTextEditor={true}
  hideRichTextFormattingOptions={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 |
| `ToolbarTrailingButtonsView` | `({ user, group, composerId, composer }) => JSX.Element` | Adds views at the end of the formatting toolbar |
| `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}
  />
);
```

### ToolbarTrailingButtonsView

Render your own buttons at the trailing end of the rich-text formatting toolbar, after the built-in buttons and a divider. This is the place for a formatting control the toolbar does not have — for example, a color button that colors the selected text.

Besides `user`, `group` and `composerId`, the render function receives a **`composer`** handle (`ComposerInputHandle`) for reading and changing the input — without it a toolbar button could not act on the text.

```tsx lines theme={null}
import { CometChat } from "@cometchat/chat-sdk-react-native";
import {
  CometChatCompactMessageComposer,
  ComposerInputHandle,
} from "@cometchat/chat-uikit-react-native";
import { Text, TouchableOpacity } from "react-native";

const ColorRedButton = ({ composer }: { composer: ComposerInputHandle }) => {
  // A code block is sent as raw text, so a color applied inside one is lost.
  const inCodeBlock = composer.getActiveStyles().codeBlock;

  return (
    <TouchableOpacity
      accessibilityLabel="Color selected text red"
      disabled={inCodeBlock}
      style={{ paddingHorizontal: 8, paddingVertical: 4, opacity: inCodeBlock ? 0.4 : 1 }}
      onPress={() => composer.applyInlineStyle("color", "#E11D48")}>
      <Text style={{ color: "#E11D48", fontWeight: "700" }}>A</Text>
    </TouchableOpacity>
  );
};

function ComposerWithColor({ chatUser }: { chatUser: CometChat.User }) {
  return (
    <CometChatCompactMessageComposer
      user={chatUser}
      ToolbarTrailingButtonsView={({ composer }) => <ColorRedButton composer={composer} />}
    />
  );
}
```

<Note>
  The slot lives inside the toolbar, so it only renders while the toolbar is visible — `enableRichTextEditor` `true` and `hideRichTextFormattingOptions` `false`, which are the defaults. It does not appear in the native text selection menu. For a complete walkthrough with a swatch picker, see the [Text Color guide](/ui-kit/react-native/guide-text-color).
</Note>

<Warning>
  Render your controls inline in the toolbar rather than in a `Modal`. A modal takes focus from the input, which collapses the selection before your command runs.
</Warning>

The `composer` handle:

| Method | Description |
| - | - |
| `getText()` | Current plain-text content |
| `getSelection()` | Current selection as `{ start, end }` — collapsed when there is only a caret |
| `setText(text)` | Replaces the content |
| `setSelection(start, end?)` | Moves the selection; omit `end` for a caret |
| `insertLink(url, text)` | Inserts a link, wrapping the selection when there is one |
| `replaceSelection(text)` | Replaces the selected text, or inserts at the caret when nothing is selected |
| `toggleBold()` / `toggleItalic()` / `toggleUnderline()` / `toggleStrikethrough()` / `toggleCode()` | Same as the built-in toolbar buttons |
| `clearFormatting()` | Removes all inline formatting from the selection |
| `applyInlineStyle(key, value)` | Applies `"color"` or `"backgroundColor"` (any React Native color string) to the selection, skipping mentions |
| `removeInlineStyle(key)` | Removes that style from the selection |
| `getMentionRanges()` | Mention ranges in plain-text positions |
| `getActiveStyles()` | Formatting at the caret: `bold`, `italic`, `underline`, `strikethrough`, `code`, `codeBlock`, `highlight`, `blockType`, `alignment` |

Only `"color"` is sent with the message, as `<color=#rrggbb>…</color>`, and the UI Kit renders it in the bubble automatically. `"backgroundColor"` styles the composer only and is dropped on send.

### 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` | Hide the formatting toolbar; formatting stays available from the text selection menu | `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>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.