Components Overview

Overview of Simple Manager Mobile’s component library

Simple Manager Mobile provides a comprehensive set of reusable components built with React Native and Expo. The component library is organized into three main categories:

Component Categories

Themed Components

Themed components automatically adapt to light and dark mode using the app’s theme system:

• ThemedText - Text component with theme-aware colors and typography variants
• ThemedView - View container with theme-aware background colors

Learn more in Themed Components.

UI Components

Reusable UI components for common patterns:

• IconSymbol - Cross-platform icon component using SF Symbols on iOS and Material Icons on Android/web
• Collapsible - Expandable/collapsible section with animated chevron
• Toast - Toast notification system with success, error, warning, and info variants

Learn more in UI Components.

Context Providers

React Context providers for managing global state:

• ToastProvider - Context provider for displaying toast notifications throughout the app

Learn more in Context.

Import Paths

All components use TypeScript path aliases for clean imports:

import { ThemedText } from '@/components/themed-text';
import { ThemedView } from '@/components/themed-view';
import { IconSymbol } from '@/components/ui/icon-symbol';
import { Collapsible } from '@/components/ui/collapsible';
import { useToast } from '@/components/context/ToastContext';

TypeScript Support

All components are fully typed with TypeScript interfaces, providing excellent IDE autocomplete and type safety.