React Native Task Manager Challenge 📱

Overview

This is a React Native coding challenge that tests your ability to implement React Context patterns.

TaskContext.tsx - State Management Core

Location: /context/TaskContext.tsx

What you need to implement:

• Complete the taskReducer function with ADD_TASK and DELETE_TASK logic
• Implement addTask and deleteTask functions to add and delete from tasks array in state
• Update getTasks function to sort newest first using creation date
• Ensure proper TypeScript typing throughout

Key Requirements:

• ADD_TASK should generate UUID and current timestamp
• DELETE_TASK should filter out the task with matching ID
• Functions must dispatch correct actions to the reducer

TaskForm.tsx - Add Task Implementation

Location: /components/TaskForm.tsx

What you need to implement in handleSave function:

• Validate title isn't empty (especially handle whitespace-only input)
• Call addTask from TaskContext to save the new task
• On successful save, call onClose() to navigate back to task list

TaskListScreen.tsx - Task List Display

Location: /components/TaskListScreen.tsx

What you need to implement:

• Display all tasks (currently only showing first task as example)
• Handle empty state when no tasks exist
• Consider performance for large task lists (thousands of tasks)
• Implement proper task rendering logic

What's Already Provided ✅

• Complete UI Components: TaskListScreen, TaskItem with full styling
• TypeScript Interfaces: Task, TaskState, TaskAction, TaskContextType
• Navigation Setup: Expo Router with proper screen structure
• Working Sample Data: Initial task to demonstrate the structure

Getting Started

1. Install dependencies

   yarn install

2. Start the development server

   yarn start

3. Run on device/simulator

   • Press i for iOS simulator
   • Press a for Android emulator
   • Scan QR code with Expo Go app