i have a problem in navigation lifecycle, wich when i navigate from screen to other the last one dosen't stay focus and quickly re navigate to the previous screen.Please if anyone can help me.
This is my AuthStack.tsx file :
import React, { useState, useEffect, useContext } from 'react'import { createStackNavigator } from "@react-navigation/stack";import { Text, Button } from 'react-native';import { Center } from './Center';import { AuthParamList, AuthNavProps } from "./AuthParamList.ts";import { AuthContext } from "./AuthProvider";import { SplashScreen } from "./splashes/SplashScreen";import {LoginScreen} from './authentificationScreens/LoginScreen'import {RegisterScreen} from './authentificationScreens/RegisterScreen'interface AuthStackProps {}const Stack = createStackNavigator<AuthParamList>();export const AuthStack: React.FC<AuthStackProps> = ({}) => { return (<Stack.Navigator screenOptions={{ header: () => {null} }} initialRouteName="SplashScreen" ><Stack.Screen options={{ headerShown: false }} name='SplashScreen' component={SplashScreen} /><Stack.Screen name='LoginScreen' component={LoginScreen} /><Stack.Screen name='RegisterScreen' component={RegisterScreen} /> </Stack.Navigator> );}and this is the Login Screen :
import React, { useState, useContext, useEffect } from 'react'import { View, Text, ScrollView, ImageBackground , Dimensions, StyleSheet, Pressable } from 'react-native';import { Input, ListItem, CheckBox, Button, Switch } from 'react-native-elements';import { LinearGradient } from 'expo-linear-gradient';import { AuthParamList, AuthNavProps } from "../AuthParamList.ts";import { AuthContext } from "../AuthProvider";import Ionicons from 'react-native-vector-icons/Ionicons';import * as Animatable from 'react-native-animatable';import { EventRegister } from "react-native-event-listeners";import BgGigaFit from "../../assets/background.jpg";import GigaFitLogo from '../../assets/GigaFitLogo1.png'interface LoginScreenProps {}export const LoginScreen: React.FC<LoginScreenProps> = ({ navigation, route }: AuthNavProps<"LoginScreen">) => { const {login} = useContext(AuthContext); const [darkMode, setDarkMode] = useState(false); return (<ScrollView style={{flex: 1, backgroundColor: 'darkgray'}} showsVerticalScrollIndicator={false}><ImageBackground source={BgGigaFit} style={{ height: Dimensions.get('window').height / 2.5, }}> {/* <View style={styles.SwitchDarkTheme}><ListItem style={styles.SwitchDarkTheme}><Switch value={false} color="#52c234"/></ListItem></View> */}<View style={styles.brandView}> {/* <Icon type="FontAwesome" name="home" style={{color: '#ffffff', fontSize: 100}} /> */}<Ionicons name="md-barbell-outline" size={50} color="#52c234" /><Animatable.Image animation="fadeIn" duration= {4000} source={GigaFitLogo} style={styles.logo} resizeMode="stretch" /></View></ImageBackground> {/*Bottom View*/}<View style={styles.bottomView}> {/*Welcome View */} {/* <View style={styles.SwitchDarkTheme}><ListItem><Switch value={darkMode} color="#52c234" onValueChange= {(val) => { setDarkMode(val); EventRegister.emit('changeThemeEvent', val) }} /></ListItem></View> */}<View style={{padding: 40}}><Text style={{color: '#52c234', fontSize: 34}}>Welcome</Text><Text>Don't have an account yet !!!<Text onPress={()=> navigation.navigate('RegisterScreen')} style={{color: '#52c234', fontStyle: 'italic'}}>Register Now</Text></Text> {/**Form Inputs View */}<View style={{marginTop: 50}}><Input placeholder="Email" rightIcon={<Ionicons name="md-checkmark-done-sharp" size={20} color="#52c234" />} /><Input placeholder="Password" rightIcon={<Ionicons name="ios-eye" size={20} color="#52c234" />} /> {/**Forgot Password and create new view */}<View style={styles.forgotPasswordView}><View style={{flex: 1, marginTop:-10, marginLeft: -30}}><ListItem noBorder><CheckBox checked={true} checkedColor="#52c234"/><ListItem.Content style={{marginLeft: -35}}><Text style={{color: "#52c234"}}> Remember Me</Text></ListItem.Content></ListItem></View><View style={{flex: 1, marginTop:-3, marginRight: -150}}><ListItem noBorder><ListItem.Content style={{marginLeft: -40}}><Text style={{color: "#52c234"}}> Forgot Password</Text></ListItem.Content></ListItem></View></View> {/**Login Button */}<View style={{height: 100, justifyContent: 'center', alignItems: 'center'}}> {/* <Button type="Solid" rounded buttonStyle={styles.loginButton}><Text style={{color: "#ffffff"}}>Login</Text></Button> */}<Button icon={<Ionicons name="md-checkmark-circle-outline" size={20} color="#ffffff" /> } // title="Login" type="Outline" buttonStyle={styles.loginButton} onPress={() => login()} /></View></View></View></View></ScrollView> );}and this is the Register Screen :
import React, { useContext, useEffect } from 'react'import { AuthParamList, AuthNavProps } from "../AuthParamList.ts";import { Center } from './../Center';import { Text, Button } from 'react-native';interface RegisterScreenProps {}export const RegisterScreen: React.FC<RegisterScreenProps> = ({ navigation, route }: AuthNavProps<"RegisterScreen">) => { // useEffect(() => { // const unsubscribe = navigation.addListener('focus', () => { // -------------------------------------- // }); // return unsubscribe; // }, [navigation]); return (<Center><Text>I am a Register Screen</Text><Button title="go to login" onPress={() => { navigation.navigate('LoginScreen'); // navigation.goBack() }} /></Center> );}My Problem is when i navigate from the Login Screen to the Register Screen it just show for a moment and re navigate it self quickly to the login Screen .