using safe area view seems safer on ios

App.js

@@ -1,6 +1,7 @@
 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';
@@ -31,7 +32,7 @@ export default function App() {
   });
 
   return (
-    <View style={styles.home}>
+    <SafeAreaView style={styles.home}>
       <View style={styles.container, {
         flexDirection: "column"
       }}>
@@ -49,7 +50,7 @@ export default function App() {
       </View>
         {/* Overlay for expenses */}
       <AddDepense fetchDepenses={() => onFetchDepenses(true)}/>
-    </View>
+    </SafeAreaView>
   );
 }
 

components/add_depense.js

@@ -1,12 +1,13 @@
 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}/>
@@ -21,7 +22,7 @@ export default function AddDepense(props){
         
         </Pressable>
     </View>
-    </View>
+    </SafeAreaView>
     );
 }