Не получается закрыть модальное окно с переходом на главный экран. React nativ

Задача на первый взгляд была проста. Состояла она в следующем, если пользователь не авторизован и при переходе на экран Профиля, должно появится модальное окно для авторизации. Если пользователь нажимает кнопку "назад" или кликает по фону модального окна, то окно должно закрыться и сделать переход на главный экран. Соответственно при повторном переходе в профиль должно опять появится окно авторизации. У меня возникло две разных ситуации:

  1. когда происходит переход на главный экран, но состояние модального окна не меняется(остается открытым), при этом если вернутся на экран профиля, то самого модального окна не будет(хотя состояние не менялось).

  2. модальное окно зацикливается, т.е при клике "назад", модальное окно закрывается и снова открывается.

    function ModalAuth(props) {
    
     const styles = useContext(StyleContext);
     const auth = useContext(AuthContext);
    
     const [view, setView] = useState(auth.isAuth());
    
     useEffect(() => {
         if(!auth.isAuth()){
             setView(true);
         }
     }, [view]);
    
    
     return (
         <Modal
             isVisible={view}
             backdropOpacity={0.5}
             onModalHide={() => {
                 console.log("hide");
    
             }}
             onBackButtonPress={() => {
                 setView(false)
                 props.navigation.navigate("Home", {screen: "TabOne"});
             }}
         >
             <View style={styles.modal.container}>
                 <View style={styles.modal.wrapper}>
                     {props.children}
                 </View>
             </View>
         </Modal>
     );
    }
    
    export default ModalAuth;
    

Данный код работает так: введите сюда описание изображения Помогите добиться нужного результата.


Ответы (1 шт):

Автор решения: doDeploy
Попробуйте сделать правки так. Пишу не особо продуктивно, ибо не знаю что творится у вас точно в auth.isAuth()
const [view, setView] = useState(false);
useEffect(() => {
     if(!auth.isAuth()){
         setView((e)=>{
if(!e){
return true
}
});
     }
 }, []);

Если не сработает, в useEffect попробуйте так же добавить зависимость от view

→ Ссылка