AppNavigator.tsx

export default function AppNavigator(): JSX.Element {
  const userState = useAuthStore((state) => state.userState);
  //  Zustand Toast Store   
  const [toastDetails, setShowToast] = useToastStore((state) => [state, state.setShowToast]);
  //  hooks for the bottom sheet  
  const bottomSheetRef = React.useRef<BottomSheet>(null);
  const handleComponent: React.FC = () => <View />;
  //  variables for the bottom sheet  
  const snapPoints = React.useMemo(() => [0, '12%'], []);
  React.useEffect(() => {
    let timeout: NodeJS.Timeout;
    if (toastDetails.showToast) {
      bottomSheetRef.current?.snapTo(1);
      timeout = setTimeout(() => {
        bottomSheetRef.current?.snapTo(0);
      }, 2000);
    }
    return () => clearTimeout(timeout);
  }, [setShowToast, toastDetails.showToast]);
  const bottomSheetOnChange = (value: number) => {
    if (value === 0) {
      setShowToast(defaultToastValues);
    }
  };
  return (
    <NavigationContainer>
      {userState === 'AUTHENTICATED' ? <TabStack /> : <AuthStack />}
      <BottomSheet
        onChange={bottomSheetOnChange}
        handleComponent={handleComponent}
        initialSnapIndex={-1}
        snapPoints={snapPoints}
        ref={bottomSheetRef}
      >
        <View style={[tailwind('flex-1 flex-row items-center bg-white px-4 pb-2'), styles.toastShadow]}>
          {toastDetails.toastIcon}
          <RNText textStyle={[bodyTextStyle.FS14_MEDIUM, tailwind('pl-2')]}>{toastDetails.toastMessage}</RNText>
        </View>
      </BottomSheet>
    </NavigationContainer>
  );
}