Back to Components

Apple Fitness

Screen Views
8 months ago

About

Apple Fitness Tracker

A React Native fitness tracking application inspired by Apple's Fitness app, built with TypeScript and React Native Reanimated. Features activity rings, hourly charts, weekly progress tracking, and comprehensive health statistics.

🏗️ Project Structure

app/apple-fitnes/ ├── index.tsx # Main screen component ├── components/ # Reusable UI components │ ├── ActivityRings.tsx # Animated activity rings │ ├── Header.tsx # Top navigation header │ ├── HourlyChart.tsx # Hourly activity chart │ ├── StatsGrid.tsx # Statistics grid layout │ └── WeekView.tsx # Weekly calendar view ├── hooks/ # Custom React hooks │ ├── useFitnessData.ts # Fitness data management │ └── useBarAnimations.ts # Chart animation logic ├── types/ # TypeScript definitions │ └── fitness.types.ts # All fitness-related types └── utils/ # Helper functions └── fitness.utils.ts # Data transformation utilities

🧩 Components

ActivityRings.tsx

Animated circular progress rings showing Move, Exercise, and Stand goals.

Features:

  • Smooth SVG animations with React Native Reanimated
  • Customizable colors, sizes, and animation delays
  • Stacked rings display for comprehensive view
  • Progress percentage calculations

Props:

typescript
interface ActivityRingProps { strokeWidth: number; radius: number; progress: number; color: string; backgroundColor?: string; animationDelay?: number; disableAnimation?: boolean; }

Header.tsx

Navigation header with date display and action buttons.

Features:

  • Date navigation (previous/next day)
  • Calendar picker integration
  • Share functionality
  • Responsive design

HourlyChart.tsx

Bar chart showing hourly activity data throughout the day.

Features:

  • Animated bar charts with Reanimated
  • Dynamic height calculations
  • Hour-by-hour activity visualization
  • Smooth entrance animations

StatsGrid.tsx

Grid layout displaying key fitness statistics.

Features:

  • Steps, distance, flights climbed
  • Move goal progress with visual indicators
  • Responsive grid layout
  • Clean typography and spacing

WeekView.tsx

Weekly calendar view with daily progress indicators.

Features:

  • 7-day week view with activity rings
  • Day selection functionality
  • Progress completion indicators
  • Animated transitions between days

🔧 Hooks

useFitnessData.ts

Central hook for managing all fitness-related data and state.

Features:

  • Data fetching and caching
  • Date navigation logic
  • Loading and error states
  • Data refresh functionality

Returns:

typescript
{ currentData: FitnessDay | null; loading: boolean; error: string | null; selectedDate: string; changeDate: (date: string) => void; navigateDay: (direction: 'prev' | 'next') => void; refreshData: () => void; }

useBarAnimations.ts

Manages animations for the hourly chart bars.

Features:

  • 20 individual shared values for smooth animations
  • Staggered animation timings
  • Spring-based animations
  • Reset and replay functionality

📊 Types

Core Interfaces

ActivityGoal

typescript
interface ActivityGoal { current: number; goal: number; percentage: number; }

DailyStats

typescript
interface DailyStats { steps: number; distance: number; flightsClimbed: number; move: ActivityGoal; exercise: ActivityGoal; stand: ActivityGoal; }

FitnessDay

typescript
interface FitnessDay { id: string; date: string; displayDate: string; dayOfWeek: number; weekData: WeekDay[]; stats: DailyStats; hourlyData: HourlyData[]; totalCalories: number; }

🛠️ Utils

fitness.utils.ts

Helper functions for data transformation and calculations.

Key Functions:

  • generateMockFitnessData() - Creates realistic sample data
  • calculateProgress() - Computes completion percentages
  • formatDisplayDate() - Date formatting utilities
  • generateHourlyData() - Creates hourly activity patterns

🚀 How to Use This Component

1. Basic Integration

typescript
import AppleFitnessTracker from './apple-fitnes'; function App() { return <AppleFitnessTracker />; }

2. Custom Data Integration

Replace the mock data in useFitnessData.ts with your actual fitness API:

typescript
// In useFitnessData.ts const fetchFitnessData = async (date: string) => { const response = await fetch(`/api/fitness/${date}`); return await response.json(); };

3. Styling Customization

Modify colors and themes in individual component styles:

typescript
// Example: Change activity ring colors const moveColor = '#FF3B30'; // Red for Move const exerciseColor = '#32D74B'; // Green for Exercise const standColor = '#007AFF'; // Blue for Stand

4. Component Reusability

Extract individual components for use in other screens:

typescript
// Use just the activity rings import { ActivityRingsStack } from './components/ActivityRings'; <ActivityRingsStack moveProgress={75} exerciseProgress={60} standProgress={90} /> // Use just the stats grid import { StatsGrid } from './components/StatsGrid'; <StatsGrid stats={dailyStats} />

🎨 Customization Guide

Colors

Update the color scheme by modifying the constants in each component:

typescript
const colors = { background: '#000000', text: '#FFFFFF', primary: '#32D74B', secondary: '#007AFF', accent: '#FF3B30' };

Animations

Adjust animation parameters in useBarAnimations.ts:

typescript
const animationConfig = { damping: 15, stiffness: 150, mass: 0.5, delay: 40 // milliseconds between bars };

Data Structure

Modify fitness.types.ts to match your backend API structure.

📦 Dependencies

  • React Native Reanimated 3
  • React Native SVG
  • React Native Safe Area Context
  • TypeScript

🔄 Data Flow

  1. useFitnessData fetches and manages data
  2. Utils transform raw data into display format
  3. Components receive typed props and render UI
  4. Hooks manage animations and interactions
  5. Types ensure type safety throughout

This fitness tracker provides a solid foundation for building health and fitness applications with smooth animations, clean architecture, and reusable components.

Posted by

E

eren

@eren

From App

Apple Fitness

Apple Fitness