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