World-Class Gym Checklist App - Full Code
[Link] - Main App File for Gym Checklist
import React, { useState, useEffect } from 'react';
import { View, Text, ScrollView, Switch, Button, Alert, StyleSheet } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import DateTimePicker from '@react-native-community/datetimepicker';
import * as Notifications from 'expo-notifications';
import { format } from 'date-fns';
const exercises = [
{ name: 'Push-ups', sets: 3, reps: 15 },
{ name: 'Pull-ups', sets: 3, reps: 10 },
{ name: 'Squats', sets: 4, reps: 20 },
{ name: 'Bicep Curls', sets: 3, reps: 12 },
{ name: 'Tricep Dips', sets: 3, reps: 12 },
{ name: 'Shoulder Press', sets: 3, reps: 10 },
{ name: 'Plank', sets: 3, reps: '1 min' },
];
export default function App() {
const [completed, setCompleted] = useState({});
const [selectedDate, setSelectedDate] = useState(new Date());
const [showPicker, setShowPicker] = useState(false);
const formattedDate = format(selectedDate, 'yyyy-MM-dd');
useEffect(() => {
loadProgress();
[Link]({
content: {
title: 'Workout Reminder',
body: "Don't forget your training today!",
},
trigger: { hour: 8, minute: 0, repeats: true },
});
}, [selectedDate]);
const loadProgress = async () => {
const data = await [Link](formattedDate);
if (data) setCompleted([Link](data));
else setCompleted({});
};
const toggleExercise = async (exercise) => {
const updated = { ...completed, [exercise]: !completed[exercise] };
setCompleted(updated);
await [Link](formattedDate, [Link](updated));
};
return (
<View style={[Link]}>
<Text style={[Link]}>Gym Checklist - {formattedDate}</Text>
<Button title="Pick Date" onPress={() => setShowPicker(true)} />
{showPicker && (
<DateTimePicker
value={selectedDate}
mode="date"
display="default"
onChange={(e, date) => {
setShowPicker(false);
if (date) setSelectedDate(date);
}}
/>
)}
<ScrollView>
{[Link]((item) => (
<View key={[Link]} style={[Link]}>
<Text style={[Link]}>{[Link]} - {[Link]} sets x {[Link]} reps</Text>
<Switch value={!!completed[[Link]]} onValueChange={() => toggleExercise([Link])} />
</View>
))}
</ScrollView>
</View>
);
}
const styles = [Link]({
container: { flex: 1, backgroundColor: '#f0f0f0', padding: 20, paddingTop: 50 },
title: { fontSize: 18, textAlign: 'center', marginBottom: 10 },
card: { backgroundColor: '#fff', borderRadius: 10, padding: 15, marginBottom: 10, flexDirection: 'row', justifyContent:
'space-between' },
exerciseName: { fontSize: 16 },
});