@gorhom/bottom-sheet not closing on index change-CodePudding

I have the bottom sheet set up with a login form in it:

import { useContext, useMemo, useRef } from "react";
import { GeneralContext } from "@/providers";
import BottomSheet from "@gorhom/bottom-sheet";
import LoginForm from "./LoginForm";

const AuthSheet = () => {
  const { showAuthModal } = useContext(GeneralContext);

  const bottomSheetRef = useRef(null);
  // variables
  const snapPoints = useMemo(() => ["30%"], []);

  const index = useMemo(() => {
    if (showAuthModal) {
      return 0;
    }
    return -1;
  }, [showAuthModal]);

  return (
    <BottomSheet
      ref={bottomSheetRef}
      index={index}
      enablePanDownToClose={true}
      snapPoints={snapPoints}
    >
      <LoginForm />
    </BottomSheet>
  );
};

export default AuthSheet;

Whenever the user logs in, the showAuthModal is set to false and the index will be set to -1 again. The Sheet however does not close at all. The other way around does work, if I use some button somewhere in my app to set the showAuthModal to true, the sheet will open. Could this be because I am calling the context from a child component that it doesn't work?

CodePudding user response：

It looks like the index prop is only used to determine the initial position of the sheet, so its possible that BottomSheet only uses index for the initial render and ignores it entirely after that. Try using the bottomSheetRef for closing on auth changes:

const AuthSheet = () => {
  const { showAuthModal } = useContext(GeneralContext);

  const bottomSheetRef = useRef(null);
  // variables
  const snapPoints = useMemo(() => ["30%"], []);

  useEffect(() => {
    if (!showAuthModal) {
     bottomSheetRef.current?.close?.()
    }
  }, [showAuthModal]);

  return (
    <BottomSheet
      ref={bottomSheetRef}
      index={showAuthModal ? 0 : -1}
      enablePanDownToClose={true}
      snapPoints={snapPoints}
    >
      <LoginForm />
    </BottomSheet>
  );
};