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
@@ -10,7 +10,7 @@ import {
|
||||
TextInput,
|
||||
Platform,
|
||||
} from 'react-native';
|
||||
import { useRouter } from 'expo-router';
|
||||
import { useRouter, Stack } from 'expo-router';
|
||||
import { useAuth } from '@clerk/clerk-expo';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { LinearGradient } from 'expo-linear-gradient';
|
||||
@@ -156,228 +156,231 @@ export default function FitnessProfileScreen() {
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
{/* Header */}
|
||||
<LinearGradient colors={theme.gradients.primary} style={styles.header}>
|
||||
<TouchableOpacity style={styles.backButton} onPress={() => router.back()}>
|
||||
<Ionicons name="arrow-back" size={24} color="#fff" />
|
||||
</TouchableOpacity>
|
||||
<Text style={styles.headerTitle}>Fitness Profile</Text>
|
||||
<View style={{ width: 40 }} />
|
||||
</LinearGradient>
|
||||
<>
|
||||
<Stack.Screen options={{ headerShown: false }} />
|
||||
<View style={styles.container}>
|
||||
{/* Header */}
|
||||
<LinearGradient colors={theme.gradients.primary} style={styles.header}>
|
||||
<TouchableOpacity style={styles.backButton} onPress={() => router.back()}>
|
||||
<Ionicons name="arrow-back" size={24} color="#fff" />
|
||||
</TouchableOpacity>
|
||||
<Text style={styles.headerTitle}>Fitness Profile</Text>
|
||||
<View style={{ width: 40 }} />
|
||||
</LinearGradient>
|
||||
|
||||
<ScrollView
|
||||
style={styles.scrollView}
|
||||
contentContainerStyle={styles.scrollContent}
|
||||
showsVerticalScrollIndicator={false}
|
||||
>
|
||||
{/* Basic Information */}
|
||||
<View style={styles.section}>
|
||||
<Text style={styles.sectionTitle}>Basic Information</Text>
|
||||
<View style={styles.card}>
|
||||
<View style={styles.row}>
|
||||
<View style={styles.inputGroup}>
|
||||
<Text style={styles.label}>Height (cm)</Text>
|
||||
<View style={styles.inputContainer}>
|
||||
<Ionicons name="resize-outline" size={20} color={theme.colors.gray400} />
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
value={profileData.height?.toString() || ''}
|
||||
onChangeText={(text) =>
|
||||
updateField('height', text ? parseFloat(text) : undefined)
|
||||
}
|
||||
keyboardType="decimal-pad"
|
||||
placeholder="175"
|
||||
placeholderTextColor={theme.colors.gray400}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.inputGroup}>
|
||||
<Text style={styles.label}>Weight (kg)</Text>
|
||||
<View style={styles.inputContainer}>
|
||||
<Ionicons name="scale-outline" size={20} color={theme.colors.gray400} />
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
value={profileData.weight?.toString() || ''}
|
||||
onChangeText={(text) =>
|
||||
updateField('weight', text ? parseFloat(text) : undefined)
|
||||
}
|
||||
keyboardType="decimal-pad"
|
||||
placeholder="70"
|
||||
placeholderTextColor={theme.colors.gray400}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.inputGroup}>
|
||||
<Text style={styles.label}>Age</Text>
|
||||
<View style={styles.inputContainer}>
|
||||
<Ionicons name="calendar-outline" size={20} color={theme.colors.gray400} />
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
value={profileData.age?.toString() || ''}
|
||||
onChangeText={(text) =>
|
||||
updateField('age', text ? parseInt(text, 10) : undefined)
|
||||
}
|
||||
keyboardType="number-pad"
|
||||
placeholder="25"
|
||||
placeholderTextColor={theme.colors.gray400}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Gender Selection */}
|
||||
<View style={styles.section}>
|
||||
<Text style={styles.sectionTitle}>Gender</Text>
|
||||
<View style={styles.optionsRow}>
|
||||
{GENDER_OPTIONS.map((option) => (
|
||||
<TouchableOpacity
|
||||
key={option.value}
|
||||
style={[
|
||||
styles.optionCard,
|
||||
profileData.gender === option.value && styles.optionCardActive,
|
||||
]}
|
||||
onPress={() => updateField('gender', option.value)}
|
||||
>
|
||||
<Ionicons
|
||||
name={option.icon as any}
|
||||
size={24}
|
||||
color={
|
||||
profileData.gender === option.value
|
||||
? theme.colors.primary
|
||||
: theme.colors.gray400
|
||||
}
|
||||
/>
|
||||
<Text
|
||||
style={[
|
||||
styles.optionLabel,
|
||||
profileData.gender === option.value && styles.optionLabelActive,
|
||||
]}
|
||||
>
|
||||
{option.label}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Fitness Goal */}
|
||||
<View style={styles.section}>
|
||||
<Text style={styles.sectionTitle}>Primary Fitness Goal</Text>
|
||||
<View style={styles.card}>
|
||||
{FITNESS_GOAL_OPTIONS.map((option, index) => (
|
||||
<React.Fragment key={option.value}>
|
||||
<TouchableOpacity
|
||||
style={styles.listItem}
|
||||
onPress={() => updateField('fitnessGoal', option.value)}
|
||||
>
|
||||
<View style={[styles.iconCircle, { backgroundColor: `${option.color}20` }]}>
|
||||
<Ionicons name={option.icon as any} size={20} color={option.color} />
|
||||
</View>
|
||||
<Text style={styles.listItemText}>{option.label}</Text>
|
||||
{profileData.fitnessGoal === option.value && (
|
||||
<Ionicons name="checkmark-circle" size={24} color={theme.colors.primary} />
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
{index < FITNESS_GOAL_OPTIONS.length - 1 && <View style={styles.divider} />}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Activity Level */}
|
||||
<View style={styles.section}>
|
||||
<Text style={styles.sectionTitle}>Activity Level</Text>
|
||||
<View style={styles.card}>
|
||||
{ACTIVITY_LEVEL_OPTIONS.map((option, index) => (
|
||||
<React.Fragment key={option.value}>
|
||||
<TouchableOpacity
|
||||
style={styles.listItem}
|
||||
onPress={() => updateField('activityLevel', option.value)}
|
||||
>
|
||||
<View style={{ flex: 1 }}>
|
||||
<Text style={styles.listItemText}>{option.label}</Text>
|
||||
<Text style={styles.listItemDescription}>{option.description}</Text>
|
||||
</View>
|
||||
{profileData.activityLevel === option.value && (
|
||||
<Ionicons name="checkmark-circle" size={24} color={theme.colors.primary} />
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
{index < ACTIVITY_LEVEL_OPTIONS.length - 1 && <View style={styles.divider} />}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Health Information */}
|
||||
<View style={styles.section}>
|
||||
<Text style={styles.sectionTitle}>Health Information (Optional)</Text>
|
||||
<View style={styles.card}>
|
||||
<View style={styles.inputGroup}>
|
||||
<Text style={styles.label}>Medical Conditions</Text>
|
||||
<TextInput
|
||||
style={[styles.textArea]}
|
||||
value={profileData.medicalConditions || ''}
|
||||
onChangeText={(text) => updateField('medicalConditions', text)}
|
||||
placeholder="e.g., Asthma, diabetes..."
|
||||
placeholderTextColor={theme.colors.gray400}
|
||||
multiline
|
||||
numberOfLines={3}
|
||||
textAlignVertical="top"
|
||||
/>
|
||||
</View>
|
||||
<View style={styles.inputGroup}>
|
||||
<Text style={styles.label}>Allergies</Text>
|
||||
<TextInput
|
||||
style={[styles.textArea]}
|
||||
value={profileData.allergies || ''}
|
||||
onChangeText={(text) => updateField('allergies', text)}
|
||||
placeholder="e.g., Peanuts, latex..."
|
||||
placeholderTextColor={theme.colors.gray400}
|
||||
multiline
|
||||
numberOfLines={3}
|
||||
textAlignVertical="top"
|
||||
/>
|
||||
</View>
|
||||
<View style={styles.inputGroup}>
|
||||
<Text style={styles.label}>Injuries</Text>
|
||||
<TextInput
|
||||
style={[styles.textArea]}
|
||||
value={profileData.injuries || ''}
|
||||
onChangeText={(text) => updateField('injuries', text)}
|
||||
placeholder="e.g., Previous knee injury..."
|
||||
placeholderTextColor={theme.colors.gray400}
|
||||
multiline
|
||||
numberOfLines={3}
|
||||
textAlignVertical="top"
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</ScrollView>
|
||||
|
||||
{/* Save Button */}
|
||||
<View style={styles.footer}>
|
||||
<TouchableOpacity
|
||||
style={[styles.saveButton, loading && styles.saveButtonDisabled]}
|
||||
onPress={handleSave}
|
||||
disabled={loading}
|
||||
<ScrollView
|
||||
style={styles.scrollView}
|
||||
contentContainerStyle={styles.scrollContent}
|
||||
showsVerticalScrollIndicator={false}
|
||||
>
|
||||
<LinearGradient colors={theme.gradients.primary} style={styles.saveButtonGradient}>
|
||||
{loading ? (
|
||||
<ActivityIndicator color="#fff" />
|
||||
) : (
|
||||
<>
|
||||
<Ionicons name="checkmark-circle" size={20} color="#fff" />
|
||||
<Text style={styles.saveButtonText}>Save Profile</Text>
|
||||
</>
|
||||
)}
|
||||
</LinearGradient>
|
||||
</TouchableOpacity>
|
||||
{/* Basic Information */}
|
||||
<View style={styles.section}>
|
||||
<Text style={styles.sectionTitle}>Basic Information</Text>
|
||||
<View style={styles.card}>
|
||||
<View style={styles.row}>
|
||||
<View style={styles.inputGroup}>
|
||||
<Text style={styles.label}>Height (cm)</Text>
|
||||
<View style={styles.inputContainer}>
|
||||
<Ionicons name="resize-outline" size={20} color={theme.colors.gray400} />
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
value={profileData.height?.toString() || ''}
|
||||
onChangeText={(text) =>
|
||||
updateField('height', text ? parseFloat(text) : undefined)
|
||||
}
|
||||
keyboardType="decimal-pad"
|
||||
placeholder="175"
|
||||
placeholderTextColor={theme.colors.gray400}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.inputGroup}>
|
||||
<Text style={styles.label}>Weight (kg)</Text>
|
||||
<View style={styles.inputContainer}>
|
||||
<Ionicons name="scale-outline" size={20} color={theme.colors.gray400} />
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
value={profileData.weight?.toString() || ''}
|
||||
onChangeText={(text) =>
|
||||
updateField('weight', text ? parseFloat(text) : undefined)
|
||||
}
|
||||
keyboardType="decimal-pad"
|
||||
placeholder="70"
|
||||
placeholderTextColor={theme.colors.gray400}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.inputGroup}>
|
||||
<Text style={styles.label}>Age</Text>
|
||||
<View style={styles.inputContainer}>
|
||||
<Ionicons name="calendar-outline" size={20} color={theme.colors.gray400} />
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
value={profileData.age?.toString() || ''}
|
||||
onChangeText={(text) =>
|
||||
updateField('age', text ? parseInt(text, 10) : undefined)
|
||||
}
|
||||
keyboardType="number-pad"
|
||||
placeholder="25"
|
||||
placeholderTextColor={theme.colors.gray400}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Gender Selection */}
|
||||
<View style={styles.section}>
|
||||
<Text style={styles.sectionTitle}>Gender</Text>
|
||||
<View style={styles.optionsRow}>
|
||||
{GENDER_OPTIONS.map((option) => (
|
||||
<TouchableOpacity
|
||||
key={option.value}
|
||||
style={[
|
||||
styles.optionCard,
|
||||
profileData.gender === option.value && styles.optionCardActive,
|
||||
]}
|
||||
onPress={() => updateField('gender', option.value)}
|
||||
>
|
||||
<Ionicons
|
||||
name={option.icon as any}
|
||||
size={24}
|
||||
color={
|
||||
profileData.gender === option.value
|
||||
? theme.colors.primary
|
||||
: theme.colors.gray400
|
||||
}
|
||||
/>
|
||||
<Text
|
||||
style={[
|
||||
styles.optionLabel,
|
||||
profileData.gender === option.value && styles.optionLabelActive,
|
||||
]}
|
||||
>
|
||||
{option.label}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Fitness Goal */}
|
||||
<View style={styles.section}>
|
||||
<Text style={styles.sectionTitle}>Primary Fitness Goal</Text>
|
||||
<View style={styles.card}>
|
||||
{FITNESS_GOAL_OPTIONS.map((option, index) => (
|
||||
<React.Fragment key={option.value}>
|
||||
<TouchableOpacity
|
||||
style={styles.listItem}
|
||||
onPress={() => updateField('fitnessGoal', option.value)}
|
||||
>
|
||||
<View style={[styles.iconCircle, { backgroundColor: `${option.color}20` }]}>
|
||||
<Ionicons name={option.icon as any} size={20} color={option.color} />
|
||||
</View>
|
||||
<Text style={styles.listItemText}>{option.label}</Text>
|
||||
{profileData.fitnessGoal === option.value && (
|
||||
<Ionicons name="checkmark-circle" size={24} color={theme.colors.primary} />
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
{index < FITNESS_GOAL_OPTIONS.length - 1 && <View style={styles.divider} />}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Activity Level */}
|
||||
<View style={styles.section}>
|
||||
<Text style={styles.sectionTitle}>Activity Level</Text>
|
||||
<View style={styles.card}>
|
||||
{ACTIVITY_LEVEL_OPTIONS.map((option, index) => (
|
||||
<React.Fragment key={option.value}>
|
||||
<TouchableOpacity
|
||||
style={styles.listItem}
|
||||
onPress={() => updateField('activityLevel', option.value)}
|
||||
>
|
||||
<View style={{ flex: 1 }}>
|
||||
<Text style={styles.listItemText}>{option.label}</Text>
|
||||
<Text style={styles.listItemDescription}>{option.description}</Text>
|
||||
</View>
|
||||
{profileData.activityLevel === option.value && (
|
||||
<Ionicons name="checkmark-circle" size={24} color={theme.colors.primary} />
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
{index < ACTIVITY_LEVEL_OPTIONS.length - 1 && <View style={styles.divider} />}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Health Information */}
|
||||
<View style={styles.section}>
|
||||
<Text style={styles.sectionTitle}>Health Information (Optional)</Text>
|
||||
<View style={styles.card}>
|
||||
<View style={styles.inputGroup}>
|
||||
<Text style={styles.label}>Medical Conditions</Text>
|
||||
<TextInput
|
||||
style={[styles.textArea]}
|
||||
value={profileData.medicalConditions || ''}
|
||||
onChangeText={(text) => updateField('medicalConditions', text)}
|
||||
placeholder="e.g., Asthma, diabetes..."
|
||||
placeholderTextColor={theme.colors.gray400}
|
||||
multiline
|
||||
numberOfLines={3}
|
||||
textAlignVertical="top"
|
||||
/>
|
||||
</View>
|
||||
<View style={styles.inputGroup}>
|
||||
<Text style={styles.label}>Allergies</Text>
|
||||
<TextInput
|
||||
style={[styles.textArea]}
|
||||
value={profileData.allergies || ''}
|
||||
onChangeText={(text) => updateField('allergies', text)}
|
||||
placeholder="e.g., Peanuts, latex..."
|
||||
placeholderTextColor={theme.colors.gray400}
|
||||
multiline
|
||||
numberOfLines={3}
|
||||
textAlignVertical="top"
|
||||
/>
|
||||
</View>
|
||||
<View style={styles.inputGroup}>
|
||||
<Text style={styles.label}>Injuries</Text>
|
||||
<TextInput
|
||||
style={[styles.textArea]}
|
||||
value={profileData.injuries || ''}
|
||||
onChangeText={(text) => updateField('injuries', text)}
|
||||
placeholder="e.g., Previous knee injury..."
|
||||
placeholderTextColor={theme.colors.gray400}
|
||||
multiline
|
||||
numberOfLines={3}
|
||||
textAlignVertical="top"
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
</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}>
|
||||
{loading ? (
|
||||
<ActivityIndicator color="#fff" />
|
||||
) : (
|
||||
<>
|
||||
<Ionicons name="checkmark-circle" size={20} color="#fff" />
|
||||
<Text style={styles.saveButtonText}>Save Profile</Text>
|
||||
</>
|
||||
)}
|
||||
</LinearGradient>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Reference in new issue
Block a user