# lejoser40/react-native-todo-list architecture

> Architecture diagram of the GitHub repository lejoser40/react-native-todo-list, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-29). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/lejoser40/react-native-todo-list
- Repository: https://github.com/lejoser40/react-native-todo-list

## Overview

This React Native todo app lets a user add tasks, view them in a list, mark them complete, and open a task editor to change or delete a task. Task data is held only in App component state; no persistent store is shown. The editor also displays date/time pickers and a reminder toggle, but the sampled code does not connect these controls to task data or notification behavior. The architecture follows the sampled current app; the backup app is an older variant.

Main entry points: [`App.jsx`](https://github.com/lejoser40/react-native-todo-list/blob/main/App.jsx) (App Coordinator), [`components/TodoCard.jsx`](https://github.com/lejoser40/react-native-todo-list/blob/main/components/TodoCard.jsx) (Task Card), [`components/TodoModal.jsx`](https://github.com/lejoser40/react-native-todo-list/blob/main/components/TodoModal.jsx) (Task Editor), [`components/FloatingActionBtn.jsx`](https://github.com/lejoser40/react-native-todo-list/blob/main/components/FloatingActionBtn.jsx) (Add Button)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_task_flow["Task State"]
  node_app["App Coordinator<br/>[App.jsx]"]
  node_tasks["In-Memory Tasks<br/>[App.jsx]"]
end

subgraph group_task_ui["Task UI"]
  node_task_list["Task List<br/>[App.jsx]"]
  node_todo_card["Task Card<br/>[TodoCard.jsx]"]
  node_task_editor["Task Editor<br/>[TodoModal.jsx]"]
end

subgraph group_entry_ui["Entry UI"]
  node_add_button["Add Button"]
  node_add_sheet["Add Sheet<br/>[BottomSheet.jsx]"]
end

node_user(("User"))

node_user -->|"presses"| node_add_button
node_app -->|"renders"| node_add_button
node_add_button -->|"opens sheet"| node_app
node_app -->|"renders"| node_add_sheet
node_user -->|"enters task"| node_add_sheet
node_add_sheet -->|"submits task"| node_app
node_app -->|"adds task"| node_tasks
node_app -->|"renders tasks"| node_task_list
node_tasks -->|"provides items"| node_task_list
node_task_list -->|"renders item"| node_todo_card
node_user -->|"selects task"| node_todo_card
node_todo_card -->|"opens editor"| node_app
node_user -->|"toggles complete"| node_todo_card
node_todo_card -->|"changes completion"| node_app
node_app -->|"updates task"| node_tasks
node_app -->|"renders editor"| node_task_editor
node_user -->|"edits or deletes"| node_task_editor
node_task_editor -->|"closes or deletes"| node_app
node_app -->|"edits or removes"| node_tasks

click node_app "https://github.com/lejoser40/react-native-todo-list/blob/main/App.jsx"
click node_tasks "https://github.com/lejoser40/react-native-todo-list/blob/main/App.jsx"
click node_task_list "https://github.com/lejoser40/react-native-todo-list/blob/main/App.jsx"
click node_todo_card "https://github.com/lejoser40/react-native-todo-list/blob/main/components/TodoCard.jsx"
click node_task_editor "https://github.com/lejoser40/react-native-todo-list/blob/main/components/TodoModal.jsx"
click node_add_button "https://github.com/lejoser40/react-native-todo-list/blob/main/components/FloatingActionBtn.jsx"
click node_add_sheet "https://github.com/lejoser40/react-native-todo-list/blob/main/components/BottomSheet.jsx"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app,node_tasks,node_user toneBlue
class node_task_list,node_todo_card,node_task_editor toneAmber
class node_add_button,node_add_sheet toneMint
```

## Components

### Task State

- [App Coordinator](https://github.com/lejoser40/react-native-todo-list/blob/main/App.jsx): `App.jsx`
- [In-Memory Tasks](https://github.com/lejoser40/react-native-todo-list/blob/main/App.jsx): `App.jsx`

### Task UI

- [Task List](https://github.com/lejoser40/react-native-todo-list/blob/main/App.jsx): `App.jsx`
- [Task Card](https://github.com/lejoser40/react-native-todo-list/blob/main/components/TodoCard.jsx): `components/TodoCard.jsx`
- [Task Editor](https://github.com/lejoser40/react-native-todo-list/blob/main/components/TodoModal.jsx): `components/TodoModal.jsx`

### Entry UI

- [Add Button](https://github.com/lejoser40/react-native-todo-list/blob/main/components/FloatingActionBtn.jsx): `components/FloatingActionBtn.jsx`
- [Add Sheet](https://github.com/lejoser40/react-native-todo-list/blob/main/components/BottomSheet.jsx): `components/BottomSheet.jsx`

### Other components

- **User**

## Connections

- User → Add Button: presses
- App Coordinator → Add Button: renders
- Add Button → App Coordinator: opens sheet
- App Coordinator → Add Sheet: renders
- User → Add Sheet: enters task
- Add Sheet → App Coordinator: submits task
- App Coordinator → In-Memory Tasks: adds task
- App Coordinator → Task List: renders tasks
- In-Memory Tasks → Task List: provides items
- Task List → Task Card: renders item
- User → Task Card: selects task
- Task Card → App Coordinator: opens editor
- User → Task Card: toggles complete
- Task Card → App Coordinator: changes completion
- App Coordinator → In-Memory Tasks: updates task
- App Coordinator → Task Editor: renders editor
- User → Task Editor: edits or deletes
- Task Editor → App Coordinator: closes or deletes
- App Coordinator → In-Memory Tasks: edits or removes