Structure of packages Directory

The packages directory is where CloudNua Mobile centralizes code reusability, containing reusable components, UI elements, hooks, utility functions, configurations, and assets that can be seamlessly integrated into both your Expo and Next.js apps.

Directory Overview

|-- packages
|   |-- assets
|   |   |-- fonts
|   |   |-- icons
|   |   |-- images
|   |   |-- package.json
|   |-- components
|   |   |-- primitives
|   |   |-- custom
|   |   |-- package.json
|   |-- config
|   |-- hooks
|   |-- utils
|   |   |-- constants
|   |   |-- functions
|   |   |-- validators
|   |   |-- package.json

assets Directory

Houses static, non-code resources including:

• images: Logos and visual elements
• fonts: Custom typography files
• icons: Custom icon sets
• Other content: Video, audio, and static data files

components Directory

Maintains consistent UI across platforms through two subdirectories:

• primitives: Low-level, foundational components (Button, Input, Text, Image). Houses components from gluestack-ui.
• custom: Higher-level composite components built on primitives (ProductCard, ChatItem, UserProfile).

Benefits include code reusability, UI consistency across platforms, and improved development efficiency.

Naming convention: Use PascalCase for components; kebab-case for folder names (e.g., product-card).

config Directory

Stores common configurations your app requires.

hooks Directory

Contains custom React hooks for authentication, theme management, and other stateful logic reusable throughout the application.

utils Directory

Provides shared utility code organized into:

• constants: Fixed values like API endpoints and configuration settings
• functions: Reusable utilities for formatting, calculation, and network operations
• validators: Data validation functions ensuring user input conformity