#gorhom/bottom-sheet not closing on index change - react-native

Question

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?

Answer 1

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>
);
};