> ## Documentation Index
> Fetch the complete documentation index at: https://www.cometchat.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# 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/`                       |

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

***

## Next Steps

<CardGroup cols={2}>
  <Card title="UI Kit Builder Settings" href="/chat-builder/react-native/builder-settings">
    Configure feature toggles and behavior.
  </Card>

  <Card title="Customizations" href="/chat-builder/react-native/builder-customisations">
    Modify component props, styling, and behavior.
  </Card>

  <Card title="Theming" href="/ui-kit/react-native/theme">
    Customize colors, typography, and styling.
  </Card>

  <Card title="Components" href="/ui-kit/react-native/components-overview">
    Explore available UI components.
  </Card>
</CardGroup>