import React, { useState } from 'react'; import { View, Text, ScrollView, TextInput, TouchableOpacity, Image, Switch } from 'react-native'; import { User, Mail, Phone, MapPin, Calendar, Target, Settings, Bell, Shield, Palette, Heart, Activity, Moon, Droplets, Smile, ChevronRight, Edit3, Check } from 'lucide-react-native'; // Mock user data const userData = { name: 'Alex Johnson', email: 'alex.johnson@example.com', phone: '+1 (555) 123-4567', location: 'San Francisco, CA', avatar: 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde', joinDate: 'January 15, 2023', healthMetrics: { activity: '8,432 steps', sleep: '7.2 hours', glucose: '98 mg/dL', gutHealth: '85%' }, healthGoals: { steps: 10000, sleep: 8, water: 8, meditation: 2 } }; // Preferences data const preferencesData = [ { id: 'notifications', title: 'Notifications', icon: Bell, value: true }, { id: 'privacy', title: 'Privacy Settings', icon: Shield, value: true }, { id: 'theme', title: 'Dark Mode', icon: Palette, value: false } ]; export default function ProfileScreen() { const [isEditing, setIsEditing] = useState(false); const [name, setName] = useState(userData.name); const [email, setEmail] = useState(userData.email); const [phone, setPhone] = useState(userData.phone); const [location, setLocation] = useState(userData.location); const [preferences, setPreferences] = useState(preferencesData); const togglePreference = (id: string) => { setPreferences(prev => prev.map(pref => pref.id === id ? { ...pref, value: !pref.value } : pref )); }; const saveChanges = () => { setIsEditing(false); // In a real app, you would save to a database here }; const MetricCard = ({ title, value, icon: IconComponent, color }: { title: string; value: string; icon: React.ElementType; color: string; }) => ( {title} {value} ); const PreferenceItem = ({ title, icon: IconComponent, value, id }: { title: string; icon: React.ElementType; value: boolean; id: string; }) => ( {title} togglePreference(id)} value={value} /> ); return ( {/* Header */} Profile {isEditing ? ( Save ) : ( setIsEditing(true)} > )} {/* Profile Section */} {isEditing ? ( ) : ( {name} )} Member since {userData.joinDate} Personal Information {isEditing ? ( ) : ( {email} )} {isEditing ? ( ) : ( {phone} )} {isEditing ? ( ) : ( {location} )} {/* Health Metrics */} Health Metrics {/* Health Goals */} Health Goals Daily Steps {userData.healthGoals.steps.toLocaleString()} steps Sleep Goal {userData.healthGoals.sleep} hours Water Intake {userData.healthGoals.water} glasses Meditation {userData.healthGoals.meditation} sessions {/* Preferences */} Preferences {preferences.map((pref) => ( ))} {/* Account Actions */} Account Account Settings Privacy Policy About HealthSync ); }

React Native HealthSync Chat App Preview

Project Screens for HealthSync Chat App