React Native Expo - show different NavigationContainer depending on whether user is logged in or not

Question

App.js:

const Stack = createNativeStackNavigator();
const Drawer = createDrawerNavigator();

export default function App() {

  let isLoggedIn = false;

  setInterval(function () {
    auth.onAuthStateChanged((user) => {
       isLoggedIn = user !== null;
    });
  }, 50);

  if (!isLoggedIn) {
    return (
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="LoginScreen" component={LoginScreen} />
          <Stack.Screen name="StartScreen" component={StartScreen} />
        </Stack.Navigator>
      </NavigationContainer>
    );
  } else if (isLoggedIn) {
    return (
      <>
        <NavigationContainer>
          <Drawer.Navigator initialRouteName="StartScreen">
            <Drawer.Screen name="StartScreen" component={StartScreen} />
            <Drawer.Screen name="LoginScreen" component={LoginScreen} />
          </Drawer.Navigator>
        </NavigationContainer>
      </>
    );
  }
}
const styles = StyleSheet.create({});

AppRegistry.registerComponent("myApp", () => App);

My goal is to only display the Drawer.Navigator when the user is logged in. I tried updating a boolean isLoggedIn to change the return statement but it is no working, altough the boolean is changing values. Any ideas on how to approach this? Thanks in advance

Answer 1

Refactor code as below:

//...Other top-level imports
import { ActivityIndictor } from "react-native";

const Stack = createNativeStackNavigator();
const Drawer = createDrawerNavigator();

export default function App() {
  const [isLoggedIn, setLoggedIn] = React.useState(null);

  const authenticateUser = () => {
    auth.onAuthStateChanged((user) => {
      if (user) {
        setLoggedIn(true);
      } else {
        setLoggenIn(false);
      }
    });
  };

  // Check authentication state when the app launched

  React.useEffect(() => {
    if (!isLoggedIn) {
      authenticateUser();
    }
  }, [isLoggedIn]);

  /** While user is authenticating, show progress indicator*/
  if (isLoggedIn === null) return <ActivityIndicator />;

  return (
    <NavigationContainer>
      {isLoggedIn ? (
        <Drawer.Navigator initialRouteName="StartScreen">
          <Drawer.Screen name="StartScreen" component={StartScreen} />
          <Drawer.Screen name="LoginScreen" component={LoginScreen} />
        </Drawer.Navigator>
      ) : (
        <Stack.Navigator>
          <Stack.Screen name="LoginScreen" component={LoginScreen} />
          <Stack.Screen name="StartScreen" component={StartScreen} />
        </Stack.Navigator>
      )}
    </NavigationContainer>
  );
}
const styles = StyleSheet.create({});

AppRegistry.registerComponent("myApp", () => App);

Answer 2

Click on the link https://reactnavigation.org/docs/auth-flow to read about how auth flows work in react native.