Day 7: Storing and Analyzing Workout History with Graphs

#WorkoutHistory #FitnessAppAnalytics #ReactNativeCharts

Welcome to Day 7! Today, you’ll add functionality to store and analyze workout history. You’ll also create beautiful graphs to visualize progress, providing users with actionable insights into their fitness journey.

Table of Contents

What You’ll Learn Today

Store workout history using local storage.
Display historical data in a list view.
Create and render graphs to visualize fitness trends.

Step 1: Store Workout History

1. Install Async Storage

Use Async Storage to persist workout history locally:

npm install @react-native-async-storage/async-storage

2. Save and Retrieve Data

Update ActivityFeed.js to save completed workouts:

import AsyncStorage from '@react-native-async-storage/async-storage';

export const saveWorkout = async (workout) => {
  const storedWorkouts = await AsyncStorage.getItem('workouts');
  const workouts = storedWorkouts ? JSON.parse(storedWorkouts) : [];
  workouts.unshift(workout); // Add the new workout at the top
  await AsyncStorage.setItem('workouts', JSON.stringify(workouts));
};

export const getWorkouts = async () => {
  const storedWorkouts = await AsyncStorage.getItem('workouts');
  return storedWorkouts ? JSON.parse(storedWorkouts) : [];
};

Step 2: Update ActivityFeed Component

1. Display Stored Data

Modify ActivityFeed.js to load workout history:

import React, { useEffect, useState } from 'react';
import { View, Text, StyleSheet, FlatList } from 'react-native';
import { getWorkouts } from './ActivityFeed';

const ActivityFeed = () => {
  const [workouts, setWorkouts] = useState([]);

  useEffect(() => {
    const loadWorkouts = async () => {
      const data = await getWorkouts();
      setWorkouts(data);
    };
    loadWorkouts();
  }, []);

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Workout History</Text>
      <FlatList
        data={workouts}
        keyExtractor={(item, index) => index.toString()}
        renderItem={({ item }) => (
          <View style={styles.card}>
            <Text style={styles.date}>📅 {item.date} - {item.time}</Text>
            <Text style={styles.details}>Distance: {item.distance} km</Text>
          </View>
        )}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#f9f9f9',
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
    marginBottom: 10,
  },
  card: {
    backgroundColor: '#fff',
    padding: 15,
    marginVertical: 8,
    borderRadius: 10,
    elevation: 3,
  },
  date: {
    fontSize: 16,
    fontWeight: 'bold',
  },
  details: {
    fontSize: 14,
    color: '#555',
    marginTop: 5,
  },
});

export default ActivityFeed;

Step 3: Visualize Data with Graphs

1. Install React Native Chart Kit

npm install react-native-chart-kit

2. Add a Graph to Display Trends

Update ActivityFeed.js to include a line chart:

import { LineChart } from 'react-native-chart-kit';
import { Dimensions } from 'react-native';

const ActivityFeed = () => {
  const [workouts, setWorkouts] = useState([]);

  useEffect(() => {
    const loadWorkouts = async () => {
      const data = await getWorkouts();
      setWorkouts(data);
    };
    loadWorkouts();
  }, []);

  const graphData = {
    labels: workouts.map((workout, index) => `Day ${index + 1}`),
    datasets: [
      {
        data: workouts.map((workout) => parseFloat(workout.distance)),
        strokeWidth: 2,
      },
    ],
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Workout History</Text>
      {workouts.length > 0 && (
        <LineChart
          data={graphData}
          width={Dimensions.get('window').width - 40}
          height={220}
          chartConfig={{
            backgroundColor: '#e26a00',
            backgroundGradientFrom: '#fb8c00',
            backgroundGradientTo: '#ffa726',
            color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
            labelColor: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
            strokeWidth: 2,
          }}
          style={{ marginVertical: 20 }}
        />
      )}
      <FlatList
        data={workouts}
        keyExtractor={(item, index) => index.toString()}
        renderItem={({ item }) => (
          <View style={styles.card}>
            <Text style={styles.date}>📅 {item.date} - {item.time}</Text>
            <Text style={styles.details}>Distance: {item.distance} km</Text>
          </View>
        )}
      />
    </View>
  );
};

Step 4: Test the App

Run the app: npx react-native run-android npx react-native run-ios
Complete multiple workouts and stop tracking to save data.
Verify the activity feed displays workout history and the graph visualizes progress.

Enhance the Graphs (Optional)

Add Multiple Datasets:
- Track additional metrics like calories burned or duration.
Switch Graph Types:
- Allow users to toggle between line charts, bar charts, or pie charts.
Dynamic Timeframes:
- Enable filtering data by week, month, or year.

SEO Optimization for This Tutorial

Keywords: Fitness app graphs, React Native workout analytics, workout history visualization, fitness trend tracking, React Native charts.

Meta Description: Learn how to store workout history and analyze fitness progress using graphs in a React Native app. Full tutorial with code examples.

Summary

Today, you added functionality to store and analyze workout history, creating graphs to help users visualize their fitness trends. These features provide valuable insights and keep users motivated.

What’s Next: Tomorrow, you’ll implement social features like friend challenges and leaderboards.

Stay tuned for Day 8: Implementing Social Features.

Post Views: 55