fix with stackview
This commit is contained in:
dimitar committed
1 parent
c038a54f2e
commit
06237579f0
2 files changed
+327
-321
No files matched your search
@@ -9,7 +9,7 @@ import {
|
||||
Alert,
|
||||
Platform,
|
||||
} from 'react-native';
|
||||
import { useRouter } from 'expo-router';
|
||||
import { useRouter, Stack } from 'expo-router';
|
||||
import { useUser } from '@clerk/clerk-expo';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { LinearGradient } from 'expo-linear-gradient';
|
||||
@@ -53,109 +53,112 @@ export default function PersonalDetailsScreen() {
|
||||
};
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
{/* Header */}
|
||||
<LinearGradient
|
||||
colors={theme.gradients.primary}
|
||||
style={styles.header}
|
||||
>
|
||||
<TouchableOpacity
|
||||
style={styles.backButton}
|
||||
onPress={() => router.back()}
|
||||
<>
|
||||
<Stack.Screen options={{ headerShown: false }} />
|
||||
<View style={styles.container}>
|
||||
{/* Header */}
|
||||
<LinearGradient
|
||||
colors={theme.gradients.primary}
|
||||
style={styles.header}
|
||||
>
|
||||
<Ionicons name="arrow-back" size={24} color="#fff" />
|
||||
</TouchableOpacity>
|
||||
<Text style={styles.headerTitle}>Personal Details</Text>
|
||||
<View style={{ width: 40 }} />
|
||||
</LinearGradient>
|
||||
|
||||
<ScrollView
|
||||
style={styles.content}
|
||||
contentContainerStyle={styles.scrollContent}
|
||||
showsVerticalScrollIndicator={false}
|
||||
>
|
||||
{/* First Name */}
|
||||
<View style={styles.field}>
|
||||
<Text style={styles.label}>First Name *</Text>
|
||||
<View style={styles.inputContainer}>
|
||||
<Ionicons name="person-outline" size={20} color={theme.colors.gray400} style={styles.inputIcon} />
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
value={formData.firstName}
|
||||
onChangeText={(value) => updateField('firstName', value)}
|
||||
placeholder="Enter first name"
|
||||
placeholderTextColor={theme.colors.gray400}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Last Name */}
|
||||
<View style={styles.field}>
|
||||
<Text style={styles.label}>Last Name *</Text>
|
||||
<View style={styles.inputContainer}>
|
||||
<Ionicons name="person-outline" size={20} color={theme.colors.gray400} style={styles.inputIcon} />
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
value={formData.lastName}
|
||||
onChangeText={(value) => updateField('lastName', value)}
|
||||
placeholder="Enter last name"
|
||||
placeholderTextColor={theme.colors.gray400}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Email (Read-only) */}
|
||||
<View style={styles.field}>
|
||||
<Text style={styles.label}>Email</Text>
|
||||
<View style={[styles.inputContainer, styles.disabledInput]}>
|
||||
<Ionicons name="mail-outline" size={20} color={theme.colors.gray400} style={styles.inputIcon} />
|
||||
<TextInput
|
||||
style={[styles.input, styles.disabledText]}
|
||||
value={formData.email}
|
||||
editable={false}
|
||||
placeholderTextColor={theme.colors.gray400}
|
||||
/>
|
||||
<Ionicons name="lock-closed-outline" size={16} color={theme.colors.gray400} />
|
||||
</View>
|
||||
<Text style={styles.helperText}>Email cannot be changed here</Text>
|
||||
</View>
|
||||
|
||||
{/* Phone (Read-only for now) */}
|
||||
<View style={styles.field}>
|
||||
<Text style={styles.label}>Phone Number</Text>
|
||||
<View style={[styles.inputContainer, styles.disabledInput]}>
|
||||
<Ionicons name="call-outline" size={20} color={theme.colors.gray400} style={styles.inputIcon} />
|
||||
<TextInput
|
||||
style={[styles.input, styles.disabledText]}
|
||||
value={formData.phone || 'Not set'}
|
||||
editable={false}
|
||||
placeholderTextColor={theme.colors.gray400}
|
||||
/>
|
||||
<Ionicons name="lock-closed-outline" size={16} color={theme.colors.gray400} />
|
||||
</View>
|
||||
<Text style={styles.helperText}>Phone number cannot be changed here</Text>
|
||||
</View>
|
||||
</ScrollView>
|
||||
|
||||
{/* Save Button */}
|
||||
<View style={styles.footer}>
|
||||
<TouchableOpacity
|
||||
style={[styles.saveButton, loading && styles.saveButtonDisabled]}
|
||||
onPress={handleSave}
|
||||
disabled={loading}
|
||||
>
|
||||
<LinearGradient
|
||||
colors={theme.gradients.primary}
|
||||
style={styles.saveButtonGradient}
|
||||
<TouchableOpacity
|
||||
style={styles.backButton}
|
||||
onPress={() => router.back()}
|
||||
>
|
||||
<Ionicons name="checkmark-circle" size={20} color="#fff" />
|
||||
<Text style={styles.saveButtonText}>
|
||||
{loading ? 'Saving...' : 'Save Changes'}
|
||||
</Text>
|
||||
</LinearGradient>
|
||||
</TouchableOpacity>
|
||||
<Ionicons name="arrow-back" size={24} color="#fff" />
|
||||
</TouchableOpacity>
|
||||
<Text style={styles.headerTitle}>Personal Details</Text>
|
||||
<View style={{ width: 40 }} />
|
||||
</LinearGradient>
|
||||
|
||||
<ScrollView
|
||||
style={styles.content}
|
||||
contentContainerStyle={styles.scrollContent}
|
||||
showsVerticalScrollIndicator={false}
|
||||
>
|
||||
{/* First Name */}
|
||||
<View style={styles.field}>
|
||||
<Text style={styles.label}>First Name *</Text>
|
||||
<View style={styles.inputContainer}>
|
||||
<Ionicons name="person-outline" size={20} color={theme.colors.gray400} style={styles.inputIcon} />
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
value={formData.firstName}
|
||||
onChangeText={(value) => updateField('firstName', value)}
|
||||
placeholder="Enter first name"
|
||||
placeholderTextColor={theme.colors.gray400}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Last Name */}
|
||||
<View style={styles.field}>
|
||||
<Text style={styles.label}>Last Name *</Text>
|
||||
<View style={styles.inputContainer}>
|
||||
<Ionicons name="person-outline" size={20} color={theme.colors.gray400} style={styles.inputIcon} />
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
value={formData.lastName}
|
||||
onChangeText={(value) => updateField('lastName', value)}
|
||||
placeholder="Enter last name"
|
||||
placeholderTextColor={theme.colors.gray400}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Email (Read-only) */}
|
||||
<View style={styles.field}>
|
||||
<Text style={styles.label}>Email</Text>
|
||||
<View style={[styles.inputContainer, styles.disabledInput]}>
|
||||
<Ionicons name="mail-outline" size={20} color={theme.colors.gray400} style={styles.inputIcon} />
|
||||
<TextInput
|
||||
style={[styles.input, styles.disabledText]}
|
||||
value={formData.email}
|
||||
editable={false}
|
||||
placeholderTextColor={theme.colors.gray400}
|
||||
/>
|
||||
<Ionicons name="lock-closed-outline" size={16} color={theme.colors.gray400} />
|
||||
</View>
|
||||
<Text style={styles.helperText}>Email cannot be changed here</Text>
|
||||
</View>
|
||||
|
||||
{/* Phone (Read-only for now) */}
|
||||
<View style={styles.field}>
|
||||
<Text style={styles.label}>Phone Number</Text>
|
||||
<View style={[styles.inputContainer, styles.disabledInput]}>
|
||||
<Ionicons name="call-outline" size={20} color={theme.colors.gray400} style={styles.inputIcon} />
|
||||
<TextInput
|
||||
style={[styles.input, styles.disabledText]}
|
||||
value={formData.phone || 'Not set'}
|
||||
editable={false}
|
||||
placeholderTextColor={theme.colors.gray400}
|
||||
/>
|
||||
<Ionicons name="lock-closed-outline" size={16} color={theme.colors.gray400} />
|
||||
</View>
|
||||
<Text style={styles.helperText}>Phone number cannot be changed here</Text>
|
||||
</View>
|
||||
</ScrollView>
|
||||
|
||||
{/* Save Button */}
|
||||
<View style={styles.footer}>
|
||||
<TouchableOpacity
|
||||
style={[styles.saveButton, loading && styles.saveButtonDisabled]}
|
||||
onPress={handleSave}
|
||||
disabled={loading}
|
||||
>
|
||||
<LinearGradient
|
||||
colors={theme.gradients.primary}
|
||||
style={styles.saveButtonGradient}
|
||||
>
|
||||
<Ionicons name="checkmark-circle" size={20} color="#fff" />
|
||||
<Text style={styles.saveButtonText}>
|
||||
{loading ? 'Saving...' : 'Save Changes'}
|
||||
</Text>
|
||||
</LinearGradient>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Reference in new issue
Block a user