using safe area view seems safer on ios

App.js

 import { StatusBar } from 'expo-status-bar';
 import React, { useEffect } from 'react';
 import { StyleSheet, Text, View, TextInput } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import AddDepense from './components/add_depense';
 import DepensesList from './components/depenses_list';
 import TitleBar from './components/title_bar';
   });
 
   return (
-    <View style={styles.home}>
+    <SafeAreaView style={styles.home}>
       <View style={styles.container, {
         flexDirection: "column"
       }}>
       </View>
         {/* Overlay for expenses */}
       <AddDepense fetchDepenses={() => onFetchDepenses(true)}/>
-    </View>
+    </SafeAreaView>
   );
 }
 

components/add_depense.js

 import React from 'react';
 import { StyleSheet, Text, View, TextInput, Button, Pressable } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import DepenseForm from './depense_edit/depense_form';
 
 
 export default function AddDepense(props){
     const [addingDepense, onAddDepense] = React.useState(false);
 
-    return (<View style={ add_depenses_styles.overlay }>
+    return (<SafeAreaView style={ add_depenses_styles.overlay }>
     <View >
         {addingDepense ? 
             <DepenseForm fetchDepenses={props.fetchDepenses} onAddDepense={onAddDepense}/>
         
         </Pressable>
     </View>
-    </View>
+    </SafeAreaView>
     );
 }