Merge branch 'nearby-user-drawer' into backend-rewrite

client/app.json

@@ -12,9 +12,7 @@
       "resizeMode": "contain",
       "backgroundColor": "34D1BF"
     },
-    "assetBundlePatterns": [
-      "**/*"
-    ],
+    "assetBundlePatterns": ["**/*"],
     "ios": {
       "supportsTablet": true
     },
@@ -27,6 +25,7 @@
     "web": {
       "favicon": "./assets/favicon.png"
     },
+    "newArchEnabled": true,
     "plugins": [
       "expo-router",
       [

client/app/components/chat/ChatScreenFooter.tsx

@@ -57,7 +57,7 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     borderRadius: Dimensions.get("window").width * 0.058,
     marginHorizontal: Dimensions.get("window").width * 0.005,
-    marginBottom: Platform.OS === "ios" ? 0 : 5,
+    marginBottom: 3,
     minHeight: Dimensions.get("window").width * 0.113,
     maxHeight: Dimensions.get("window").width * 0.3,
   },

client/app/components/chat/NearbyHeader.tsx

@@ -9,17 +9,24 @@ import {
 } from "react-native";
 import { ChevronLeft } from "react-native-feather";
 
-export const NearbyHeader: React.FC = () => {
+interface NearbyHeaderProps {
+  onClick: () => void;
+}
+
+export const NearbyHeader: React.FC<NearbyHeaderProps> = ({ onClick }) => {
   return (
     <View style={styles.nearbyContainer}>
       <Text style={styles.nearbyText}>Nearby</Text>
-      <View style={styles.iconContainer}>
-        <Image
-          style={styles.peopleIcon}
-          source={require("../../../assets/icons/misc/nearby_icon.png")}
-        />
-        <Text style={styles.countText}>{5}</Text>
-      </View>
+      <TouchableOpacity onPress={onClick}>
+        <View style={styles.iconContainer}>
+          <Image
+            style={styles.peopleIcon}
+            source={require("../../../assets/icons/misc/nearby_icon.png")}
+          />
+
+          <Text style={styles.countText}>{5}</Text>
+        </View>
+      </TouchableOpacity>
     </View>
   );
 };
@@ -40,6 +47,7 @@ const styles = StyleSheet.create({
     paddingRight: "5%",
     paddingLeft: "10%",
     gap: 10,
+    zIndex: 1,
   },
   nearbyText: {
     fontFamily: "Quicksand",

client/app/components/chat/NearbyUserDrawer.tsx

@@ -0,0 +1,99 @@
+import React, { useState } from "react";
+import { View, Text, StyleSheet, FlatList, Dimensions } from "react-native";
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withTiming,
+  Easing,
+} from "react-native-reanimated";
+import NearbyHeader from "./NearbyHeader";
+import { Pressable } from "react-native";
+
+const SCREEN_WIDTH = Dimensions.get("window").width;
+
+const NearbyUserDrawer = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const translateX = useSharedValue(SCREEN_WIDTH);
+
+  const toggleDrawer = () => {
+    translateX.value = isOpen
+      ? withTiming(SCREEN_WIDTH, {
+          duration: 300, // Duration in milliseconds
+          easing: Easing.out(Easing.ease), // Smooth easing out
+        })
+      : withTiming(0, {
+          duration: 300,
+          easing: Easing.out(Easing.ease), // Smooth easing out
+        });
+    setIsOpen(!isOpen);
+  };
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ translateX: translateX.value }],
+  }));
+
+  const nearbyUsers = ["Alice", "Bob", "Charlie", "Diana", "Eve"]; // Example names
+
+  return (
+    <View style={styles.container}>
+      <NearbyHeader onClick={toggleDrawer} />
+      {/* Overlay and Drawer */}
+      {isOpen && <Pressable style={styles.overlay} onPress={toggleDrawer} />}
+      <Animated.View style={[styles.drawer, animatedStyle]}>
+        <Text style={styles.headerText}>Nearby Users</Text>
+        <FlatList
+          data={nearbyUsers}
+          keyExtractor={(item, index) => index.toString()}
+          renderItem={({ item }) => <Text style={styles.name}>{item}</Text>}
+        />
+      </Animated.View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    display: "flex",
+    height: Dimensions.get("screen").height,
+    flexDirection: "column",
+    alignItems: "center",
+    position: "absolute",
+  },
+  overlay: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    backgroundColor: "rgba(0, 0, 0, 0.15)",
+    zIndex: 1,
+  },
+  drawer: {
+    position: "absolute",
+    right: 0,
+    top: 0,
+    width: SCREEN_WIDTH * 0.6,
+    height: "100%",
+    backgroundColor: "#fff",
+    borderLeftWidth: 1,
+    borderLeftColor: "#ddd",
+    padding: 30,
+    shadowColor: "#000",
+    shadowOffset: { width: -2, height: 0 },
+    shadowOpacity: 0.3,
+    shadowRadius: 4,
+    zIndex: 2,
+    gap: 20,
+  },
+  headerText: {
+    fontFamily: "Quicksand",
+    fontSize: 24,
+    fontWeight: "bold",
+  },
+  name: {
+    fontSize: 18,
+    marginVertical: 10,
+  },
+});
+
+export default NearbyUserDrawer;

client/app/index.js

@@ -16,9 +16,7 @@ const App = () => {
 
   if (!initialized) return <Text>Loading...</Text>;
 
-  return (
-    isLoggedin ? <AppNavigator /> : <AuthNavigator />
-  );
+  return isLoggedin ? <AppNavigator /> : <AuthNavigator />;
 };
 
 export default App;

client/app/screens/chat/ChatScreen.tsx

@@ -19,6 +19,7 @@ import { useState, useEffect } from "react";
 import { useUser } from "@app/contexts/UserContext";
 import NearbyHeader from "@app/components/chat/NearbyHeader";
 import React from "react";
+import NearbyUserDrawer from "@app/components/chat/NearbyUserDrawer";
 
 const ChatScreen = () => {
   const settings = useSettings();
@@ -91,7 +92,7 @@ const ChatScreen = () => {
           Platform.OS === "ios" ? screenHeight * 0.055 : 0
         }>
         <View style={styles.mainContainer}>
-          <NearbyHeader />
+          <NearbyUserDrawer />
           <View style={styles.chatContainer}>
             <MessageChannel messages={messages} />
           </View>
@@ -135,7 +136,6 @@ const styles = StyleSheet.create({
 
   footerContainer: {
     width: "95%",
-
     maxHeight: Dimensions.get("window").height * 0.15,
     display: "flex",
     flexDirection: "row",

client/gesture-handler.js

@@ -0,0 +1,2 @@
+// Don't import react-native-gesture-handler on web
+// React docs say to keep this file to prevent errors in production even for mobile development

client/gesture-handler.native.js

@@ -0,0 +1,2 @@
+// Only import react-native-gesture-handler on native platforms
+import "react-native-gesture-handler";

client/package.json

@@ -37,8 +37,10 @@
     "react": "18.3.1",
     "react-native": "0.76.2",
     "react-native-dotenv": "^3.4.11",
+    "react-native-drawer-layout": "^4.0.1",
     "react-native-feather": "^1.1.2",
     "react-native-gesture-handler": "~2.20.2",
+    "react-native-reanimated": "^3.16.1",
     "react-native-safe-area-context": "4.12.0",
     "react-native-screens": "~4.0.0",
     "react-native-svg": "15.8.0",