Project Structure

Understanding the project structure will help you navigate the templates and integrate them into your projects efficiently.

Project Structure Overview

dev-app/
├── app/
│   ├── _layout.tsx
│   ├── index.tsx
│   └── templates/          # All UI templates
│       ├── authentication/
│       ├── dashboard/
│       ├── ecommerce/
│       ├── social/
│       └── [more categories...]
├── components/
│   ├── ui/                 # 50+ primitive components
│   └── custom/             # Custom components
├── utils/                  # Context providers &amp; utilities
├── assets/                 # Fonts, icons, images
└── [config files]          # App configuration

Core Directories

`app/` Directory

The main application folder using Expo Router for navigation. _layout.tsx - Root layout file that wraps your entire app with essential providers:

Theme Provider (light/dark mode)
Color Provider (color palette switching)
RTL Provider (right-to-left language support)
Drawer Provider (navigation state)

index.tsx - Home screen that lists all available templates for easy navigation and testing. templates/ - Contains all 50+ ready-to-use UI templates organized by category.

`components/` Directory

All reusable components that power the templates. components/ui/ - 50+ primitive UI components built with gluestack-ui:

Button, Input, Text, Card, Modal, etc.
Each component includes:
- index.tsx - Main component implementation
- styles.tsx - Styling configuration (optional)
- index.web.tsx - Web-optimized variant (optional)

components/custom/ - Custom-built components for specific use cases like headers, special layouts, etc.

`utils/` Directory

Utility functions and React context providers:

theme-context/ - Manages light and dark mode switching
color-context/ - Handles color palette customization
rtl-lang-context/ - Enables RTL language support
drawer-context/ - Controls drawer navigation state
color-palette.ts - Color definitions and theme tokens

`assets/` Directory

Static resources used throughout the app:

fonts/ - Custom font files
icons/ - SVG icon components
images/ - App icons, splash screens, and images

Template Organization

All templates are located in app/templates/ and organized by category for easy discovery:

Template Structure

Each template follows a consistent structure:

template-name/
├── index.tsx              # Main screen component
├── data.ts                # Mock data (optional)
├── types.ts               # TypeScript types (optional)
├── components.tsx         # Helper components (optional)
└── components/            # Sub-components folder (optional)

How Templates Work

Self-Contained - Each template is independent and can be copied directly to your project
Mock Data - Templates include sample data in data.ts for quick preview and testing
Type-Safe - Full TypeScript support with defined types in types.ts
Customizable - Built with NativeWind/Tailwind for easy styling modifications
Component Reuse - Templates use components from components/ui/ which you'll need to copy along with the template

Getting Started

To use a template in your project:

Navigate to app/templates/[category]/[template-name]/
Copy the entire template folder to your project
Copy any required UI components from components/ui/
Install dependencies from package.json
Integrate the template into your app's navigation
Customize the data, styles, and functionality

The dev-app serves as both a showcase and a source repository where you can explore all templates before integrating them into your production app.

Go backUI Components

Project Structure