Skip to main content
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.

Root Files

FilePurpose
App.tsxMain application entry point with theme provider setup
package.jsonProject dependencies and npm scripts
metro.config.jsMetro bundler configuration
babel.config.jsBabel transpiler configuration

Key Folders

config/

Configuration management for the Builder settings.
FilePurpose
store.tsZustand store that manages Builder settings, provides hooks for accessing configuration
config.jsonDefault 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.
Navigation configuration using React Navigation.

utils/

Utility functions and application constants.

assets/

Static assets including icons, images, and fonts.

Platform Directories

ios/

iOS-specific native code and configuration.

android/

Android-specific native code and configuration.

Quick Reference: Where to Customize

What you want to changeWhere to look
Enable/disable featuressrc/config/config.json
Access configuration at runtimesrc/config/store.ts
CometChat credentialssrc/utils/AppConstants.tsx
Theme colors & stylesApp.tsx (theme provider)
Custom fontssrc/assets/fonts/, platform font directories
Navigation structuresrc/navigation/
Chat UI componentssrc/components/conversations/
Call UI componentssrc/components/calls/
User management UIsrc/components/users/
Group management UIsrc/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.