> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-llms-scoped-indexes.mintlify.site/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-docs-llms-scoped-indexes/i4Q5Nw9DEcclqV3C/images/mobile-chat-builder.png?fit=max&auto=format&n=i4Q5Nw9DEcclqV3C&q=85&s=2664907a370a629c2d32e9c24e56b152" 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)


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