cally/components/pages/grocery/GroceryWrapper.tsx

import { Dimensions, ScrollView } from "react-native";
import { View } from "react-native-ui-lib";
import React, { useEffect, useRef } from "react";
import AddGroceryItem from "./AddGroceryItem";
import GroceryList from "./GroceryList";
import { useGroceryContext } from "@/contexts/GroceryContext";

const GroceryWrapper = () => {
  const { isAddingGrocery } = useGroceryContext();
  const scrollViewRef = useRef<ScrollView>(null); // Reference to the ScrollView

  useEffect(() => {
    if (isAddingGrocery && scrollViewRef.current) {
      scrollViewRef.current.scrollTo({
        y: 400, // Adjust this value to scroll a bit down (100 is an example)
        animated: true,
      });
    }
  }, [isAddingGrocery]);

  return (
    <View height={Dimensions.get("window").height}>
      <View>
        <ScrollView
          ref={scrollViewRef}
          automaticallyAdjustKeyboardInsets={true}
          showsHorizontalScrollIndicator={false}
          showsVerticalScrollIndicator={false}
        >
          <View height={"100%"}>
            <View marginB-115>
              <GroceryList />
            </View>
          </View>
        </ScrollView>
      </View>
      {!isAddingGrocery && <AddGroceryItem />}
    </View>
  );
};

export default GroceryWrapper;