cally/app/(auth)/grocery/index.tsx

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";

export default function Screen() {
  return (
    <ScrollView>
      <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>
            <Text text70BL color="black">
              X approved items
            </Text>
            <Text text70BL color="black">
              Y pending items
            </Text>
          </View>
          <Button
          backgroundColor="#e1e1e1"
          right
            children={<Octicons name="share" size={24} color="black" />}
          />
        </View>
      </View>
      <View>
        <GroceryList />
      </View>
    </ScrollView>
  );
}