# veersinghlodhi/react-native-app architecture

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

- Interactive diagram: https://gitdiagram.com/veersinghlodhi/react-native-app
- Repository: https://github.com/veersinghlodhi/react-native-app

## Overview

This is an Expo/React Native daily-tasks app. A user can review task totals on the home screen, navigate to task management, and add, complete, or delete tasks; the screens share in-memory state through a context provider. Settings is also a routed screen, but its behavior is not described here. The graph focuses on those app flows and the shared theme layer; relationships are limited to the excerpts and source-index references provided, so unsampled screen behavior is not inferred.

Main entry points: [`src/app/index.tsx`](https://github.com/veersinghlodhi/react-native-app/blob/main/src/app/index.tsx) (Progress home), [`src/hooks/use-theme.ts`](https://github.com/veersinghlodhi/react-native-app/blob/main/src/hooks/use-theme.ts) (Theme hook), [`src/context/TasksContext.tsx`](https://github.com/veersinghlodhi/react-native-app/blob/main/src/context/TasksContext.tsx) (Task state), [`src/app/tasks.tsx`](https://github.com/veersinghlodhi/react-native-app/blob/main/src/app/tasks.tsx) (Task manager)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Task app"]
  node_home["Progress home<br/>[index.tsx]"]
  node_task_screen["Task manager<br/>[tasks.tsx]"]
  node_settings["Settings screen<br/>[settings.tsx]"]
  node_layout["App layout<br/>[_layout.tsx]"]
end

subgraph group_state["Task state"]
  node_tasks_state["Task state<br/>[TasksContext.tsx]"]
end

subgraph group_ui["Shared UI"]
  node_theme["Theme tokens<br/>[theme.ts]"]
  node_use_theme["Theme hook<br/>[use-theme.ts]"]
  node_themed_text["Themed text<br/>[themed-text.tsx]"]
  node_themed_view["Themed view<br/>[themed-view.tsx]"]
  node_external_link["External link<br/>[external-link.tsx]"]
end

node_user(("User"))

node_user -->|"opens app"| node_home
node_home -->|"reads task totals"| node_tasks_state
node_home -->|"navigates to"| node_task_screen
node_task_screen -->|"manages tasks"| node_tasks_state
node_layout -->|"provides state"| node_tasks_state
node_use_theme -->|"reads colors"| node_theme
node_themed_text -->|"gets colors"| node_use_theme
node_themed_view -->|"gets colors"| node_use_theme

click node_home "https://github.com/veersinghlodhi/react-native-app/blob/main/src/app/index.tsx"
click node_task_screen "https://github.com/veersinghlodhi/react-native-app/blob/main/src/app/tasks.tsx"
click node_settings "https://github.com/veersinghlodhi/react-native-app/blob/main/src/app/settings.tsx"
click node_layout "https://github.com/veersinghlodhi/react-native-app/blob/main/src/app/_layout.tsx"
click node_tasks_state "https://github.com/veersinghlodhi/react-native-app/blob/main/src/context/TasksContext.tsx"
click node_theme "https://github.com/veersinghlodhi/react-native-app/blob/main/src/constants/theme.ts"
click node_use_theme "https://github.com/veersinghlodhi/react-native-app/blob/main/src/hooks/use-theme.ts"
click node_themed_text "https://github.com/veersinghlodhi/react-native-app/blob/main/src/components/themed-text.tsx"
click node_themed_view "https://github.com/veersinghlodhi/react-native-app/blob/main/src/components/themed-view.tsx"
click node_external_link "https://github.com/veersinghlodhi/react-native-app/blob/main/src/components/external-link.tsx"

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_home,node_task_screen,node_settings,node_layout,node_user toneBlue
class node_tasks_state toneAmber
class node_theme,node_use_theme,node_themed_text,node_themed_view,node_external_link toneMint
```

## Components

### Task app

- [Progress home](https://github.com/veersinghlodhi/react-native-app/blob/main/src/app/index.tsx): `src/app/index.tsx`
- [Task manager](https://github.com/veersinghlodhi/react-native-app/blob/main/src/app/tasks.tsx): `src/app/tasks.tsx`
- [Settings screen](https://github.com/veersinghlodhi/react-native-app/blob/main/src/app/settings.tsx): `src/app/settings.tsx`
- [App layout](https://github.com/veersinghlodhi/react-native-app/blob/main/src/app/_layout.tsx): `src/app/_layout.tsx`

### Task state

- [Task state](https://github.com/veersinghlodhi/react-native-app/blob/main/src/context/TasksContext.tsx): `src/context/TasksContext.tsx`

### Shared UI

- [Theme tokens](https://github.com/veersinghlodhi/react-native-app/blob/main/src/constants/theme.ts): `src/constants/theme.ts`
- [Theme hook](https://github.com/veersinghlodhi/react-native-app/blob/main/src/hooks/use-theme.ts): `src/hooks/use-theme.ts`
- [Themed text](https://github.com/veersinghlodhi/react-native-app/blob/main/src/components/themed-text.tsx): `src/components/themed-text.tsx`
- [Themed view](https://github.com/veersinghlodhi/react-native-app/blob/main/src/components/themed-view.tsx): `src/components/themed-view.tsx`
- [External link](https://github.com/veersinghlodhi/react-native-app/blob/main/src/components/external-link.tsx): `src/components/external-link.tsx`

### Other components

- **User**

## Connections

- User → Progress home: opens app
- Progress home → Task state: reads task totals (evidence: `src/app/index.tsx`)
- Progress home → Task manager: navigates to (evidence: `src/app/index.tsx`)
- Task manager → Task state: manages tasks (evidence: `src/app/tasks.tsx`)
- App layout → Task state: provides state (evidence: `src/app/_layout.tsx`)
- Theme hook → Theme tokens: reads colors (evidence: `src/hooks/use-theme.ts`)
- Themed text → Theme hook: gets colors (evidence: `src/components/themed-text.tsx`)
- Themed view → Theme hook: gets colors (evidence: `src/components/themed-view.tsx`)