🚀 Expo Template

This is a React Native template built with Expo 54. It provides a modern and responsive foundation for building mobile applications. It includes:

• Navigation (Auth/Main stacks)
• Theming and styling
• API integration
• State management
• Localization using i18n
• Reusable components
• Utility functions
• Custom hooks
• Scripts for easing development tasks
• Building tool (EAS)
• An overall ready-for-integration template with an atomic design system.

📋 Table of Contents

• ✨ Features
• 🛠️ Installation
• ⚙️ Prerequisites
• 📚 Usage
• 📸 Screenshots
• 🏗️ Project Structure
• 📋 Changelog
• 🤝 Contributing
• 📄 License

✨ Features

• React Native: A framework for building native apps using React.
• Expo: A framework and platform for universal React applications.
• TypeScript: A strongly typed programming language that builds on JavaScript.
• React Navigation: Routing and navigation for React Native apps.
• Redux Toolkit: A toolset for efficient Redux development.
• RTK Query: Powerful data fetching and caching tool.
• React Toastify: Easy-to-use toast notifications.
• React-i18next: Internationalization for React Native.
• Day.js: A lightweight JavaScript date library.
• Flashlist: A performant list component for React Native.
• React Hook Form: Performant, flexible, and extensible forms with easy-to-use validation.
• Atomic Design System: A methodology for creating design systems.
• Husky (optional): Git hooks made easy.
• ESLint (optional): A tool for identifying and fixing problems in JavaScript code.
• Sentry (optional): Error monitoring software.
• Reusable Components: Modular and reusable components for easy customization.
• State Management: Integrated state management using Redux or context.

🛠️ Installation

To get started with this project, follow these steps:

1. Install the Template:

   npx create-nova-expo-template

2. Navigate to the project directory:

   cd <project-name>

3. Run the project:

   npm start

⚙️ Prerequisites

Ensure you have the following installed:

• Node.js: v16.14.0 or higher (currently using v20.17.0)
• npm: v8.5.0 or higher (currently using v10.8.2)

📚 Usage

To start the development server, run:

npm start

To build the project for production, run:

expo build

To preview the production build, run:

expo start --no-dev --minify

📸 Screenshots

Here are some screenshots of the application:

🏗️ Project Structure

your-app-name/                     # Your new Expo app
├── 📄 app.json                    # Expo app configuration
├── 📄 eas.json                    # EAS Build configuration
├── 📄 expo-env.d.ts               # Expo environment types
├── 📄 package.json                # Project dependencies
├── 📄 tsconfig.json               # TypeScript configuration
│
├── 📁 @types/                     # Global TypeScript definitions
│   ├── 📄 static-files.d.ts       # Static file types
│   └── 📄 TranslationKeyEnum.ts   # Translation key enums
│
├── 📁 apis/                       # API layer
│   ├── 📄 Domain.ts               # API domain configuration
│   ├── 📄 index.ts                # API exports
│   ├── 📄 tagTypes.ts             # RTK Query tag types
│   ├── 📁 @types/                 # API type definitions
│   ├── 📁 middlewares/            # API middlewares
│   └── 📁 services/               # API service endpoints
│
├── 📁 app/                        # App routing (Expo Router)
│   ├── 📄 _layout.tsx             # Root layout
│   ├── 📄 +not-found.tsx          # 404 page
│   ├── 📄 index.tsx               # Home/Landing page
│   ├── 📁 (auth)/                 # Authentication stack
│   │   ├── 📄 _layout.tsx         # Auth layout
│   │   ├── 📁 forgotPassword/     # Password reset screens
│   │   ├── 📁 login/              # Login screens
│   │   ├── 📁 signup/             # Registration screens
│   │   └── 📁 welcome/            # Welcome/onboarding
│   └── 📁 (main)/                 # Main app stack
│       ├── 📄 _layout.tsx         # Main layout
│       ├── 📁 (tabs)/             # Tab navigation
│       ├── 📁 screen1/            # Feature screens
│       ├── 📁 screen2/
│       └── 📁 screen3/
│
├── 📁 assets/                     # Static assets
│   ├── 📁 fonts/                  # Custom fonts
│   ├── 📁 icons/                  # Icon components
│   ├── 📁 images/                 # Image assets
│   └── 📁 svgs/                   # SVG components
│
├── 📁 components/                 # UI Components (Atomic Design)
│   ├── 📁 atoms/                  # Basic building blocks
│   │   ├── 📁 Button/             # Button component
│   │   ├── 📁 Input/              # Input component
│   │   ├── 📁 Text/               # Text component
│   │   └── 📄 index.ts            # Atom exports
│   ├── 📁 molecules/              # Component combinations
│   │   ├── 📁 common/             # Shared molecules
│   │   └── 📁 scoped/             # Feature-specific molecules
│   ├── 📁 organisms/              # Complex components
│   │   ├── 📁 common/             # Shared organisms
│   │   └── 📁 scoped/             # Feature-specific organisms
│   ├── 📁 templates/              # Page templates
│   └── 📁 wrappers/               # Higher-order components
│
├── 📁 constants/                  # App constants
│   ├── 📄 Colors.ts               # Color palette
│   ├── 📄 FontFamily.ts           # Font definitions
│   ├── 📄 GlobalStyles.ts         # Global styles
│   ├── 📄 Metrics.ts              # Screen dimensions
│   └── 📄 TranslationConfig.ts    # i18n configuration
│
├── 📁 hooks/                      # Custom React hooks
│   ├── 📄 useBiometricLogin.tsx   # Biometric authentication
│   ├── 📄 useColorScheme.ts       # Theme management
│   ├── 📄 useFetchTranslation.ts  # Localization hook
│   └── 📄 useThemeColor.ts        # Color theme hook
│
├── 📁 locale/                     # Internationalization
│   ├── 📄 ar.json                 # Arabic translations
│   ├── 📄 en.json                 # English translations
│   └── 📄 index.ts                # i18n exports
│
├── 📁 redux/                      # State management
│   ├── 📄 index.ts                # Store configuration
│   ├── 📄 appReducer.ts           # App state slice
│   └── 📄 authReducer.ts          # Auth state slice
│
├── 📁 scripts/                    # Development scripts
│   ├── 📄 generate-svg.js         # SVG component generator
│   ├── 📄 removeLogs.js           # Production log removal
│   ├── 📄 sync-translations.js    # Translation sync
│   └── 📄 translate.js            # Auto-translation tool
│
├── 📁 styles/                     # Global styles
│
└── 📁 utils/                      # Utility functions
    ├── 📄 debounce.ts             # Debounce utility
    ├── 📄 handleErrors.ts         # Error handling
    ├── 📄 loginHandler.ts         # Authentication helpers
    └── 📄 showSuccessMsg.ts       # Success messaging

📂 Key Directories Explained

• app/: Uses Expo Router for file-based routing with layout components
• components/: Follows Atomic Design methodology (atoms → molecules → organisms → templates)
• apis/: Centralized API layer with RTK Query for data fetching and caching
• redux/: State management using Redux Toolkit with separate slices
• hooks/: Custom React hooks for reusable logic
• constants/: App-wide constants including colors, fonts, and metrics
• locale/: Multi-language support with JSON translation files
• utils/: Helper functions and utilities
• scripts/: Development automation scripts

📋 Changelog

See the CHANGELOG for a history of changes to this project.

🤝 Contributing

Contributions are welcome! Please read the contributing guidelines first.

📄 License

This project is licensed under the MIT License.