Placing FloatButton in MapFeed

src/app/components/FloatButton.js

@@ -1,109 +1,114 @@
 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;
-    const [open, setOpen] = useState(false);
-
-    const toggleMenu = () => {
-        const value = open ? 0 : 1;
-
-        Animated.spring(animation, {
-            toValue: value,
-            friction: 6,
-            useNativeDriver: true
-        }).start();
-
-        setOpen(!open);
-    };
-    const rotation = {
-        transform: [
-            {
-                rotate: animation.interpolate({
-                    inputRange: [0, 1],
-                    outputRange: ["0deg", "0deg"],
-
-                })
-            }
-        ]
-    };
-
-    const cameraStyle = {
-        transform: [
-            { scale: animation },
-            {
-                translateX: animation.interpolate({
-                    inputRange: [0, 1],
-                    outputRange: [0, 20]
-                })
-            }
-        ]
-    }
-    return (
-        <View style={[styles.container]}>
-            <TouchableWithoutFeedback>
-                <Animated.View style={[styles.submenu, cameraStyle]}>
-                    <DataMenu />
-                </Animated.View>
-            </TouchableWithoutFeedback>
-            <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} />
-                    </Animated.View>
-                </TouchableWithoutFeedback>
-            </View>
-        </View>
-    );
+  const animation = useRef(new Animated.Value(0)).current;
+  const [open, setOpen] = useState(false);
+
+  const toggleMenu = () => {
+    const value = open ? 0 : 1;
+
+    Animated.spring(animation, {
+      toValue: value,
+      friction: 6,
+      useNativeDriver: true,
+    }).start();
+
+    setOpen(!open);
+  };
+  const rotation = {
+    transform: [
+      {
+        rotate: animation.interpolate({
+          inputRange: [0, 1],
+          outputRange: ["0deg", "0deg"],
+        }),
+      },
+    ],
+  };
+
+  const cameraStyle = {
+    transform: [
+      { scale: animation },
+      {
+        translateX: animation.interpolate({
+          inputRange: [0, 1],
+          outputRange: [0, 20],
+        }),
+      },
+    ],
+  };
+  return (
+    <View style={[styles.container]}>
+      <TouchableWithoutFeedback>
+        <Animated.View style={[styles.submenu, cameraStyle]}>
+          <DataMenu />
+        </Animated.View>
+      </TouchableWithoutFeedback>
+      <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}
+            />
+          </Animated.View>
+        </TouchableWithoutFeedback>
+      </View>
+    </View>
+  );
 }
 
 const styles = StyleSheet.create({
-    container: {
-        alignItems: "center",
-        position: "absolute",
-        flex: 1,
-    },
-    button: {
-        // position: "absolute",
-        width: 50,
-        height: 50,
-        borderRadius: 6,
-        alignItems: "center",
-        shadowColor: colors.primary,
-        shadowOpacity: 0.3,
-        shadowOffset: {
-            height: 10,
-        },
-        padding: 3,
+  container: {
+    alignItems: "center",
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    flex: 1,
+  },
+  button: {
+    width: 50,
+    height: 50,
+    borderRadius: 6,
+    alignItems: "center",
+    shadowColor: colors.primary,
+    shadowOpacity: 0.3,
+    shadowOffset: {
+      height: 10,
     },
-    menu: {
-        backgroundColor: colors.primary,
-    },
-    submenu: {
-        // position:"relative",
-        width: screenWidth,
-        height: screenHeight * 0.9,
-        flex: 1,
-
-    }
-
+    padding: 3,
+  },
+  menu: {
+    backgroundColor: colors.primary,
+  },
+  submenu: {
+    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>
   );
 }