import React, { useState } from 'react'; import { View, Text, ScrollView, TouchableOpacity, TextInput, Switch, Alert } from 'react-native'; import { User, Store, CreditCard, Settings, LogOut, Edit3, Save, Shield } from 'lucide-react-native'; const ProfileScreen = () => { // Store information state const [storeInfo, setStoreInfo] = useState({ name: 'QuickMart Convenience', address: '123 Main Street, Metro City', contact: '+1 (555) 123-4567' }); // Owner details state const [ownerInfo, setOwnerInfo] = useState({ name: 'Alex Johnson', email: 'alex.j@quickmart.com', phone: '+1 (555) 987-6543' }); // Store settings state const [settings, setSettings] = useState({ currency: 'USD', taxRate: '8.5', receiptHeader: 'Thank you for shopping with us!', receiptFooter: 'Visit us again soon!', enableReceipts: true }); // Edit mode states const [isEditingStore, setIsEditingStore] = useState(false); const [isEditingOwner, setIsEditingOwner] = useState(false); // Handle save actions const handleSaveStore = () => { setIsEditingStore(false); Alert.alert('Success', 'Store information updated successfully'); }; const handleSaveOwner = () => { setIsEditingOwner(false); Alert.alert('Success', 'Owner information updated successfully'); }; // Handle logout const handleLogout = () => { Alert.alert( 'Logout', 'Are you sure you want to logout?', [ { text: 'Cancel', style: 'cancel' }, { text: 'Logout', onPress: () => console.log('Logout confirmed') } ] ); }; return ( {/* Header */} Profile Manage your store settings and account {/* Scrollable Content */} {/* Store Information Card */} Store Information setIsEditingStore(!isEditingStore)}> {isEditingStore ? ( Store Name setStoreInfo({...storeInfo, name: text})} /> Address setStoreInfo({...storeInfo, address: text})} /> Contact setStoreInfo({...storeInfo, contact: text})} /> Save Changes ) : ( Store Name {storeInfo.name} Address {storeInfo.address} Contact {storeInfo.contact} )} {/* Owner Details Card */} Owner Details setIsEditingOwner(!isEditingOwner)}> {isEditingOwner ? ( Full Name setOwnerInfo({...ownerInfo, name: text})} /> Email setOwnerInfo({...ownerInfo, email: text})} keyboardType="email-address" /> Phone setOwnerInfo({...ownerInfo, phone: text})} keyboardType="phone-pad" /> Save Changes ) : ( Full Name {ownerInfo.name} Email {ownerInfo.email} Phone {ownerInfo.phone} )} {/* Subscription Plan Card */} Subscription Plan Professional Plan Renews on June 15, 2023 Active Employees 5 of 10 Products Unlimited Upgrade Plan {/* Store Settings Card */} Store Settings Currency {['USD', 'EUR', 'GBP', 'CAD'].map((currency) => ( setSettings({...settings, currency})} > {currency} ))} Tax Rate (%) setSettings({...settings, taxRate: text})} keyboardType="numeric" /> Receipt Header setSettings({...settings, receiptHeader: text})} /> Receipt Footer setSettings({...settings, receiptFooter: text})} /> Enable Receipts Print receipts for all transactions setSettings({...settings, enableReceipts: value})} trackColor={{ false: '#d1d5db', true: '#3B82F6' }} thumbColor={settings.enableReceipts ? '#ffffff' : '#f3f4f6'} /> {/* Security Card */} Security Change Password Two-Factor Authentication {/* Logout Button */} Logout ); }; export default ProfileScreen;

React Native Tinda Hub Copy App Preview

Project Screens for Tinda Hub Copy App