#FitnessFeed #ActivityTracking #ReactNativeApp
Welcome to Day 5! Today, you’ll implement an activity feed to display recent workouts, runs, and tracked routes. An activity feed improves user engagement by showcasing their fitness history in an organized and visually appealing format.
What You’ll Learn Today
- Save tracked routes and workout sessions.
- Display recent activities in a list format.
- Add workout details like date, distance, and duration.
Step 1: Save Workout Data
1. Track and Save Activity Details
Update GPSTracker.js to save completed workout details in a state:
import React, { useState, useEffect } from 'react';
import { View, Text, StyleSheet, Button, PermissionsAndroid, Platform } from 'react-native';
import Geolocation from '@react-native-community/geolocation';
import MapView, { Polyline } from 'react-native-maps';
import haversine from 'haversine';
const GPSTracker = ({ onSaveWorkout }) => {
const [route, setRoute] = useState([]);
const [currentPosition, setCurrentPosition] = useState(null);
const [isTracking, setIsTracking] = useState(false);
useEffect(() => {
const requestLocationPermission = async () => {
if (Platform.OS === 'android') {
const granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION
);
if (granted === PermissionsAndroid.RESULTS.GRANTED) {
console.log('Location permission granted');
} else {
console.error('Location permission denied');
}
}
};
requestLocationPermission();
}, []);
const startTracking = () => {
setIsTracking(true);
Geolocation.watchPosition(
(position) => {
const { latitude, longitude } = position.coords;
const newPoint = { latitude, longitude };
setCurrentPosition(newPoint);
setRoute((prevRoute) => [...prevRoute, newPoint]);
},
(error) => console.error(error),
{ enableHighAccuracy: true, distanceFilter: 10 }
);
};
const stopTracking = () => {
setIsTracking(false);
Geolocation.stopObserving();
const distance = calculateDistance(route);
const workout = {
date: new Date().toLocaleDateString(),
time: new Date().toLocaleTimeString(),
distance,
points: route,
};
onSaveWorkout(workout);
setRoute([]);
};
const calculateDistance = (route) => {
let totalDistance = 0;
for (let i = 1; i < route.length; i++) {
totalDistance += haversine(route[i - 1], route[i]);
}
return totalDistance.toFixed(2);
};
return (
<View style={styles.container}>
<MapView
style={styles.map}
initialRegion={{
latitude: currentPosition?.latitude || 37.78825,
longitude: currentPosition?.longitude || -122.4324,
latitudeDelta: 0.01,
longitudeDelta: 0.01,
}}
>
{route.length > 1 && <Polyline coordinates={route} strokeWidth={4} strokeColor="#4caf50" />}
</MapView>
<View style={styles.info}>
<Text style={styles.text}>Tracking: {isTracking ? 'ON' : 'OFF'}</Text>
<Button title={isTracking ? 'Stop' : 'Start'} onPress={isTracking ? stopTracking : startTracking} />
</View>
</View>
);
};
const styles = StyleSheet.create({
container: { flex: 1 },
map: { flex: 1 },
info: { padding: 10, backgroundColor: 'white', alignItems: 'center' },
text: { fontSize: 16 },
});
export default GPSTracker;
Step 2: Add Activity Feed Component
1. Create an ActivityFeed Component
Create a new file ActivityFeed.js:
import React from 'react';
import { View, Text, StyleSheet, FlatList } from 'react-native';
const ActivityFeed = ({ activities }) => {
return (
<View style={styles.container}>
<Text style={styles.title}>Recent Workouts</Text>
<FlatList
data={activities}
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: Update App.js to Combine Components
Update App.js to integrate the GPSTracker and ActivityFeed components:
import React, { useState } from 'react';
import { View, StyleSheet } from 'react-native';
import GPSTracker from './GPSTracker';
import ActivityFeed from './ActivityFeed';
const App = () => {
const [activities, setActivities] = useState([]);
const saveWorkout = (workout) => {
setActivities((prevActivities) => [workout, ...prevActivities]);
};
return (
<View style={styles.container}>
<GPSTracker onSaveWorkout={saveWorkout} />
<ActivityFeed activities={activities} />
</View>
);
};
const styles = StyleSheet.create({
container: { flex: 1 },
});
export default App;
Step 4: Test the App
- Run the app:
npx react-native run-android npx react-native run-ios - Track a route using GPS and stop tracking. The completed workout will appear in the activity feed.
- Test with multiple runs to ensure the feed displays recent workouts.
Enhance the Feed (Optional)
- Add Images: Display map screenshots or icons for each activity.
- Include Duration: Track workout duration using timestamps.
- Filter Activities: Allow users to filter workouts by date or distance.
SEO Optimization for This Tutorial
Keywords: Fitness activity feed, React Native GPS routes, display workout history, fitness app activity list, track running routes.
Meta Description: Learn how to create an activity feed in your React Native fitness app. Display recent workouts, running routes, and fitness history in a clean and organized format.
Summary
Today, you built a fitness activity feed to display recent workouts and tracked routes. This feature enhances user engagement and allows users to monitor their progress over time.
What’s Next: Tomorrow, you’ll implement push notifications to remind users of their fitness goals.
Stay tuned for Day 6: Sending Push Notifications for Reminders and Goals.
