Day 3: Building a UI for Daily Goals and Achievements

#FitnessGoals #ReactNativeUI #FitnessApp

Welcome to Day 3! Today, you’ll design and build a visually appealing UI for tracking daily fitness goals and displaying user achievements. A clear and motivational interface can boost user engagement and encourage consistent activity.

What You’ll Learn Today

Display daily step goals and progress.
Show achievement badges based on user activity.
Implement a motivational UI with React Native components.

Step 1: Design the UI Layout

1. Daily Goal Progress

Use a circular progress indicator to display daily progress toward the step goal.

2. Achievement Badges

Add icons or images to represent achievements (e.g., 10K steps in a day, weekly streak).

3. Motivational Messages

Display dynamic messages like “Keep going!” or “You’re halfway there!”

Step 2: Install Dependencies

1. React Native SVG for Circular Progress

npm install react-native-svg react-native-circular-progress

2. React Native Vector Icons for Achievements

npm install react-native-vector-icons

Step 3: Update App.js

1. Add Circular Progress Indicator

import React, { useState, useEffect } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { AnimatedCircularProgress } from 'react-native-circular-progress';

const App = () => {
  const [steps, setSteps] = useState(0);
  const dailyGoal = 10000;

  useEffect(() => {
    // Simulate step data (replace with actual API calls)
    setSteps(7500); // Example: user has walked 7500 steps
  }, []);

  const progress = (steps / dailyGoal) * 100;

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Daily Fitness Goal</Text>
      <AnimatedCircularProgress
        size={200}
        width={15}
        fill={progress}
        tintColor="#4caf50"
        backgroundColor="#e0e0e0"
      >
        {() => <Text style={styles.progressText}>{steps} / {dailyGoal} Steps</Text>}
      </AnimatedCircularProgress>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
  },
  progressText: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#333',
  },
});

export default App;

Step 4: Add Achievement Badges

1. Create a Badge Component

Create a new file Badge.js:

import React from 'react';
import { View, Text, StyleSheet, Image } from 'react-native';

const Badge = ({ title, image }) => {
  return (
    <View style={styles.badgeContainer}>
      <Image source={image} style={styles.badgeImage} />
      <Text style={styles.badgeTitle}>{title}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  badgeContainer: {
    alignItems: 'center',
    margin: 10,
  },
  badgeImage: {
    width: 60,
    height: 60,
    marginBottom: 5,
  },
  badgeTitle: {
    fontSize: 14,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

export default Badge;

2. Add Achievement Data

Update App.js:

import Badge from './Badge';

const achievements = [
  { title: '10K Steps!', image: require('./assets/badge-10k.png') },
  { title: 'Weekly Streak', image: require('./assets/badge-streak.png') },
];

return (
  <View style={styles.container}>
    <Text style={styles.title}>Daily Fitness Goal</Text>
    <AnimatedCircularProgress
      size={200}
      width={15}
      fill={progress}
      tintColor="#4caf50"
      backgroundColor="#e0e0e0"
    >
      {() => <Text style={styles.progressText}>{steps} / {dailyGoal} Steps</Text>}
    </AnimatedCircularProgress>
    <View style={styles.badgeSection}>
      {achievements.map((ach, index) => (
        <Badge key={index} title={ach.title} image={ach.image} />
      ))}
    </View>
  </View>
);

3. Style the Badge Section

Add styles for the badge section:

badgeSection: {
  flexDirection: 'row',
  justifyContent: 'center',
  alignItems: 'center',
  marginTop: 20,
},

Step 5: Test the App

Run the app: npx react-native run-android npx react-native run-ios
Verify the Layout:
- The circular progress should reflect daily step progress.
- Achievement badges should display below the progress indicator.

Step 6: Enhance the User Experience

1. Dynamic Motivational Messages

Add dynamic messages based on progress:

const getMotivationalMessage = (progress) => {
  if (progress < 50) return 'Keep going!';
  if (progress < 100) return "You're almost there!";
  return 'Goal achieved!';
};

<Text style={styles.motivation}>
  {getMotivationalMessage(progress)}
</Text>

Style the message:

motivation: {
    fontSize: 18,
    color: '#ff9800',
    marginTop: 10,
},

SEO Optimization for This Tutorial

Keywords: Fitness app goals, React Native fitness tracker UI, fitness achievement badges, step progress React Native, motivational fitness app design.

Meta Description: Build a fitness app UI to track daily goals and achievements. Learn to use React Native components, circular progress, and badges to engage users.

Summary

Today, you built an engaging UI for daily fitness goals and achievements. Users can now visualize their progress and celebrate milestones with badges and motivational messages.

What’s Next: Tomorrow, you’ll integrate GPS tracking to map running routes and record distances.

Stay tuned for Day 4: Integrating GPS for Tracking Running Routes.

Post Views: 58