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

CodePudding user response：

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 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);

CodePudding user response：

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