complated

app/profile/personal-info.tsx

@@ -20,7 +20,6 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
 
 export default function PersonalInfoScreen() {
   const router = useRouter();
@@ -104,7 +103,7 @@ export default function PersonalInfoScreen() {
 
   if (isLoading) {
     return (
-      <SafeAreaView style={[styles.container, { backgroundColor: theme.background }]}>
+      <View style={[styles.container, { backgroundColor: theme.background }]}>
         <View style={styles.topHeader}>
           <Pressable onPress={() => setIsEditing(false)}>
             <ArrowLeft color={theme.text} />
@@ -115,12 +114,10 @@ export default function PersonalInfoScreen() {
           </Pressable>
         </View>
         <ActivityIndicator size={'large'} />
-      </SafeAreaView>
+      </View>
     );
   }
 
-  /* ===================== EDIT MODE ===================== */
-  const [showGenderOptions, setShowGenderOptions] = useState(false);
   if (isEditing && editData) {
     const genderOptions: { label: string; value: 'male' | 'female' }[] = [
       { label: t('Erkak'), value: 'male' },
@@ -128,7 +125,7 @@ export default function PersonalInfoScreen() {
     ];
 
     return (
-      <SafeAreaView style={[styles.container, { backgroundColor: theme.background }]}>
+      <View style={[styles.container, { backgroundColor: theme.background }]}>
         <View style={styles.topHeader}>
           <Pressable onPress={() => setIsEditing(false)}>
             <ArrowLeft color={theme.text} />
@@ -225,12 +222,12 @@ export default function PersonalInfoScreen() {
             </View>
           </View>
         </ScrollView>
-      </SafeAreaView>
+      </View>
     );
   }
   /* ===================== VIEW MODE ===================== */
   return (
-    <SafeAreaView style={[styles.container, { backgroundColor: theme.background }]}>
+    <View style={[styles.container, { backgroundColor: theme.background }]}>
       <View style={styles.topHeader}>
         <Pressable onPress={() => router.push('/profile')}>
           <ArrowLeft color={theme.text} />
@@ -324,13 +321,14 @@ export default function PersonalInfoScreen() {
           </View>
         </View>
       </ScrollView>
-    </SafeAreaView>
+    </View>
   );
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
+    paddingBottom: 30,
   },
   fieldsContainer: { flexDirection: 'row', flexWrap: 'wrap', gap: 8, marginBottom: 20 },
   fieldChip: {