Finance Manager App Template

• Net income/expense overview with animated number display
• Time-range filtering (week, month, year)
• Top spending categories with visual progress bars
• Budget tracking with overspend alerts
• Recent transaction activity feed

Tech Stack

• Framework: React Native with Expo Router
• Language: TypeScript
• State Management: Zustand (financeStore)
• Charts: Custom LineChart component with Animated API
• Styling: React Native StyleSheet with theme tokens
• Safe Area: react-native-safe-area-context for notch/inset handling

Setup/Usage

1. Install dependencies:

   npm install
   # or
   yarn install
   

2. Import and use the tab layout:

   import TabsLayout from './app/(tabs)/_layout';
   

3. Access dashboard screen:

   • The dashboard is the initial route in the tabs navigator
   • Displays financial overview and recent activity
   • Use range pills to filter by week/month/year

4. Navigate between sections:

   • Use bottom tab bar with custom glyph icons
   • Each tab loads its corresponding screen (dashboard, transactions, insights, profile)

5. Add transactions:

   • Press "+ Add" button on dashboard to navigate to transaction creation
   • Transactions automatically update all calculations and charts

Key Components

• TabIcon: Custom tab bar icon with focus indicator
• AnimatedNumber: Displays currency values with smooth animations
• LineChart: Renders spending trends with interactive points
• Category Cards: Grid layout showing top spending categories
• Budget Rows: List items with progress bars and overspend indicators

Theme Integration

The app uses a centralized theme system (Colors, Typography, Spacing, Radii, Shadow) for consistent styling across all screens. Customize colors and typography by modifying the theme tokens.

License

Tetrees License