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