React Native，堆栈导航组 Firebase 身份验证保持登录状态

Question

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

Answer 1

I solved by removing the navigation key and moving the onAuthStateChanged from App.js to a LoadingScreen I created that is now the first stack.screen of the stack.navigator and adding a navigator.navigate('Home'):

In LoadingScreen:

import {  authApp } from '../../config/firebase';
onAuthStateChanged(authApp, (user) => {
    if (user) {
        navigation.navigate('Home')
        
    } else {
        navigation.navigate('Login')
    }
    });

In firebase.js

import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
import { getAuth } from "firebase/auth";

const firebaseConfig = {
  apiKey: "...",
  authDomain: "...",
  projectId: "...",
  storageBucket: "...",
  messagingSenderId: "...",
  appId: "...",
  measurementId: "...",
};

export const app = initializeApp(firebaseConfig);

export const analytics = getAnalytics(app);

export const authApp = getAuth(app);

Keep in mind that you need to handle the goback button and gesture from going back to the Login screen, and this must be done in two separate ways in android and iOS. For android in the Screen you don't want to enable go back gesture(for button see below):

React.useEffect(() => navigation.addListener('beforeRemove', (e) => {
        // Prevent default behavior of leaving the screen
        if(Platform.OS === "android" && e.data.action.type === "GO_BACK"){
            e.preventDefault();
        }
    }));

For iOS, in the Screen you don't want to enable goback gesture and button(button works for both iOS and android):

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