addGrocery dialog

app/(auth)/grocery/index.tsx

@@ -2,15 +2,18 @@ import { ScrollView } from "react-native";
 import { Button, Text, View } from "react-native-ui-lib";
 import Octicons from "@expo/vector-icons/Octicons";
 import GroceryList from "@/components/pages/grocery/GroceryList";
+import AddGroceryItem from "@/components/pages/grocery/AddGroceryItem";
+import { useAuthContext } from "@/contexts/AuthContext";
 
 export default function Screen() {
   return (
-    <ScrollView>
+    <View>
+      <AddGroceryItem />
       <View backgroundColor="#e1e1e1" paddingL-20 paddingT-20 paddingB-10>
         <Text text50BL marginB-10 color="black">
           Welcome to your grocery list!
         </Text>
-        <View row bottom style={{justifyContent: 'space-between'}}>
+        <View row bottom style={{ justifyContent: "space-between" }}>
           <View>
             <Text text70BL color="black">
               X approved items
@@ -20,8 +23,8 @@ export default function Screen() {
             </Text>
           </View>
           <Button
-          backgroundColor="#e1e1e1"
+            backgroundColor="#e1e1e1"
-          right
+            right
             children={<Octicons name="share" size={24} color="black" />}
           />
         </View>
@@ -29,6 +32,6 @@ export default function Screen() {
       <View>
         <GroceryList />
       </View>
-    </ScrollView>
+    </View>
   );
 }

components/pages/grocery/AddGroceryItem.tsx

@@ -0,0 +1,90 @@
+import { StyleSheet } from "react-native";
+import React, { useState } from "react";
+import {
+  Button,
+  Colors,
+  Dialog,
+  Drawer,
+  Text,
+  View,
+  PanningProvider,
+} from "react-native-ui-lib";
+interface AddGroceryItemProps {
+  visible: boolean;
+  onClose: () => void;
+}
+const AddGroceryItem = () => {
+  const [visible, setVisible] = useState<boolean>(false);
+
+  const handleShowDialog = () => {
+    setVisible(true);
+  };
+  const handleHideDialog = () => {
+    setVisible(false);
+  };
+  const addGroceryDialog = (
+    <Dialog
+      visible={visible}
+      onDismiss={handleHideDialog}
+      panDirection={PanningProvider.Directions.DOWN}
+      containerStyle={{ borderRadius: 12, backgroundColor: "white" }}
+    >
+      <View style={styles.container}>
+        <Text style={styles.title}>New Grocery</Text>
+        <View style={styles.divider} />
+        <View style={styles.inner}>
+          <Text>Category</Text>
+        </View>
+      </View>
+    </Dialog>
+  );
+
+  return (
+    <View>
+      <Button
+        style={{
+          position: "absolute",
+          bottom: -680,
+          right: 20,
+          height: 60,
+          borderRadius: 30,
+          backgroundColor: "#19ad61",
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+        color="white"
+        label="Create new"
+        enableShadow
+        onPress={() => setVisible(true)}
+      />
+      {addGroceryDialog}
+    </View>
+  );
+};
+
+export default AddGroceryItem;
+
+const styles = StyleSheet.create({
+  container: {
+    paddingVertical: 10,
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "space-between",
+  },
+  inner: {
+    paddingHorizontal: 20,
+    display: "flex",
+    flexDirection: "column",
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: "400",
+    textAlign: "center",
+  },
+  divider: {
+    width: "100%",
+    height: 1,
+    backgroundColor: "#E0E0E0",
+    marginVertical: 10,
+  },
+});

components/pages/grocery/GroceryList.tsx

@@ -4,6 +4,7 @@ import { View, Text, ListItem, Button } from "react-native-ui-lib";
 import MaterialCommunityIcons from "@expo/vector-icons/MaterialCommunityIcons";
 import { ProfileType, useAuthContext } from "@/contexts/AuthContext";
 import AntDesign from "@expo/vector-icons/AntDesign";
+import AddGroceryItem from "./AddGroceryItem";
 
 export interface IGrocery {
   title: String;
@@ -27,7 +28,7 @@ export enum GroceryCategory {
 }
 
 type MaterialIconNames = keyof typeof MaterialCommunityIcons.glyphMap;  
-const iconMapping: { [key in GroceryCategory]: MaterialIconNames } = {
+const iconMapping: { [key in GroceryCategory]: MaterialIconNames } = { //за сад се иконице за категорију бирају одавде
   [GroceryCategory.Fruit]: "food-apple",
   [GroceryCategory.Dairy]: "cheese",
   [GroceryCategory.Vegetables]: "carrot",
@@ -68,7 +69,7 @@ const GroceryList = () => {
       bought: false,
     },
   ]);
-  const { user, profileType } = useAuthContext();
+  const { profileType } = useAuthContext();
   const renderItem = ({ item }: { item: IGrocery }) => (
     <ListItem backgroundColor="white">
       <ListItem.Part left containerStyle={{ flex: 1, paddingStart: 15 }}>
@@ -136,7 +137,7 @@ const GroceryList = () => {
       <FlatList
         data={groceries}
         renderItem={renderItem}
-        keyExtractor={(item) => item.category.toString()}
+        keyExtractor={(item) => item.title.toString()}
       />
     </View>
   );