React Native, Stack Navigation Group for Firebase authentication stay logged in

Issue

I made a registration, login and home screen integrating firebase on React-Native. They all works fine, and now I'm trying to allow users to stay logged in even if they close the app. I do it by using on onAuthStateChanged that actually works and change a variable called isSignedIn, then the navigationKey of the stack group should remove from the stackcontainer the Login and Registration Screens when isSignedIn is equal to 'user' and no more 'guest', but this doesn't happen. This is the code I use:

This updates the isSignedIn correctly

onAuthStateChanged(authApp, (user) => {
  if (user) {
    isSignedIn = 'user'
    console.log(isSignedIn)
    
  } else {
    isSignedIn = 'guest'
    console.log(isSignedIn)
  }
});

This doesn't works at all

<NavigationContainer>
      <Stack.Navigator>


          <Stack.Group  navigationKey={isSignedIn ? 'user' : 'guest'}>
          {/* <Stack.Group> */}
            <Stack.Screen name="Login" component={LoginScreen} />
            <Stack.Screen name="Registration" component={RegistrationScreen} />
          </Stack.Group>

          <Stack.Group>
            <Stack.Screen name="Home" component={HomeScreen} options={{headerBackVisible:false}}/>
          </Stack.Group>


      </Stack.Navigator>
    </NavigationContainer>

I have no errors

Solution

I solved by removing the navigation key and changing my code as this:

  const[userLogged,setUserLogged]= useState(false)

  onAuthStateChanged(authApp, async (user) => {
    if (user) {
      setUserLogged(true)
    } else {
      setUserLogged(false)
    }
  });

then in StackNavigator:

       {userLogged ? null : (
        <Stack.Group>
          <Stack.Screen name="Login" component={LoginScreen} options={{headerBackVisible:false}}/>
          <Stack.Screen name="Registration" component={RegistrationScreen} options={{headerBackVisible:true}}/>
        </Stack.Group>
       )}

Answered By - Marco Sajeva