Placing FloatButton in MapFeed

src/app/components/FloatButton.js

@@ -1,22 +1,26 @@
 import React, { useRef, useState } from "react";
-import { StyleSheet, Text, TouchableOpacity, View, Animated, TouchableWithoutFeedback } from "react-native";
+import {
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+  Animated,
+  TouchableWithoutFeedback,
+} from "react-native";
 
 import colors from "../config/colors";
-import ActionButton from 'react-native-action-button';
+import ActionButton from "react-native-action-button";
 import { AntDesign, Entypo } from "@expo/vector-icons";
 import { Colors } from "react-native/Libraries/NewAppScreen";
 import { FlatList } from "react-native-gesture-handler";
-import { Fontisto } from '@expo/vector-icons';
+import { Fontisto } from "@expo/vector-icons";
 import DataMenu from "./DataMenu";
-import { MaterialCommunityIcons } from '@expo/vector-icons';
+import { MaterialCommunityIcons } from "@expo/vector-icons";
 
 import { Dimensions } from "react-native";
 
-
 const screenWidth = Dimensions.get("window").width;
-const screenHeight = Dimensions.get('window').height;
-
-
+const screenHeight = Dimensions.get("window").height;
 
 function FloatButton(props) {
   const animation = useRef(new Animated.Value(0)).current;
@@ -28,7 +32,7 @@ function FloatButton(props) {
     Animated.spring(animation, {
       toValue: value,
       friction: 6,
-            useNativeDriver: true
+      useNativeDriver: true,
     }).start();
 
     setOpen(!open);
@@ -39,10 +43,9 @@ function FloatButton(props) {
         rotate: animation.interpolate({
           inputRange: [0, 1],
           outputRange: ["0deg", "0deg"],
-
-                })
-            }
-        ]
+        }),
+      },
+    ],
   };
 
   const cameraStyle = {
@@ -51,11 +54,11 @@ function FloatButton(props) {
       {
         translateX: animation.interpolate({
           inputRange: [0, 1],
-                    outputRange: [0, 20]
-                })
-            }
-        ]
-    }
+          outputRange: [0, 20],
+        }),
+      },
+    ],
+  };
   return (
     <View style={[styles.container]}>
       <TouchableWithoutFeedback>
@@ -66,7 +69,11 @@ function FloatButton(props) {
       <View style={{ margin: 35, alignSelf: "flex-end" }}>
         <TouchableWithoutFeedback onPress={toggleMenu}>
           <Animated.View style={[styles.button, styles.menu, rotation]}>
-                        <MaterialCommunityIcons name="layers-plus" size={36} color={colors.white} />
+            <MaterialCommunityIcons
+              name="layers-plus"
+              size={36}
+              color={colors.white}
+            />
           </Animated.View>
         </TouchableWithoutFeedback>
       </View>
@@ -78,10 +85,11 @@ const styles = StyleSheet.create({
   container: {
     alignItems: "center",
     position: "absolute",
+    bottom: 0,
+    left: 0,
     flex: 1,
   },
   button: {
-        // position: "absolute",
     width: 50,
     height: 50,
     borderRadius: 6,
@@ -97,13 +105,10 @@ const styles = StyleSheet.create({
     backgroundColor: colors.primary,
   },
   submenu: {
-        // position:"relative",
     width: screenWidth,
     height: screenHeight * 0.9,
     flex: 1,
-
-    }
-
+  },
 });
 
 export default FloatButton;

src/app/screens/MapFeedScreen.js

@@ -7,6 +7,7 @@ import { screen_width, screen_height } from "../config/dimensions";
 import attachFocusToQuery from "../hooks/useFocus";
 import { CurrentLocationContext } from "../context/CurrentLocationContext";
 import { MapMarkerList } from "../components/MapMarkerList";
+import FloatButton from "../components/FloatButton";
 
 function MapFeedScreen(props) {
   const context = useContext(CurrentLocationContext);
@@ -40,6 +41,7 @@ function MapFeedScreen(props) {
       >
         <MapMarkerList reload={focusChanged} />
       </MapView>
+      <FloatButton />
     </View>
   );
 }