Absolute position settings button

squarenotsquare/src/screens/Home.js

@@ -1,8 +1,7 @@
 import React, { useEffect } from "react";
-import { BackHandler, Text, View } from "react-native";
+import { BackHandler, Text, TouchableOpacity, View } from "react-native";
 import { useState } from "react";
 import { styles } from './styles/AppStyles';
-import { TouchableOpacity } from "react-native-gesture-handler";
 import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons';
 import Icons from '../themes/Icons';
 import Colors from "../themes/Colors";
@@ -16,12 +15,14 @@ function Home(props){
 
   return (
     <View style={[styles.flex]}>
-      <MaterialIcon
-        name={Icons.squareIcons.settings}
-        color={Colors.material.green400}
-        size={Metrics.icons.buttonIcon}
-        style={styles.endAlign}
-      />
+      <TouchableOpacity style={[styles.absolute]}>
+        <MaterialIcon
+          name={Icons.squareIcons.settings}
+          color={Colors.material.green400}
+          size={Metrics.icons.buttonIcon}
+          style={styles.absolute}
+        />
+      </TouchableOpacity>
       <View style={[styles.flexHalf, styles.spaceAround]}>
         <Text style={[styles.boldText, styles.headerTitleFont, styles.centeredText, styles.darkText]}>
           Square

squarenotsquare/src/screens/styles/AppStyles.js

@@ -28,10 +28,8 @@ export const styles = StyleSheet.create({
   stretch: {alignSelf: 'stretch'},
   absolute: {
     position: 'absolute',
-    top: Metrics.screenSections.headerHeight,
-    bottom: 0,
-    left: 0,
-    right: 0,
+    top: 0,
+    right: 0
   },
 
   dropShadow: {
@@ -93,5 +91,11 @@ export const styles = StyleSheet.create({
     borderRadius: Metrics.buttons.borderRadius,
     width: Metrics.buttons.menuButton.width,
     height: Metrics.buttons.menuButton.height
+  },
+
+  settingsContainer: {
+    zIndex: 1000,
+    width: Metrics.icons.buttonIcon,
+    height: Metrics.icons.buttonIcon
   }
 })