cally/components/pages/grocery/GroceryWrapper.tsx

import { Text, 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={"100%"}>
      <View height={"100%"}>
        <ScrollView
          ref={scrollViewRef} // Assign the ref to the ScrollView
          automaticallyAdjustKeyboardInsets={true}
        >
          <View marginB-70>
            <GroceryList />
          </View>
        </ScrollView>
      </View>
      {!isAddingGrocery && <AddGroceryItem />}
    </View>
  );
};

export default GroceryWrapper;