safe area view

squarenotsquare/src/screens/Home.js

@@ -1,5 +1,5 @@
 import React, { useEffect } from "react";
-import { BackHandler, Text, TouchableOpacity, View } from "react-native";
+import { BackHandler, SafeAreaView, Text, TouchableOpacity, View } from "react-native";
 import { styles } from './styles/AppStyles';
 import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons';
 import Icons from '../themes/Icons';
@@ -21,13 +21,12 @@ function Home(){
   }
 
   return (
-    <View style={[styles.flex]}>
-      <TouchableOpacity style={[styles.absolute]}>
+    <SafeAreaView style={[styles.flex]}>
+      <TouchableOpacity style={[styles.endAlign]}>
         <MaterialIcon
           name={Icons.squareIcons.settings}
           color={Colors.material.green400}
           size={Metrics.icons.buttonIcon}
-          style={styles.absolute}
         />
       </TouchableOpacity>
       <View style={[styles.flexHalf, styles.spaceAround]}>
@@ -65,7 +64,7 @@ function Home(){
           0.0.1a    Atonal Software    August 2, 2022
         </Text>
       </View>
-    </View>
+    </SafeAreaView>
   )
 }