How not to use navigation.navigate(" ") in Firebase auth in React Native

Question

I've did some research and found that some people suggest not to use Navigation.navigate(" "), I'm using firebase auth and when a user signs in, I want to redirect the user to Home screen. How could it be done without using navigation.navigate(" ")

This is my App.js

return (
    <NavigationContainer>
      <Stack.Navigator>
        {user ? (
          < Stack.Screen name="HomeScreen" component={HomeScreen} />
        ) : (
          <>
            <Stack.Screen name="Login" component={LoginScreen} />
            <Stack.Screen name="Registration" component={RegistrationScreen} />
          </>
        )}
      </Stack.Navigator>
    </NavigationContainer>
  );

Here is where I'm using to login the user.

const onLoginPress = () => {
        firebase.auth()
            .signInWithEmailAndPassword(email, password)
            .then((response) => {
                const uid = response.user.uid
                const usersRef = firebase.firestore().collection('users')
                usersRef
                    .doc(uid)
                    .get()
                    .then(firestoreDocument => {
                        if (!firestoreDocument.exists) {
                            alert("User does not exist anymore.")
                            return;
                        }
                        const user = firestoreDocument.data()
                        navigation.navigate('HomeScreen')
                    })
                    .catch(error => {
                        alert(error)
                    });
            })
            .catch(error => {
                alert(error)
            })
    }

Any help will be appreciated :)

Answer 1

The best thing to do is separate your screens into two Stacks, one for your Auth (Login, Sign Up etc) flow and other for your Authenticated flow (Home, Settings, Profile, etc).

So when you log in using firebase and it updates de state, you will navigate to the Authenticated Flow without calling navigation.navigate()

 const Stack = createStackNavigator();

 const PublicStack = () => { 
   return (
        
          <Stack.Navigator>
                <Stack.Screen name="Login" component={LoginScreen} />
                <Stack.Screen name="Registration" component=
          </Stack.Navigator>  
      );
   
    }

 const PrivateStack = () => { 
   return (
        
          <Stack.Navigator>
                <Stack.Screen name="Home" component={HomeScreen} />
          </Stack.Navigator>    
      );
   
    }


    return (
        <NavigationContainer>
          <Stack.Navigator>
            {user ? (
              <PrivateStack/>
            ) : (
              <PublicStack/>
            )}
          </Stack.Navigator>
        </NavigationContainer>
      );