Task Planner (React Native)

A high-fidelity Task Management application built with React Native, architecturally and functionally synchronized with its Flutter counterpart. This project demonstrates cross-platform parity in local storage management, authentication flows, and premium UI design.

🚀 Key Features

• Auth Flow Parity: Matching login and auto-registration logic with persistent session management.
• Local Storage: Synchronized data schema using AsyncStorage and a custom StorageHelper layer.
• Premium UI:
  • Vibrant Blue-to-Purple linear gradients.
  • Material Design iconography via react-native-vector-icons.
  • Responsive task cards with priority tagging.
• Task Management: Full CRUD operations for tasks, including due date/time picking and completion tracking.
• Modular Architecture: Clean separation of concerns following the src/core, src/modules, and src/navigation patterns.

🏗️ Architecture

The project is structured to mirror the Flutter version's organization:

src/
├── core/
│   ├── services/       # TaskService (Business Logic)
│   └── storage/        # StorageHelper & KeyStorage (Persistence)
├── data/
│   └── models/         # TaskModel (Data Schemas)
├── modules/
│   ├── auth/           # LoginView (Premium UI)
│   ├── dashboard/      # DashboardView (Task Stats & List)
│   └── task/           # AddTaskView (Date/Time Pickers)
└── navigation/         # AppNavigator (Session-aware Stack)

🛠️ Technology Stack

• React Native: 0.81.4
• Navigation: @react-navigation/native-stack
• Persistence: @react-native-async-storage/async-storage (v2.1.1 Stable)
• Styling: react-native-linear-gradient
• Icons: react-native-vector-icons (MaterialIcons)
• Utilities: date-fns, uuid

⚙️ Environment Configuration

This project requires specific configurations for modern Android builds:

• Java Version: JDK 17 (Required for AGP 8.11+)
• Gradle Version: 8.14.3
• Kotlin: 2.1.20
• Android SDK: Compile/Target SDK 36

🚀 Getting Started

1. Install Dependencies

yarn install

2. iOS Setup (Mac Only)

cd ios
pod install
cd ..

3. Run the Application

Android:

yarn android

iOS:

yarn ios

📝 Sync Notes (Flutter ↔️ React Native)

• Session Keys: Both apps use identical keys (auth_token, user_email) for seamless transition testing.
• Persistence Layer: While Flutter uses SQLite, React Native uses an optimized TaskService on top of AsyncStorage to achieve identical functional results for local-first data.
• Visual Parity: Layouts, color hex codes (#0D47A1, #6A1B9A), and typography have been aligned to ensure a consistent user experience.