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

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 for full steps.

---

Try It Locally

React Native Builder Source

Clone the sample, run it on iOS/Android, and experiment with QR-based configurations.

---

Next Steps

Integration

Step-by-step guide to integrate the UI Kit Builder.

Builder Settings

Understand the settings file and feature toggles.

Customizations

Adjust component props, behavior, and UI elements.

Directory Structure

See how the exported code is organized.

---

Helpful Resources

React Native UI Kit Docs

Official UI Kit documentation with component APIs, theming, and guides.

Support Portal

Reach CometChat support for troubleshooting and production issues.

Community & Issues

File bugs, request features, or learn from community fixes.

---

Need Help?

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