reactjs - Skärmen monteras två gånger när jag navigerar till en annan skärm och snabbt navigerar tillbaka till samma skärm

Jag har ett problem med navigeringslivscykeln, där när jag navigerar från en skärm till en annan så behåller inte den sista fokus och navigerar snabbt tillbaka till föregående skärm. Snälla, om någon kan hjälpa mig.

Detta är min AuthStack.tsx-fil:

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

och detta är inloggningsskärmen :

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

och detta är registreringsskärmen:

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

Mitt problem är att när jag navigerar från inloggningsskärmen till registreringsskärmen visas den bara för ett ögonblick och navigerar sedan snabbt tillbaka till inloggningsskärmen.