Working drawer and menu button

frontend/package.json

@@ -20,6 +20,7 @@
     "react": "18.2.0",
     "react-native": "0.72.5",
     "react-native-gesture-handler": "~2.12.0",
+    "react-native-drawer-layout": "^3.2.2",
     "react-native-maps": "1.7.1",
     "react-native-reanimated": "~3.3.0"
   },

frontend/src/Main.tsx

@@ -1,7 +1,16 @@
+import { MaterialIcons } from "@expo/vector-icons";
 import React from "react";
-import { View, Text, Dimensions, type ViewProps } from "react-native";
+import {
+  View,
+  Text,
+  Dimensions,
+  type ViewProps,
+  StyleSheet,
+} from "react-native";
+import { Drawer } from "react-native-drawer-layout";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 
+import FloatingButton from "./components/FloatingButton";
 import Map from "./components/Map";
 import Sheet from "./components/Sheet";
 import LayoutStyle from "./style/layout";
@@ -19,18 +28,45 @@ const Main: React.FC<ViewProps> = () => {
   // The bottom sheet extends halfway across the screen, with the map
   // being inset accordingly.
   const screenHeight = Dimensions.get("window").height;
+  const [open, setOpen] = React.useState(false);
   const mapInsets = { bottom: screenHeight * SHEET_EXTENT };
 
   return (
-    <GestureHandlerRootView>
-      <Map style={LayoutStyle.fill} insets={mapInsets} />
-      <Sheet collapsedExtent={SHEET_EXTENT}>
-        <View>
-          <Text>Hello World</Text>
+    <Drawer
+      open={open}
+      onOpen={() => {
+        setOpen(true);
+      }}
+      onClose={() => {
+        setOpen(false);
+      }}
+      renderDrawerContent={() => {
+        return <Text>Drawer content</Text>;
+      }}
+    >
+      <GestureHandlerRootView>
+        <Map style={LayoutStyle.fill} insets={mapInsets} />
+        <View style={[LayoutStyle.overlay, styles.drawerButtonContainer]}>
+          <FloatingButton
+            onPress={() => {
+              setOpen((prevOpen: boolean) => !prevOpen);
+            }}
+          >
+            <MaterialIcons name="menu" size={24} color="black" />
+          </FloatingButton>
         </View>
-      </Sheet>
-    </GestureHandlerRootView>
+        <Sheet collapsedExtent={SHEET_EXTENT}>
+          <View>
+            <Text>Hello World</Text>
+          </View>
+        </Sheet>
+      </GestureHandlerRootView>
+    </Drawer>
   );
 };
 
+const styles = StyleSheet.create({
+  drawerButtonContainer: { padding: 16 },
+});
+
 export default Main;

frontend/src/components/FloatingButton.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import {
+  StyleSheet,
+  TouchableHighlight,
+  View,
+  type ViewProps,
+} from "react-native";
+
+/**
+ * The props for the {@function FloatingButton} component.
+ */
+export interface FloatingButtonProps extends ViewProps {
+  /** The child icons of the FloatingButton */
+  children: React.ReactNode;
+  /** Callback for when the button is pressed by the user. */
+  onPress: () => void;
+}
+
+/**
+ * A general floating button component.
+ */
+const FloatingButton: React.FC<FloatingButtonProps> = ({
+  children,
+  onPress,
+}) => {
+  return (
+    <TouchableHighlight
+      style={styles.button}
+      underlayColor="#DDDDDD"
+      onPress={onPress}
+    >
+      <View>{children}</View>
+    </TouchableHighlight>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    backgroundColor: "white",
+    borderRadius: 50,
+    width: 48,
+    height: 48,
+    justifyContent: "center",
+    alignItems: "center",
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 4,
+    },
+    shadowOpacity: 0.3,
+    shadowRadius: 4.65,
+    elevation: 8,
+  },
+});
+
+export default FloatingButton;