{"id":26447296,"url":"https://github.com/hoangsonww/task-manager-reactnative","last_synced_at":"2026-04-07T09:31:42.706Z","repository":{"id":282999878,"uuid":"950314957","full_name":"hoangsonww/Task-Manager-ReactNative","owner":"hoangsonww","description":"📲 A simple and intuitive task management app built with React Native and Expo. Stay organized with seamless task tracking, cross-platform support (iOS, Android, Web), and a clean, modern UI.","archived":false,"fork":false,"pushed_at":"2025-03-18T03:39:08.000Z","size":19275,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-18T04:25:15.492Z","etag":null,"topics":["android","app","emulator","expo","expo-cli","expo-router","hooks","ios","javascript","mobile","mobile-app","mobile-development","react-native","react-native-app","react-native-paper","task-management","task-manager","tasks","typescript","web-development"],"latest_commit_sha":null,"homepage":"https://hoangsonww.github.io/Task-Manager-ReactNative/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hoangsonww.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-03-18T01:06:31.000Z","updated_at":"2025-03-18T03:40:58.000Z","dependencies_parsed_at":"2025-03-18T04:35:29.557Z","dependency_job_id":null,"html_url":"https://github.com/hoangsonww/Task-Manager-ReactNative","commit_stats":null,"previous_names":["hoangsonww/task-manager-reactnative"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoangsonww%2FTask-Manager-ReactNative","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoangsonww%2FTask-Manager-ReactNative/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoangsonww%2FTask-Manager-ReactNative/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoangsonww%2FTask-Manager-ReactNative/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hoangsonww","download_url":"https://codeload.github.com/hoangsonww/Task-Manager-ReactNative/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244236106,"owners_count":20420752,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","app","emulator","expo","expo-cli","expo-router","hooks","ios","javascript","mobile","mobile-app","mobile-development","react-native","react-native-app","react-native-paper","task-management","task-manager","tasks","typescript","web-development"],"created_at":"2025-03-18T13:51:39.504Z","updated_at":"2025-12-30T22:11:48.287Z","avatar_url":"https://github.com/hoangsonww.png","language":"TypeScript","readme":"# Task Manager React Native App 📱\n\n[![Project Version](https://img.shields.io/badge/Version-1.0.0-blue.svg)](package.json)\n[![React Native](https://img.shields.io/badge/React_Native-0.76.7-blue?logo=react)](https://reactnative.dev/)\n[![Expo](https://img.shields.io/badge/Expo-~52.0.38-blue?logo=expo)](https://expo.dev/)\n[![Node.js](https://img.shields.io/badge/Node.js-14.x-blue?logo=node.js)](https://nodejs.org/)\n[![TypeScript](https://img.shields.io/badge/TypeScript-%5E5.3.3-blue?logo=typescript)](https://www.typescriptlang.org/)\n[![Node Package Manager](https://img.shields.io/badge/npm-7.x-blue?logo=npm)](https://www.npmjs.com/)\n[![Yarn](https://img.shields.io/badge/Yarn-1.22.x-blue?logo=yarn)](https://yarnpkg.com/)\n[![Prettier](https://img.shields.io/badge/Prettier-3.5.3-blue?logo=prettier)](https://prettier.io/)\n[![React Native Paper](https://img.shields.io/badge/React_Native_Paper-5.13.1-blue.svg)](https://callstack.github.io/react-native-paper/)\n[![React Native Chart Kit](https://img.shields.io/badge/React_Native_Chart_Kit-6.12.0-blue.svg)](https://www.npmjs.com/package/react-native-chart-kit)\n[![MIT License](https://img.shields.io/badge/License-MIT-orange.svg)](LICENSE)\n\n## Table of Contents\n\n- [Overview](#overview)\n  - [iOS](#ios)\n  - [Android](#android)\n  - [Web](#web)\n  - [Screen Recordings](#screen-recordings)\n- [Features](#features)\n- [Technical Stack](#technical-stack)\n- [Installation \u0026 Setup](#installation--setup)\n  - [Prerequisites](#prerequisites)\n  - [Clone the Repository](#clone-the-repository)\n  - [Install Dependencies](#install-dependencies)\n  - [Running the App](#running-the-app)\n- [Usage Instructions](#usage-instructions)\n- [File Structure](#file-structure)\n- [Scripts \u0026 Tools](#scripts--tools)\n- [License](#license)\n- [Contact](#contact)\n\n## Overview\n\n**Task Manager React Native App** is a modern, cross-platform mobile application built using React Native with Expo and TypeScript.\n\nThe app allows users to manage their daily tasks efficiently, with features like task addition, completion, deletion, and drag-and-drop reordering.\n\nThe app also includes a dedicated Stats screen with interactive charts (pie, bar, and line) for visualizing task statistics.\nIt also features dark/light theme toggling with smooth transitions and a custom bottom tab bar for a better UI/UX.\n\n### iOS\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"img/Flash-IP.png\" width=\"19%\"\u003e\n  \u003cimg src=\"img/Home-IP.png\" width=\"19%\"\u003e\n  \u003cimg src=\"img/Stats-IP.png\" width=\"19%\"\u003e\n  \u003cimg src=\"img/HomeDark-IP.png\" width=\"19%\"\u003e\n  \u003cimg src=\"img/StatsDark-IP.png\" width=\"19%\"\u003e\n\u003c/p\u003e\n\n### Android\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"img/Flask-Android.png\" width=\"19%\"\u003e\n  \u003cimg src=\"img/Home-Android.png\" width=\"19%\"\u003e\n  \u003cimg src=\"img/Stats-Android.png\" width=\"19%\"\u003e\n  \u003cimg src=\"img/HomeDark-Android.png\" width=\"19%\"\u003e\n  \u003cimg src=\"img/StatsDark-Android.png\" width=\"19%\"\u003e\n\u003c/p\u003e\n\n### Modals\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"img/AddModal.png\" width=\"22%\"\u003e\n  \u003cimg src=\"img/AddModalDark.png\" width=\"22%\"\u003e\n  \u003cimg src=\"img/EditModal.png\" width=\"22%\"\u003e\n  \u003cimg src=\"img/EditModalDark.png\" width=\"22%\"\u003e\n\u003c/p\u003e\n\n### Web\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"img/Web.png\" width=\"80%\"\u003e\n\u003c/p\u003e\n\n### Screen Recordings\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"img/ios.gif\" alt=\"Task Manager App - iOS\" width=\"47%\"\u003e\n  \u003cimg src=\"img/android.gif\" alt=\"Task Manager App - Android\" width=\"46%\"\u003e\n\u003c/p\u003e\n\n## Features\n\n### Task Management\n\n- **Add, Update \u0026 Delete Tasks:** Easily manage your daily tasks through an interactive interface.\n- **Drag-and-Drop Reordering:** Rearrange tasks using a smooth, touch-friendly drag-and-drop mechanism.\n- **Global State Management:** Uses React Context to manage task state across the app for consistent data handling.\n\n### Statistics Visualization\n\n- **Pie Chart:** Visualizes the ratio of completed vs. incomplete tasks.\n- **Bar Chart:** Compares overdue and upcoming tasks with wider, closely spaced bars.\n- **Line Chart:** Plots tasks over time (by month), ensuring continuity even if only a single month is available.\n- **Transparent \u0026 Themed Charts:** All charts feature transparent backgrounds and adjust seamlessly to the current theme.\n\n### Theme \u0026 UI\n\n- **Dark/Light Mode Toggle:** Switch between dark and light themes with a toggle integrated into the custom bottom tab bar.\n- **Smooth Transitions:** Animated transitions (200ms) for background and UI elements when changing themes.\n- **Consistent Material Design:** Built with React Native Paper, ensuring a uniform look and feel across all screens.\n\n### Navigation \u0026 Routing\n\n- **Expo Router:** Utilizes Expo Router for clean, declarative navigation between screens.\n- **Automatic Root Redirection:** Redirects the root route (\"/\") to the home screen, ensuring a smooth entry.\n- **Fallback Screen:** Provides a custom +not-found screen for undefined routes.\n\n### Flash Screen\n\n- **Splash Screen:** Custom splash screen with app name and slogan.\n- **Redirection:** Automatically redirects to the home screen after the splash screen (3 seconds).\n\n## Technical Stack\n\n- **React Native:** Core framework for building cross-platform mobile applications.\n- **Expo:** Provides a robust development workflow and build process.\n- **TypeScript:** Enhances code quality with static type checking.\n- **React Navigation / Expo Router:** Manages navigation and deep linking.\n- **React Native Paper:** Offers Material Design components and theming.\n- **React Native Chart Kit:** Renders customizable charts (pie, bar, line).\n- **Reanimated:** Powers smooth and performant UI animations.\n- **ESLint \u0026 Prettier:** Maintains code quality and consistent formatting.\n\n## Installation \u0026 Setup\n\n### Prerequisites\n\n- **Node.js:** Version 14 or above.\n- **Yarn** or **npm:** For package management.\n- **Expo CLI:** Install globally (if not already present)\n  ```bash\n  npm install -g expo-cli\n  ```\n\n### Clone the Repository\n\n```bash\ngit clone https://github.com/hoangsonww/Task-Manager-ReactNative.git\ncd Task-Manager-ReactNative\n```\n\n### Install Dependencies\n\nUsing npm:\n\n```bash\nnpm install\n```\n\nUsing Yarn:\n\n```bash\nyarn install\n```\n\n### Running the App\n\nStart the Expo development server:\n\n```bash\nnpm start\n# or\nyarn start\n```\n\nAlternatively, you can use the Expo CLI directly:\n\n```bash\nnpx expo start\n```\n\n\u003e Note: You can also use the `-c` flag to clear the cache and start fresh if needed: `npx expo start -c`.\n\nThen:\n\n- Open the app on your device using the Expo Go app, or\n- Use an Android/iOS simulator (remember to press `a` or `i` in the terminal to open the app on Android/iOS, respectively), or\n- Open the project in a web browser for a quick preview (remember to press `w` in the terminal, it will then open a new tab in your default browser).\n\n---\n\n## Usage Instructions\n\n### Home Screen\n\n- **Add Tasks:** Tap the \"Add Task\" button to open a modal where you can enter new tasks.\n- **Reorder Tasks:** Drag and drop tasks to adjust their order.\n- **Toggle Completion:** Tap the checkbox on a task to mark it as complete or incomplete.\n- **Delete Tasks:** Remove tasks with the delete action.\n\n### Stats Screen\n\n- **View Charts:**\n  - **Pie Chart:** Displays the proportion of completed vs. incomplete tasks.\n  - **Bar Chart:** Compares overdue vs. upcoming tasks with wide, closely spaced bars.\n  - **Line Chart:** Plots tasks over time by month, ensuring continuity even if only one month is present.\n- **Theme Adaptation:**  \n  Charts are fully transparent and adapt to the current dark/light theme.\n\n### Theme Toggle\n\n- **Switch Themes:** Use the toggle in the custom bottom tab bar to switch between dark and light modes. The transition is animated over 200ms for a smooth experience.\n\n### Routing\n\n- **Automatic Redirection:** The root route (\"/\") automatically redirects to the home screen.\n- **Fallback:** Invalid routes are handled by the `+not-found` screen.\n\n---\n\n## File Structure\n\n```\nTask-Manager-ReactNative\n├── app.json                       # Expo configuration file\n├── package.json                   # Project dependencies and scripts\n├── tsconfig.json                  # TypeScript configuration file\n├── .gitignore                     # Git ignore file\n├── Dockerfile                     # Dockerfile for containerization\n├── docker-compose.yml             # Docker Compose file for containerization\n├── app\n│   ├── _layout.tsx                # Main layout with theme, navigation, and context providers\n│   ├── index.tsx                  # Flash screen and redirection to home screen\n│   ├── +not-found.tsx             # Custom Not Found screen for undefined routes\n│   └── (tabs)\n│       ├── _layout.tsx            # Layout for tabbed screens\n│       ├── home.tsx               # Home screen for task management\n│       └── stats.tsx              # Stats screen for displaying charts and statistics\n├── components\n│   ├── Chart.tsx                  # Reusable chart component for pie, bar, and line charts\n│   ├── CustomTabBar.tsx           # Custom bottom tab bar component (with theme toggle)\n│   ├── TaskAddModal.tsx           # Modal component for adding new tasks\n│   └── TaskItem.tsx               # Component for displaying individual tasks\n├── constants\n│   └── Colors.ts                  # Color definitions for light and dark themes\n├── contexts\n│   ├── ThemeOverrideContext.tsx   # React Context for theme override management (dark/light mode)\n│   └── TaskContext.tsx            # React Context for global task state management\n├── hooks\n│   └── usePrevious.ts             # Custom hook to capture previous state values\n├── scripts\n│   └── reset-project.js           # Script to reset project state (if needed)\n├── styles\n│   ├── HomeScreenStyles.ts        # Custom styles for the Home screen\n│   ├── StatsScreenStyles.ts       # Custom styles for the Stats screen\n│   ├── IndexStyles.ts             # Custom styles for the Flash screen and redirection\n│   ├── LayoutStyles.ts            # Custom styles for the main layout\n│   ├── TaskAddModalStyles.ts      # Custom styles for the task add modal\n│   ├── TaskItemStyles.ts          # Custom styles for individual task items\n│   ├── NotFoundStyles.ts          # Custom styles for the Not Found screen\n│   └── CustomTabStyles.ts         # Custom styles for the tab bar and related UI components\n├── types\n│   └── types.ts                   # TypeScript type definitions for the project\n└── shell                          # Shell scripts for common tasks\n    ├── run-platform.sh            # Script to run the app on a specific platform\n    ├── format.sh                  # Script to format the project code\n    ├── start.sh                   # Script to start the app\n    ├── reset.sh                   # Script to reset the project state\n    └── update.sh                  # Script to update project dependencies\n```\n\n## Scripts \u0026 Tools\n\n- **reset-project.js:** Located in the `scripts` folder, this script resets the project state as needed.\n- **Prettier:** Integrated to maintain code quality and consistent formatting.\n  - Use by simply running `npm run format` or `yarn format` to format the entire project.\n- **Documented Code:** Includes JSDoc comments for functions and TypeScript type definitions for better code understanding.\n- **Shell Scripts**: Several shell scripts are included to simplify common tasks, such as starting the app, resetting the project, and updating dependencies. Feel free to use them for easier project management!\n  - Use the script by first running `chmod +x \u003cscript-name\u003e.sh` to make it executable, then run `./\u003cscript-name\u003e.sh` to execute it.\n- **Dockerfile (Optional)**: A Dockerfile is provided to containerize the app if needed. However, since mobile testing requires physical devices or emulators, the Dockerfile is designed only for the web version of the app.\n  - Use the Docker Compose file (`docker-compose.yml`) to build and run the Docker container, by running `docker-compose up --build`. Ensure that Docker is installed and running on your system.\n\n## License\n\nThis project is licensed under the MIT License. See the [LICENSE](LICENSE) file for more details.\n\n## Contact\n\nFor any questions, feedback, or suggestions, please contact:\n\n- **Name:** Son Nguyen\n- **Email:** [hoangson091104@gmail.com](mailto:hoangson091104@gmail.com)\n- **GitHub:** [@hoangsonww](https://github.com/hoangsonww)\n\n---\n\n**Thank you for checking out the Task Manager React Native App! 🚀**\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhoangsonww%2Ftask-manager-reactnative","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhoangsonww%2Ftask-manager-reactnative","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhoangsonww%2Ftask-manager-reactnative/lists"}