Directory Structure

Overview of the CometChat UI Kit Builder directory layout for React Native — understand where to find and customize components, settings, and styles.

The UI Kit Builder for React Native organizes code into logical directories for components, configuration, navigation, and utilities. This guide helps you navigate the structure so you know exactly where to make changes.

src/
├── components/
│   ├── conversations/     # Chat and messaging components
│   ├── calls/             # Voice/video calling components
│   ├── groups/            # Group management components
│   ├── users/             # User management components
│   └── login/             # Authentication components
├── config/
│   ├── store.ts           # Zustand store for configuration
│   └── config.json        # Default configuration template
├── navigation/            # App navigation setup
├── utils/                 # Helper utilities and constants
└── assets/                # Icons, images, and fonts

---

Root Files

File	Purpose
App.tsx	Main application entry point with theme provider setup
package.json	Project dependencies and npm scripts
metro.config.js	Metro bundler configuration
babel.config.js	Babel transpiler configuration

---

Key Folders

config/

Configuration management for the Builder settings.

config/
├── store.ts      # Zustand store managing Builder settings state
└── config.json   # Default configuration with all feature toggles

File	Purpose
store.ts	Zustand store that manages Builder settings, provides hooks for accessing configuration
config.json	Default configuration template with all feature flags, layout, and style settings

components/

Each component folder contains the main component file and associated hooks. These are the building blocks of your chat UI.

components/
├── conversations/     # Conversation list, message threads, chat UI
├── calls/             # Call screens, call logs, call controls
├── groups/            # Group list, group details, member management
├── users/             # User list, user profiles, presence indicators
└── login/             # Login screen, authentication flow

navigation/

Navigation configuration using React Navigation.

navigation/
├── AppNavigator.tsx   # Main navigation stack
├── TabNavigator.tsx   # Bottom tab navigation
└── types.ts           # Navigation type definitions

utils/

Utility functions and application constants.

utils/
├── AppConstants.tsx   # CometChat credentials (APP_ID, AUTH_KEY, REGION)
└── helpers.ts         # General utility functions

assets/

Static assets including icons, images, and fonts.

assets/
├── icons/             # App icons and UI icons
├── images/            # Illustrations and backgrounds
└── fonts/             # Custom font files

---

Platform Directories

ios/

iOS-specific native code and configuration.

ios/
├── YourApp/
│   ├── AppDelegate.mm     # iOS app delegate
│   ├── Info.plist         # iOS app configuration
│   └── Resources/
│       └── Fonts/         # iOS font files
└── Podfile                # CocoaPods dependencies

android/

Android-specific native code and configuration.

android/
├── app/
│   ├── src/main/
│   │   ├── AndroidManifest.xml   # Android app manifest
│   │   ├── assets/
│   │   │   └── fonts/            # Android font files
│   │   ├── java/                 # Native Android code
│   │   └── res/                  # Android resources
│   └── build.gradle              # App-level Gradle config
├── build.gradle                  # Project-level Gradle config
└── settings.gradle               # Gradle settings

---

Quick Reference: Where to Customize

What you want to change	Where to look
Enable/disable features	src/config/config.json
Access configuration at runtime	src/config/store.ts
CometChat credentials	src/utils/AppConstants.tsx
Theme colors & styles	App.tsx (theme provider)
Custom fonts	src/assets/fonts/, platform font directories
Navigation structure	src/navigation/
Chat UI components	src/components/conversations/
Call UI components	src/components/calls/
User management UI	src/components/users/
Group management UI	src/components/groups/

Prefer using config.json for feature toggles and the theme provider in App.tsx for styling. For extensive changes, create new components rather than modifying core files directly.

---

Next Steps

UI Kit Builder Settings

Configure feature toggles and behavior.

Customizations

Modify component props, styling, and behavior.

Theming

Customize colors, typography, and styling.

Components

Explore available UI components.