React Native Components

A beautiful, interactive, and highly functional calendar and agenda application built with React Native and Expo. This app features a seamless integration between a calendar view and a daily agenda, allowing users to manage their goals and tasks with a playful and intuitive interface.

🚀 Features

Interactive Calendar: Seamless switching between month and week views.
Daily Agenda: Manage tasks and goals with a swipeable list for different days.
Task Management: Full CRUD operations for goals including title, time, category, and priority.
Visual Badges: Color-coded category and priority badges for quick task identification.
Custom Month Picker: A custom-built, user-friendly month and year selector.
Dark Mode Support: Fully responsive theme that adapts to system or manual appearance settings.
Haptic Feedback: Enhanced user experience with tactile feedback for interactions.
Smooth Animations: Powered by react-native-reanimated for fluid transitions.

📦 Getting Started

Installation

Download the repository:
Install dependencies:

bash
npm install
Start the development server:

bash
npm start
Use the QR code in the terminal or browser to open the app in Expo Go (Android/iOS) or an emulator.

🏗️ Project Structure

text

├── app/                  # Expo Router navigation (tabs, modals)
├── components/           # Reusable UI components
│   └── calendar/         # Core calendar and agenda logic
│       ├── badges/       # Category and Priority badges
│       ├── forms/        # Input components for adding goals
│       └── ...           # Header, Agenda, MonthPicker, etc.
├── context/              # Context providers (Theme, etc.)
├── hooks/                # Custom hooks (useGoals, useThemeColor)
├── constants/            # Global constants and theme definitions
└── assets/               # Static assets (images, icons, fonts)

📝 Making Updates

Adding New Features

Most UI components are located in components/calendar/. To add a new UI element, create a new file there and follow the existing functional component pattern.

Updating the Theme

Theme colors and constants are managed in components/calendar/theme.ts and constants/theme.ts. We use a ThemeContext to handle dark/light mode switching.

Modifying Data Logic

The core task management logic resides in hooks/useGoals.ts. If you need to add persistence (e.g., SQLite or Supabase), this is the place to implement those updates.

Habit Calendar