How samukelokhathi/charity-ui works
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: index.tsx Chats screen · explore.tsx Explore screen · use-theme.ts Theme hook · theme.ts Theme constants
Components 23
App Shell
- Tab layout
src/app/_layout.tsx - Tab bar
src/components/app-tabs.tsx - Animated icon
src/components/animated-icon.tsx
Chat UI
- Chats screen
src/app/index.tsx - Sample chat data
src/data/chats.ts - Chats header
src/components/chatsHeader.tsx - Chat list item
src/components/chatListItem.tsx - Avatar
src/components/avatar.tsx - Group avatar cluster
src/components/groupAvatarCluster.tsx - Section card
src/components/sectionCard.tsx - Story chip
src/components/storyChip.tsx
Explore Examples
- Explore screen
src/app/explore.tsx - Collapsible example
src/components/ui/collapsible.tsx - External link
src/components/external-link.tsx - Web badge
src/components/web-badge.tsx
Shared UI and Theme
- Unread badge
src/components/badge.tsx - Themed text
src/components/themed-text.tsx - Themed view
src/components/themed-view.tsx - Theme hook
src/hooks/use-theme.ts - Color scheme hook
src/hooks/use-color-scheme.ts - Theme constants
src/constants/theme.ts - Chat palette
src/theme/index.ts
Other components
- App user
Connections 35
- App user → Tab layout: opens app
README.md - Tab layout → Tab bar: sets up tabs
src/app/_layout.tsx - Tab layout → Animated icon: renders
src/app/_layout.tsx - Chats screen → Sample chat data: reads sample data
src/app/index.tsx - Chats screen → Chats header: renders
src/app/index.tsx - Chats screen → Section card: renders
src/app/index.tsx - Chats screen → Chat list item: renders
src/app/index.tsx - Chats screen → Avatar: renders
src/app/index.tsx - Chats screen → Group avatar cluster: renders
src/app/index.tsx - Chats screen → Chat palette: uses colors
src/app/index.tsx - Chat list item → Unread badge: renders
src/components/chatListItem.tsx - Group avatar cluster → Avatar: renders
src/components/groupAvatarCluster.tsx - Chats header → Sample chat data: reads stories
src/components/chatsHeader.tsx - Chats header → Story chip: renders
src/components/chatsHeader.tsx - Story chip → Avatar: renders
src/components/storyChip.tsx - Chat list item → Chat palette: uses colors
src/components/chatListItem.tsx - Avatar → Chat palette: uses colors
src/components/avatar.tsx - Section card → Chat palette: uses colors
src/app/index.tsx - Tab bar → Theme constants: uses constants
src/components/app-tabs.tsx - Explore screen → Collapsible example: renders
src/app/explore.tsx - Explore screen → External link: renders
src/app/explore.tsx - Explore screen → Themed text: renders
src/app/explore.tsx - Explore screen → Themed view: renders
src/app/explore.tsx - Explore screen → Web badge: renders
src/app/explore.tsx - Explore screen → Theme hook: reads theme
src/app/explore.tsx - Collapsible example → Themed text: renders
src/components/ui/collapsible.tsx - Collapsible example → Themed view: renders
src/components/ui/collapsible.tsx - Collapsible example → Theme hook: reads theme
src/components/ui/collapsible.tsx - Themed text → Theme hook: reads theme
src/components/themed-text.tsx - Themed view → Theme hook: reads theme
src/components/themed-view.tsx - Theme hook → Color scheme hook: reads scheme
src/hooks/use-theme.ts - Theme hook → Theme constants: reads colors
src/hooks/use-theme.ts - Themed text → Theme constants: uses fonts
src/components/themed-text.tsx - Themed view → Theme constants: uses color keys
src/components/themed-view.tsx - Explore screen → Theme constants: uses layout values
src/app/explore.tsx