> ## Documentation Index
> Fetch the complete documentation index at: https://www.cometchat.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# CometChat UI Kit Builder For React Native

> CometChat UI Kit Builder for React Native is a visual development tool that helps you design and configure chat experiences for React Native applications without building the interface from scratch.

It provides a set of prebuilt, production-ready messaging components backed by CometChat's real-time infrastructure.

With CometChat UI Kit Builder, you can:

* Configure chat and calling features
* Apply theming and layout options
* Export React Native-ready code via QR code scanning

The exported UI connects to CometChat's SDK and infrastructure, which manages message transport, sync, and backend scaling.

## What You Can Configure

Toggle these features on or off directly in the UI Kit Builder. For a full reference of each setting, see [UI Kit Builder Settings](/chat-builder/react-native/builder-settings).

### Chat Features

| Category                        | Includes                                                                                                                                               |
| ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Core Messaging Experience       | Typing indicators, threads, media sharing (photos, video, audio, files), edit & delete messages, read receipts, search, quoted replies, mark as unread |
| Deeper User Engagement          | Mentions, @all mentions, reactions, message translation, polls, collaborative whiteboard & document, voice notes, emojis, stickers, user & group info  |
| AI User Copilot                 | Conversation starters, conversation summaries, smart replies                                                                                           |
| User Management                 | Friends-only mode                                                                                                                                      |
| Group Management                | Create groups, add members, join/leave, delete groups, view members                                                                                    |
| Moderation                      | Content moderation, report messages, kick/ban users, promote/demote members                                                                            |
| Private Messaging Within Groups | Direct messages between group members                                                                                                                  |
| In-App Sounds                   | Incoming & outgoing message sounds                                                                                                                     |

### Call Features

| Category              | Includes                                                                             |
| --------------------- | ------------------------------------------------------------------------------------ |
| Voice & Video Calling | 1:1 voice calling, 1:1 video calling, group voice conference, group video conference |

### Layout

| Category | Includes                                |
| -------- | --------------------------------------- |
| Sidebar  | With Sidebar or Without Sidebar mode    |
| Tabs     | Conversations, Call Logs, Users, Groups |

### Theming

| Category   | Includes                                                    |
| ---------- | ----------------------------------------------------------- |
| Theme      | System, Light, or Dark mode                                 |
| Colors     | Brand color, primary & secondary text colors (light & dark) |
| Typography | Font family, text sizing (default, compact, comfortable)    |

***

## How to Use UI Kit Builder

### 1. Design

Configure your chat layout, toggle features, and pick a theme using the UI Kit Builder.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/fMPnzFAmFCFD5fSa/images/mobile-chat-builder.png?fit=max&auto=format&n=fMPnzFAmFCFD5fSa&q=85&s=0ec4b6efcc3c29aa365ea80719e14cc4" width="3014" height="1580" data-path="images/mobile-chat-builder.png" />
</Frame>

### 2. Export

Scan a QR code or export the configuration JSON to apply your settings to your React Native app.

### 3. Integrate

Drop the configuration into your React Native project, add your CometChat credentials, and run the app. See the [Integration Guide](/chat-builder/react-native/integration) for full steps.

***

## Try It Locally

<CardGroup>
  <Card title="React Native Builder Source" icon="github" href="https://github.com/cometchat-team/uikit-builder-app-react-native">
    Clone the sample, run it on iOS/Android, and experiment with QR-based configurations.
  </Card>
</CardGroup>

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Integration" href="/chat-builder/react-native/integration">
    Step-by-step guide to integrate the UI Kit Builder.
  </Card>

  <Card title="Builder Settings" href="/chat-builder/react-native/builder-settings">
    Understand the settings file and feature toggles.
  </Card>

  <Card title="Customizations" href="/chat-builder/react-native/builder-customisations">
    Adjust component props, behavior, and UI elements.
  </Card>

  <Card title="Directory Structure" href="/chat-builder/react-native/builder-dir-structure">
    See how the exported code is organized.
  </Card>
</CardGroup>

***

## Helpful Resources

<CardGroup>
  <Card title="React Native UI Kit Docs" href="https://www.cometchat.com/docs/ui-kit/react-native/5.0/getting-started">
    Official UI Kit documentation with component APIs, theming, and guides.
  </Card>

  <Card title="Support Portal" href="https://help.cometchat.com/hc/en-us/requests/new">
    Reach CometChat support for troubleshooting and production issues.
  </Card>

  <Card title="Community & Issues" href="https://github.com/cometchat-team/uikit-builder-app-react-native/issues">
    File bugs, request features, or learn from community fixes.
  </Card>
</CardGroup>

***

## Need Help?

* Developer Community: [https://community.cometchat.com/](https://community.cometchat.com/)
* Dashboard & Live Support: [https://app.cometchat.com](https://app.cometchat.com)
* UI Kit questions: [https://www.cometchat.com/docs/ui-kit/react-native/5.0/getting-started](https://www.cometchat.com/docs/ui-kit/react-native/5.0/getting-started)