Tracker App Template

The Tracker App is a complete template (registered as tracker-app in the CLI) that demonstrates a complex, modern dashboard layout. It’s perfect for food tracking, health monitoring, or any metric-driven application.

vf add tracker-app

Features

• Dynamic Dashboard: A beautiful overview with animated progress rings and calorie/macro cards.
• Weekly Progress: A WeekCalendar component for quick navigation and daily comparisons.
• Micro-Animations: Uses AnimatedNumber for smooth transitions when data updates.
• Reusable Cards: Specialized components like MacroCard and CalorieCard that adapt to your theme colors.

Code Organization

• Main Screen: apps/native/src/features/tracker-app/app/index.tsx (accessible via the /tracker-app route).
• Core Components: Found in apps/native/src/features/tracker-app/components:
  • CircularProgress: A Skia-powered progress ring.
  • WeekCalendar: A horizontal date picker/status bar.
  • MacroCard: A compact card for displaying specific metrics like Protein, Carbs, or Fats.

Customizing the Metrics

To change the tracked metrics, you can modify the HomeScreen in tracker-app/app/index.tsx. The components are modular and take simple props for values, goals, and colors:

<MacroCard
  value={122}
  unit="g"
  label="Protein"
  progress={35}
  color={theme.colors.destructive}
  delay={600}
/>

The template is fully wired to useThemeConfig, so updating your global colors.js immediately updates the entire tracker UI including charts and progression rings.