React-Native, can't navigate from Login to Home and viceversa

Question

I'm trying to learn React-Native and have many difficulties. I am posting the code below:

App.js

import React from "react";
import { NavigationContainer } from "@react-navigation/native";

import DrawerNavigator from "./navigation/DrawerNavigator";
import Login from "./screens/Login";

const App = () => {
  let isLogged = true;

  return (
    <NavigationContainer>
      {isLogged ? <Login /> : <DrawerNavigator />}
    </NavigationContainer>
  );
};

export default App;

DrawerNavigator.jsx

import React from "react";

import { createDrawerNavigator } from "@react-navigation/drawer";

import { ProfileStackNavigator } from "./StackNavigator";
import TabNavigator from "./TabNavigator";

const Drawer = createDrawerNavigator();

const DrawerNavigator = () => {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name="HomeDrawer" component={TabNavigator} />
      <Drawer.Screen name="ProfileDrawer" component={ProfileStackNavigator} />
    </Drawer.Navigator>
  );
};

export default DrawerNavigator;

TabNavigator.js

import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

import { MainStackNavigator, ProfileStackNavigator } from './StackNavigator'

const Tab = createBottomTabNavigator();

const BottomTabNavigator = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen name="HomeTab" component={MainStackNavigator} />
      <Tab.Screen name="ContactTab" component={ProfileStackNavigator} />
    </Tab.Navigator>
  );
}

export default BottomTabNavigator

StackNavigator.js

import React from "react";
import { createStackNavigator } from "@react-navigation/stack";

import Home from "../screens/Home";
import About from "../screens/About";
import Profile from "../screens/Profile";

const Stack = createStackNavigator();

const screenOptionStyle = {
  headerStyle: {
    backgroundColor: "#9AC4F8",
  },
  headerTintColor: "white",
  headerBackTitle: "Back",
};

const MainStackNavigator = () => {
  return (
    <Stack.Navigator screenOptions={screenOptionStyle} initialRouteName="HomeStack">
      <Stack.Screen name="HomeStack" component={Home} />
      <Stack.Screen name="AboutStack" component={About} />
    </Stack.Navigator>
  );
};

const ProfileStackNavigator = () => {
  return (
    <Stack.Navigator screenOptions={screenOptionStyle} initialRouteName="ProfileStack">
      <Stack.Screen name="ProfileStack" component={Profile} />
    </Stack.Navigator>
  );
};

export { MainStackNavigator, ProfileStackNavigator };

And the culprit file, the Login.js

import React from "react";
import { View, StyleSheet, Text, Button } from "react-native";

const Login = () => {
  function onPress() {
    console.log("Pressed")
  }

  return (
    <View style={styles.center}>
      <Text>This is the Login screen</Text>
      <Button
        title="Login"
        onPress={onPress}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  center: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    textAlign: "center",
  }
});

export default Login;

How I can go from the Login page to the DrawerNavigator container and do a Logout button that goes to the Login page?

Feel free to redesign the code, I'm still learning! Thanks

Answer 1

Login page isn't inside any navigator, therefore it isn't handled by any navigator. Put it in the mutual navigator to allow it to navigate back and forth.