import React, { useState } from 'react'; import { View, Text, TouchableOpacity, ScrollView, StyleSheet, SafeAreaView } from 'react-native'; import { LinearGradient } from 'expo-linear-gradient'; import { Ionicons, MaterialCommunityIcons, Feather } from '@expo/vector-icons'; type Tab = 'Home' | 'Workouts' | 'Stats' | 'Profile'; interface Workout { name: string; duration: string; calories: number; icon: keyof typeof MaterialCommunityIcons.glyphMap; } const workouts: Workout[] = [ { name: 'Morning Run', duration: '32 min', calories: 340, icon: 'run' }, { name: 'Upper Body Strength', duration: '45 min', calories: 280, icon: 'weight-lifter' }, { name: 'Yoga Flow', duration: '25 min', calories: 120, icon: 'yoga' }, { name: 'Cycling', duration: '50 min', calories: 410, icon: 'bike' }, ]; const weekStats = [ { day: 'Mon', value: 0.6 }, { day: 'Tue', value: 0.9 }, { day: 'Wed', value: 0.4 }, { day: 'Thu', value: 1.0 }, { day: 'Fri', value: 0.7 }, { day: 'Sat', value: 0.3 }, { day: 'Sun', value: 0.5 }, ]; const rings = [ { label: 'Move', value: 420, goal: 600, color: '#22c55e' }, { label: 'Exercise', value: 34, goal: 45, color: '#eab308' }, { label: 'Stand', value: 9, goal: 12, color: '#3b82f6' }, ]; export default function App() { const [tab, setTab] = useState('Home'); return ( {tab === 'Home' && ( <> Good morning, Alex Wednesday, September 9 {rings.map(r => ( {r.label} {r.value}/{r.goal} ))} Today's Suggestion Evening Run 3.2 km · ~25 min · Burn ~280 cal Start )} {tab === 'Workouts' && ( <> Workouts {workouts.map(w => ( {w.name} {w.duration} · {w.calories} cal ))} )} {tab === 'Stats' && ( <> This Week {weekStats.map(s => ( {s.day} ))} 18.4 km Distance 2,140 Calories 5h 12m Active Time )} {tab === 'Profile' && ( <> Profile Alex Johnson Member since 2024 {['Goals', 'Connected Devices', 'Notifications', 'Privacy'].map(item => ( {item} ))} )} {([ { key: 'Home', icon: 'home' }, { key: 'Workouts', icon: 'barbell' }, { key: 'Stats', icon: 'stats-chart' }, { key: 'Profile', icon: 'person' }, ] as const).map(t => ( setTab(t.key)} style={styles.tabItem}> {t.key} ))} ); } const styles = StyleSheet.create({ root: { flex: 1, backgroundColor: '#0a0a0a' }, greeting: { fontSize: 24, fontWeight: '800', color: '#fafafa' }, dateText: { fontSize: 13, color: '#a3a3a3', marginTop: 2, marginBottom: 20 }, ringsCard: { backgroundColor: '#171717', borderRadius: 18, padding: 18, gap: 14 }, ringRow: { flexDirection: 'row', alignItems: 'center', gap: 10 }, ringDot: { width: 10, height: 10, borderRadius: 5 }, ringLabel: { fontSize: 12, color: '#d4d4d4', width: 70 }, ringBarTrack: { flex: 1, height: 8, backgroundColor: '#262626', borderRadius: 4, overflow: 'hidden' }, ringBarFill: { height: 8, borderRadius: 4 }, ringValue: { fontSize: 11, color: '#a3a3a3', width: 56, textAlign: 'right' }, sectionTitle: { fontSize: 18, fontWeight: '800', color: '#fafafa', marginTop: 24, marginBottom: 4 }, suggestionCard: { flexDirection: 'row', alignItems: 'center', borderRadius: 18, padding: 18, marginTop: 12 }, suggestionTitle: { fontSize: 15, fontWeight: '700', color: '#fafafa' }, suggestionSub: { fontSize: 12, color: '#bbf7d0', marginTop: 3 }, startBtn: { backgroundColor: '#4ade80', paddingVertical: 8, paddingHorizontal: 16, borderRadius: 10 }, startBtnText: { color: '#052e16', fontSize: 12, fontWeight: '800' }, workoutRow: { flexDirection: 'row', alignItems: 'center', gap: 14, backgroundColor: '#171717', borderRadius: 16, padding: 14 }, workoutIcon: { width: 44, height: 44, borderRadius: 12, backgroundColor: '#052e16', alignItems: 'center', justifyContent: 'center' }, workoutName: { fontSize: 14, fontWeight: '700', color: '#fafafa' }, workoutMeta: { fontSize: 12, color: '#a3a3a3', marginTop: 3 }, statsCard: { backgroundColor: '#171717', borderRadius: 18, padding: 20, marginTop: 12 }, chartRow: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-end', height: 120 }, barColumn: { alignItems: 'center', gap: 8, flex: 1 }, barTrack: { width: 14, height: 90, backgroundColor: '#262626', borderRadius: 7, justifyContent: 'flex-end', overflow: 'hidden' }, barFill: { width: 14, backgroundColor: '#4ade80', borderRadius: 7 }, barLabel: { fontSize: 10, color: '#a3a3a3' }, statTiles: { flexDirection: 'row', gap: 10, marginTop: 16 }, statTile: { flex: 1, backgroundColor: '#171717', borderRadius: 14, padding: 14, alignItems: 'center' }, statTileValue: { fontSize: 15, fontWeight: '800', color: '#4ade80' }, statTileLabel: { fontSize: 10, color: '#a3a3a3', marginTop: 4 }, profileCard: { alignItems: 'center', backgroundColor: '#171717', borderRadius: 18, padding: 24, marginTop: 12 }, avatar: { width: 64, height: 64, borderRadius: 32, backgroundColor: '#4ade80', alignItems: 'center', justifyContent: 'center' }, profileName: { fontSize: 16, fontWeight: '800', color: '#fafafa', marginTop: 10 }, profileMeta: { fontSize: 12, color: '#a3a3a3', marginTop: 3 }, settingsRow: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', backgroundColor: '#171717', borderRadius: 14, padding: 16 }, settingsText: { fontSize: 13, fontWeight: '600', color: '#e5e5e5' }, tabBar: { flexDirection: 'row', justifyContent: 'space-around', paddingVertical: 12, backgroundColor: '#0a0a0a', borderTopWidth: 1, borderTopColor: '#262626' }, tabItem: { alignItems: 'center', gap: 3 }, tabLabel: { fontSize: 10, color: '#737373' }, tabLabelActive: { color: '#4ade80', fontWeight: '700' }, });

Mobile Fitness Activity Screen