Merge pull request #102 from lbare/update-map-button

Create map button and upload menu photo screen

app.json

@@ -12,9 +12,7 @@
       "resizeMode": "contain",
       "backgroundColor": "#eeeeee"
     },
-    "assetBundlePatterns": [
-      "**/*"
-    ],
+    "assetBundlePatterns": ["**/*"],
     "ios": {
       "supportsTablet": true,
       "bundleIdentifier": "app.uhub.seng480A.uvic",
@@ -32,7 +30,7 @@
       "config": {
         "googleMaps": {
           "apiKey": "AIzaSyBJWMWCK9PvYKUaIdIHJ7ybsXFpQlxl8Nc"
-        }  
+        }
       },
       "package": "app.uhub.seng480A.uvic"
     },
@@ -54,6 +52,14 @@
             "useFrameworks": "static"
           }
         }
+      ],
+      [
+        "expo-camera",
+        {
+          "cameraPermission": "Allow $(PRODUCT_NAME) to access your camera",
+          "microphonePermission": "Allow $(PRODUCT_NAME) to access your microphone",
+          "recordAudioAndroid": true
+        }
       ]
     ]
   }

components/CustomMarker.tsx

@@ -1,6 +1,5 @@
 import { View, Image, Text, ImageSourcePropType } from "react-native";
 import Coordinates from "../models/Coordinates";
-import { FoodVendor } from "../models/FoodVendor";
 import { Callout, Marker } from "react-native-maps";
 import React from "react";
 interface CustomMarkerProps {
@@ -26,11 +25,12 @@ const CustomMarker: React.FC<CustomMarkerProps> = ({
   <Marker
     title={name}
     coordinate={coordinate}
-    onPress={() => onPressCustom()}
     flat={false}
     stopPropagation={true}
     key={keyp}
-    zIndex={isSelected ? 1 : 0}
+    onPress={() => onPressCustom()}
+    zIndex={isSelected ? 200 : 100}
+    tappable={true}
   >
     <View className="flex justify-start items-center w-full h-full">
       <Image

components/FloatingButton.tsx

@@ -0,0 +1,153 @@
+import React, { useRef } from "react";
+import { View, TouchableOpacity, Animated, Image, Easing } from "react-native";
+
+interface ActionItem {
+  icon: React.ReactElement;
+  action: () => void;
+}
+
+interface FloatingButtonProps {
+  icon: any;
+  actions: ActionItem[];
+  showActions: boolean;
+  toggleActions: () => void;
+}
+
+const FloatingButton: React.FC<FloatingButtonProps> = ({
+  icon,
+  actions,
+  showActions,
+  toggleActions,
+}) => {
+  const scaleValue = useRef(new Animated.Value(1)).current;
+  const actionAnimations = actions.map(
+    () => useRef(new Animated.Value(0)).current
+  );
+
+  const toggleActionAnimations = () => {
+    const baseDelay = 40;
+    const duration = 150;
+
+    actionAnimations.forEach((anim, index) => {
+      const delay = showActions
+        ? (actions.length - 1 - index) * baseDelay
+        : index * baseDelay;
+
+      Animated.timing(anim, {
+        toValue: showActions ? 0 : 1,
+        duration: duration,
+        easing: showActions
+          ? Easing.bezier(0.64, 0.06, 0.38, 0.95)
+          : Easing.bezier(0.09, 0.79, 0.24, 0.88),
+        delay: delay,
+        useNativeDriver: true,
+      }).start();
+    });
+  };
+
+  const toggleMainAnimation = () => {
+    Animated.sequence([
+      Animated.timing(scaleValue, {
+        toValue: 1.1,
+        easing: Easing.bezier(0.64, 0.06, 0.38, 0.95),
+        duration: 75,
+        useNativeDriver: true,
+      }),
+      Animated.timing(scaleValue, {
+        toValue: 1,
+        duration: 75,
+        useNativeDriver: true,
+      }),
+    ]).start();
+  };
+
+  const toggleAnimation = () => {
+    toggleMainAnimation();
+    toggleActions();
+    toggleActionAnimations();
+  };
+
+  const actionButtons = actions.map((actionItem, index) => {
+    const angles = [270, 225, 180];
+    const angle = angles[index];
+    const radian = (angle * Math.PI) / 180;
+    const radius = 110;
+
+    const x = Math.cos(radian) * radius;
+    const y = Math.sin(radian) * radius;
+
+    const animatedStyle = {
+      transform: [
+        {
+          translateX: actionAnimations[index].interpolate({
+            inputRange: [0, 1],
+            outputRange: [0, x],
+          }),
+        },
+        {
+          translateY: actionAnimations[index].interpolate({
+            inputRange: [0, 1],
+            outputRange: [0, y],
+          }),
+        },
+        // {
+        //   scale: actionAnimations[index].interpolate({
+        //     inputRange: [0, 1],
+        //     outputRange: [0, 1],
+        //   }),
+        // },
+      ],
+      opacity: actionAnimations[index].interpolate({
+        inputRange: [0, 0.7, 1],
+        outputRange: [0, 0.2, 1],
+      }),
+    };
+
+    return (
+      <Animated.View
+        key={index}
+        style={[
+          {
+            position: "absolute",
+            right: 10,
+            bottom: 10,
+          },
+          animatedStyle,
+        ]}
+      >
+        <TouchableOpacity
+          onPress={actionItem.action}
+          className="bg-white w-14 h-14 rounded-full shadow-md justify-center items-center"
+        >
+          {actionItem.icon}
+        </TouchableOpacity>
+      </Animated.View>
+    );
+  });
+
+  return (
+    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
+      <TouchableOpacity
+        activeOpacity={0.6}
+        onPress={toggleAnimation}
+        style={{ zIndex: 15 }}
+      >
+        <Animated.View
+          className="bg-white rounded-full p-4 shadow-md"
+          style={{
+            transform: [
+              {
+                scale: scaleValue,
+              },
+            ],
+          }}
+        >
+          <Image source={icon} style={{ width: 55, height: 55 }} />
+        </Animated.View>
+      </TouchableOpacity>
+      {actionButtons}
+    </View>
+  );
+};
+
+export default FloatingButton;

components/Modal.tsx

@@ -19,6 +19,8 @@ import {
   CaretRight,
   MagnifyingGlass,
   Heart,
+  Camera,
+  X,
 } from "phosphor-react-native";
 import { Building } from "../models/Building";
 import {
@@ -564,12 +566,19 @@ const CustomModal: React.FC<CustomModalProps> = ({
                   hideModal(true);
                 }}
               >
-                <Feather
-                  name="x"
-                  size={20}
-                  color="#154058"
-                  className="opacity-100"
-                />
+                <X size={22} color="#171717" weight="bold" />
+              </TouchableOpacity>
+            </View>
+            <View className="absolute top-36 right-4">
+              <TouchableOpacity
+                className="flex opacity-100 rounded-full h-8 w-8 justify-center items-center"
+                style={{ backgroundColor: "#ededed" }}
+                onPress={() => {
+                  setModalVisible(false);
+                  navigation.navigate("Upload", { vendor: vendor.name });
+                }}
+              >
+                <Camera size={22} color="#171717" weight="fill" />
               </TouchableOpacity>
             </View>
 

hooks/loadAssets.tsx

@@ -8,6 +8,7 @@ const loadAssets = async () => {
       require("../assets/logo.png"),
       require("../assets/full-logo.png"),
       require("../assets/splash-login.png"),
+      require("../assets/bg.png"),
     ]),
   ]);
 };

navigation/HomeNavigation.tsx

@@ -2,10 +2,14 @@ import React, { useState } from "react";
 import { createStackNavigator } from "@react-navigation/stack";
 import HomeMap from "../screens/HomeMap";
 import Login from "../screens/Login";
+import Upload from "../screens/Upload";
 
 export type StackParamList = {
   HomeMap: undefined;
   Login: undefined;
+  Upload: {
+    vendor: string;
+  };
 };
 
 const Stack = createStackNavigator<StackParamList>();
@@ -21,7 +25,7 @@ const HomeNavigation: React.FC = () => {
   return (
     <Stack.Navigator
       screenOptions={{
-        animationEnabled: true, 
+        animationEnabled: true,
         animationTypeForReplace: "push",
       }}
     >
@@ -35,6 +39,11 @@ const HomeNavigation: React.FC = () => {
         component={LoginScreenWrapper}
         options={{ headerShown: false }}
       />
+      <Stack.Screen
+        name="Upload"
+        component={Upload}
+        options={{ headerShown: false }}
+      />
     </Stack.Navigator>
   );
 };

package.json

@@ -35,6 +35,7 @@
     "expo": "~50.0.14",
     "expo-asset": "^9.0.2",
     "expo-build-properties": "^0.11.1",
+    "expo-camera": "^14.1.1",
     "expo-status-bar": "~1.11.1",
     "firebase": "^10.8.0",
     "fuse.js": "^7.0.0",
@@ -45,6 +46,7 @@
     "react": "18.2.0",
     "react-dom": "^18.2.0",
     "react-native": "0.73.6",
+    "react-native-dropdown-picker": "^5.4.6",
     "react-native-gesture-handler": "~2.14.0",
     "react-native-maps": "1.10.0",
     "react-native-safe-area-context": "4.8.2",