complated

app/profile/categories.tsx

@@ -18,7 +18,6 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
 
 export default function PersonalInfoScreen() {
   const router = useRouter();
@@ -71,6 +70,8 @@ export default function PersonalInfoScreen() {
       phone: string;
       person_type: 'employee' | 'legal_entity' | 'ytt' | 'band';
       activate_types: number[];
+      age: number | null;
+      gender: 'male' | 'female' | null;
     }) => user_api.updateMe(body),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['get_me'] });
@@ -106,7 +107,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={() => router.push('/profile/personal-info')}>
             <ArrowLeft color={theme.text} />
@@ -117,12 +118,12 @@ export default function PersonalInfoScreen() {
           </Pressable>
         </View>
         <ActivityIndicator size={'large'} />
-      </SafeAreaView>
+      </View>
     );
   }
 
   return (
-    <SafeAreaView style={[styles.container, { backgroundColor: theme.background }]}>
+    <View style={[styles.container, { backgroundColor: theme.background }]}>
       <View style={styles.topHeader}>
         <Pressable onPress={() => router.push('/profile/personal-info')}>
           <ArrowLeft color={theme.text} />
@@ -138,6 +139,8 @@ export default function PersonalInfoScreen() {
                 phone: me.data.data.phone,
                 industries: selectedCategories,
                 activate_types,
+                age: me.data.data.age,
+                gender: me.data.data.gender,
               });
             }
           }}
@@ -173,20 +176,21 @@ export default function PersonalInfoScreen() {
           setSelectedCategories={setSelectedCategories}
         />
       </ScrollView>
-    </SafeAreaView>
+    </View>
   );
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
+    paddingBottom: 30,
   },
   tabsList: {
     maxHeight: 56,
   },
   tabsContainer: {
     alignItems: 'center',
-    marginBottom: 20,
+    marginBottom: 10,
   },
   tabWrapper: {
     flexDirection: 'row',