cally/components/pages/grocery/GroceryList.tsx

import { FlatList } from "react-native";
import React, { useState } from "react";
import { View, Text, ListItem, Button } from "react-native-ui-lib";
import MaterialCommunityIcons from "@expo/vector-icons/MaterialCommunityIcons";
import { useAuthContext } from "@/contexts/AuthContext";
import AntDesign from "@expo/vector-icons/AntDesign";
import AddGroceryItem from "./AddGroceryItem";
import GroceryItem from "./GroceryItem";
import { useGroceryContext } from "@/contexts/GroceryContext";

const GroceryList = () => {
  const { groceries, updateGroceryItem } = useGroceryContext();
  return (
    <View>
      <FlatList
        ItemSeparatorComponent={() => (
          <View
            style={{
              height: 1.5,
              backgroundColor: "#e0e0e0",
              marginHorizontal: 15,
            }}
          />
        )}
        data={groceries}
        renderItem={({ item }) => (
          <GroceryItem item={item} handleItemApproved={updateGroceryItem} />
        )}
        keyExtractor={(item) => item.id.toString()}
      />
    </View>
  );
};

export default GroceryList;