import React, { useState } from 'react'; import { View, Text, TouchableOpacity, ScrollView, Alert, Image } from 'react-native'; import { Bell, Moon, Sun, User, Mail, LogOut, Smartphone, Palette } from 'lucide-react-native'; export default function Profile() { // User data const user = { name: "Alex Morgan", email: "alex.morgan@example.com", avatar: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&h=200&q=80", taskStats: { total: 24, completed: 18, pending: 6 } }; // Settings states const [notifications, setNotifications] = useState(true); const [darkMode, setDarkMode] = useState(false); const handleLogout = () => { Alert.alert( "Logout", "Are you sure you want to logout?", [ { text: "Cancel", style: "cancel" }, { text: "Logout", style: "destructive", onPress: () => { // In a real app, you would clear user session here Alert.alert("Logged out", "You have been successfully logged out"); } } ] ); }; return ( {/* Header */} Profile Manage your account settings {/* Profile Card */} {user.name} {user.email} {/* Task Statistics */} Task Statistics {user.taskStats.total} Total Tasks {user.taskStats.completed} Completed {user.taskStats.pending} Pending Completion Rate {user.taskStats.total > 0 ? Math.round((user.taskStats.completed / user.taskStats.total) * 100) : 0}% 0 ? (user.taskStats.completed / user.taskStats.total) * 100 : 0}%` }} /> {/* Settings Section */} Settings {/* Notifications Setting */} setNotifications(!notifications)} > Notifications {/* Theme Setting */} setDarkMode(!darkMode)} > {darkMode ? ( ) : ( )} Dark Mode {/* Account Management */} Account Settings {/* Additional Options */} Preferences Push Notifications Theme Customization {/* Logout Button */} Logout ); }

React Native TaskFlow App Preview

Project Screens for TaskFlow App