# samukelokhathi/charity-ui architecture

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

- Interactive diagram: https://gitdiagram.com/samukelokhathi/charity-ui
- Repository: https://github.com/samukelokhathi/charity-ui

## Overview

This is an Expo starter app with a chat-list home screen and an Explore/example screen. The user opens the app through its file-based routes, views sample recent and group chats, and can browse starter capabilities such as collapsible examples, theming, and cross-platform support. The home screen is populated from static chat data; no messaging backend or persistent store is evidenced. Relationships below follow the excerpts, SOURCE INDEX references, or README; unsampled implementation details are not inferred.

Main entry points: [`src/app/index.tsx`](https://github.com/samukelokhathi/charity-ui/blob/main/src/app/index.tsx) (Chats screen), [`src/app/explore.tsx`](https://github.com/samukelokhathi/charity-ui/blob/main/src/app/explore.tsx) (Explore screen), [`src/hooks/use-theme.ts`](https://github.com/samukelokhathi/charity-ui/blob/main/src/hooks/use-theme.ts) (Theme hook), [`src/constants/theme.ts`](https://github.com/samukelokhathi/charity-ui/blob/main/src/constants/theme.ts) (Theme constants)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_routing["App Shell"]
  node_layout["Tab layout<br/>[_layout.tsx]"]
  node_tabs["Tab bar<br/>[app-tabs.tsx]"]
  node_animatedicon["Animated icon<br/>[animated-icon.tsx]"]
end

subgraph group_chat["Chat UI"]
  node_home["Chats screen<br/>[index.tsx]"]
  node_chatdata["Sample chat data<br/>[chats.ts]"]
  node_header["Chats header<br/>[chatsHeader.tsx]"]
  node_chatrow["Chat list item<br/>[chatListItem.tsx]"]
  node_avatar["Avatar<br/>[avatar.tsx]"]
  node_groupavatar["Group avatar cluster"]
  node_section["Section card<br/>[sectionCard.tsx]"]
  node_story["Story chip<br/>[storyChip.tsx]"]
end

subgraph group_starter["Explore Examples"]
  node_explore["Explore screen<br/>[explore.tsx]"]
  node_collapsible["Collapsible example<br/>[collapsible.tsx]"]
  node_externallink["External link<br/>[external-link.tsx]"]
  node_webbadge["Web badge<br/>[web-badge.tsx]"]
end

subgraph group_shared["Shared UI and Theme"]
  node_badge["Unread badge<br/>[badge.tsx]"]
  node_themedtext["Themed text<br/>[themed-text.tsx]"]
  node_themedview["Themed view<br/>[themed-view.tsx]"]
  node_themehook["Theme hook<br/>[use-theme.ts]"]
  node_colorscheme["Color scheme hook"]
  node_themeconstants["Theme constants<br/>[theme.ts]"]
  node_chatcolors["Chat palette<br/>[index.ts]"]
end

node_user(("App user"))

node_user -->|"opens app"| node_layout
node_layout -->|"sets up tabs"| node_tabs
node_layout -->|"renders"| node_animatedicon
node_home -->|"reads sample data"| node_chatdata
node_home -->|"renders"| node_header
node_home -->|"renders"| node_section
node_home -->|"renders"| node_chatrow
node_home -->|"renders"| node_avatar
node_home -->|"renders"| node_groupavatar
node_home -->|"uses colors"| node_chatcolors
node_chatrow -->|"renders"| node_badge
node_groupavatar -->|"renders"| node_avatar
node_header -->|"reads stories"| node_chatdata
node_header -->|"renders"| node_story
node_story -->|"renders"| node_avatar
node_chatrow -->|"uses colors"| node_chatcolors
node_avatar -->|"uses colors"| node_chatcolors
node_section -->|"uses colors"| node_chatcolors
node_tabs -->|"uses constants"| node_themeconstants
node_explore -->|"renders"| node_collapsible
node_explore -->|"renders"| node_externallink
node_explore -->|"renders"| node_themedtext
node_explore -->|"renders"| node_themedview
node_explore -->|"renders"| node_webbadge
node_explore -->|"reads theme"| node_themehook
node_collapsible -->|"renders"| node_themedtext
node_collapsible -->|"renders"| node_themedview
node_collapsible -->|"reads theme"| node_themehook
node_themedtext -->|"reads theme"| node_themehook
node_themedview -->|"reads theme"| node_themehook
node_themehook -->|"reads scheme"| node_colorscheme
node_themehook -->|"reads colors"| node_themeconstants
node_themedtext -->|"uses fonts"| node_themeconstants
node_themedview -->|"uses color keys"| node_themeconstants
node_explore -->|"uses layout values"| node_themeconstants

click node_layout "https://github.com/samukelokhathi/charity-ui/blob/main/src/app/_layout.tsx"
click node_home "https://github.com/samukelokhathi/charity-ui/blob/main/src/app/index.tsx"
click node_explore "https://github.com/samukelokhathi/charity-ui/blob/main/src/app/explore.tsx"
click node_chatdata "https://github.com/samukelokhathi/charity-ui/blob/main/src/data/chats.ts"
click node_header "https://github.com/samukelokhathi/charity-ui/blob/main/src/components/chatsHeader.tsx"
click node_chatrow "https://github.com/samukelokhathi/charity-ui/blob/main/src/components/chatListItem.tsx"
click node_avatar "https://github.com/samukelokhathi/charity-ui/blob/main/src/components/avatar.tsx"
click node_groupavatar "https://github.com/samukelokhathi/charity-ui/blob/main/src/components/groupAvatarCluster.tsx"
click node_section "https://github.com/samukelokhathi/charity-ui/blob/main/src/components/sectionCard.tsx"
click node_badge "https://github.com/samukelokhathi/charity-ui/blob/main/src/components/badge.tsx"
click node_story "https://github.com/samukelokhathi/charity-ui/blob/main/src/components/storyChip.tsx"
click node_collapsible "https://github.com/samukelokhathi/charity-ui/blob/main/src/components/ui/collapsible.tsx"
click node_externallink "https://github.com/samukelokhathi/charity-ui/blob/main/src/components/external-link.tsx"
click node_webbadge "https://github.com/samukelokhathi/charity-ui/blob/main/src/components/web-badge.tsx"
click node_themedtext "https://github.com/samukelokhathi/charity-ui/blob/main/src/components/themed-text.tsx"
click node_themedview "https://github.com/samukelokhathi/charity-ui/blob/main/src/components/themed-view.tsx"
click node_themehook "https://github.com/samukelokhathi/charity-ui/blob/main/src/hooks/use-theme.ts"
click node_colorscheme "https://github.com/samukelokhathi/charity-ui/blob/main/src/hooks/use-color-scheme.ts"
click node_themeconstants "https://github.com/samukelokhathi/charity-ui/blob/main/src/constants/theme.ts"
click node_chatcolors "https://github.com/samukelokhathi/charity-ui/blob/main/src/theme/index.ts"
click node_tabs "https://github.com/samukelokhathi/charity-ui/blob/main/src/components/app-tabs.tsx"
click node_animatedicon "https://github.com/samukelokhathi/charity-ui/blob/main/src/components/animated-icon.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_layout,node_tabs,node_animatedicon,node_user toneBlue
class node_home,node_chatdata,node_header,node_chatrow,node_avatar,node_groupavatar,node_section,node_story toneAmber
class node_explore,node_collapsible,node_externallink,node_webbadge toneMint
class node_badge,node_themedtext,node_themedview,node_themehook,node_colorscheme,node_themeconstants,node_chatcolors toneRose
```

## Components

### App Shell

- [Tab layout](https://github.com/samukelokhathi/charity-ui/blob/main/src/app/_layout.tsx): `src/app/_layout.tsx`
- [Tab bar](https://github.com/samukelokhathi/charity-ui/blob/main/src/components/app-tabs.tsx): `src/components/app-tabs.tsx`
- [Animated icon](https://github.com/samukelokhathi/charity-ui/blob/main/src/components/animated-icon.tsx): `src/components/animated-icon.tsx`

### Chat UI

- [Chats screen](https://github.com/samukelokhathi/charity-ui/blob/main/src/app/index.tsx): `src/app/index.tsx`
- [Sample chat data](https://github.com/samukelokhathi/charity-ui/blob/main/src/data/chats.ts): `src/data/chats.ts`
- [Chats header](https://github.com/samukelokhathi/charity-ui/blob/main/src/components/chatsHeader.tsx): `src/components/chatsHeader.tsx`
- [Chat list item](https://github.com/samukelokhathi/charity-ui/blob/main/src/components/chatListItem.tsx): `src/components/chatListItem.tsx`
- [Avatar](https://github.com/samukelokhathi/charity-ui/blob/main/src/components/avatar.tsx): `src/components/avatar.tsx`
- [Group avatar cluster](https://github.com/samukelokhathi/charity-ui/blob/main/src/components/groupAvatarCluster.tsx): `src/components/groupAvatarCluster.tsx`
- [Section card](https://github.com/samukelokhathi/charity-ui/blob/main/src/components/sectionCard.tsx): `src/components/sectionCard.tsx`
- [Story chip](https://github.com/samukelokhathi/charity-ui/blob/main/src/components/storyChip.tsx): `src/components/storyChip.tsx`

### Explore Examples

- [Explore screen](https://github.com/samukelokhathi/charity-ui/blob/main/src/app/explore.tsx): `src/app/explore.tsx`
- [Collapsible example](https://github.com/samukelokhathi/charity-ui/blob/main/src/components/ui/collapsible.tsx): `src/components/ui/collapsible.tsx`
- [External link](https://github.com/samukelokhathi/charity-ui/blob/main/src/components/external-link.tsx): `src/components/external-link.tsx`
- [Web badge](https://github.com/samukelokhathi/charity-ui/blob/main/src/components/web-badge.tsx): `src/components/web-badge.tsx`

### Shared UI and Theme

- [Unread badge](https://github.com/samukelokhathi/charity-ui/blob/main/src/components/badge.tsx): `src/components/badge.tsx`
- [Themed text](https://github.com/samukelokhathi/charity-ui/blob/main/src/components/themed-text.tsx): `src/components/themed-text.tsx`
- [Themed view](https://github.com/samukelokhathi/charity-ui/blob/main/src/components/themed-view.tsx): `src/components/themed-view.tsx`
- [Theme hook](https://github.com/samukelokhathi/charity-ui/blob/main/src/hooks/use-theme.ts): `src/hooks/use-theme.ts`
- [Color scheme hook](https://github.com/samukelokhathi/charity-ui/blob/main/src/hooks/use-color-scheme.ts): `src/hooks/use-color-scheme.ts`
- [Theme constants](https://github.com/samukelokhathi/charity-ui/blob/main/src/constants/theme.ts): `src/constants/theme.ts`
- [Chat palette](https://github.com/samukelokhathi/charity-ui/blob/main/src/theme/index.ts): `src/theme/index.ts`

### Other components

- **App user**

## Connections

- App user → Tab layout: opens app (evidence: `README.md`)
- Tab layout → Tab bar: sets up tabs (evidence: `src/app/_layout.tsx`)
- Tab layout → Animated icon: renders (evidence: `src/app/_layout.tsx`)
- Chats screen → Sample chat data: reads sample data (evidence: `src/app/index.tsx`)
- Chats screen → Chats header: renders (evidence: `src/app/index.tsx`)
- Chats screen → Section card: renders (evidence: `src/app/index.tsx`)
- Chats screen → Chat list item: renders (evidence: `src/app/index.tsx`)
- Chats screen → Avatar: renders (evidence: `src/app/index.tsx`)
- Chats screen → Group avatar cluster: renders (evidence: `src/app/index.tsx`)
- Chats screen → Chat palette: uses colors (evidence: `src/app/index.tsx`)
- Chat list item → Unread badge: renders (evidence: `src/components/chatListItem.tsx`)
- Group avatar cluster → Avatar: renders (evidence: `src/components/groupAvatarCluster.tsx`)
- Chats header → Sample chat data: reads stories (evidence: `src/components/chatsHeader.tsx`)
- Chats header → Story chip: renders (evidence: `src/components/chatsHeader.tsx`)
- Story chip → Avatar: renders (evidence: `src/components/storyChip.tsx`)
- Chat list item → Chat palette: uses colors (evidence: `src/components/chatListItem.tsx`)
- Avatar → Chat palette: uses colors (evidence: `src/components/avatar.tsx`)
- Section card → Chat palette: uses colors (evidence: `src/app/index.tsx`)
- Tab bar → Theme constants: uses constants (evidence: `src/components/app-tabs.tsx`)
- Explore screen → Collapsible example: renders (evidence: `src/app/explore.tsx`)
- Explore screen → External link: renders (evidence: `src/app/explore.tsx`)
- Explore screen → Themed text: renders (evidence: `src/app/explore.tsx`)
- Explore screen → Themed view: renders (evidence: `src/app/explore.tsx`)
- Explore screen → Web badge: renders (evidence: `src/app/explore.tsx`)
- Explore screen → Theme hook: reads theme (evidence: `src/app/explore.tsx`)
- Collapsible example → Themed text: renders (evidence: `src/components/ui/collapsible.tsx`)
- Collapsible example → Themed view: renders (evidence: `src/components/ui/collapsible.tsx`)
- Collapsible example → Theme hook: reads theme (evidence: `src/components/ui/collapsible.tsx`)
- Themed text → Theme hook: reads theme (evidence: `src/components/themed-text.tsx`)
- Themed view → Theme hook: reads theme (evidence: `src/components/themed-view.tsx`)
- Theme hook → Color scheme hook: reads scheme (evidence: `src/hooks/use-theme.ts`)
- Theme hook → Theme constants: reads colors (evidence: `src/hooks/use-theme.ts`)
- Themed text → Theme constants: uses fonts (evidence: `src/components/themed-text.tsx`)
- Themed view → Theme constants: uses color keys (evidence: `src/components/themed-view.tsx`)
- Explore screen → Theme constants: uses layout values (evidence: `src/app/explore.tsx`)