React Native – How do I direct to Main Stack screen without logging in and redirect back to Auth Stack from Main Stack screen?

I’m building an app that consists of public and private route.

The private route is as below:
Sign in (starting screen) –> (user signed in) –> Main Stack Screens (Home, Country, Communities, etc.)

The public route is as below:
Sign in (starting screen) –> (user not signed in) –> Main Stack Screens (Home, Country, Communities, etc.) with limited functions and content display to the user

In public route, I’m trying to add a login icon in the header of the Main Stack Screens, so users can be redirected back to the Auth flow and log in or sign up at any point of time when they wish to.

Here is my code for AuthStackNavigator.js:

import React from "react";
import { createStackNavigator } from "@react-navigation/stack";
import SignInScreen from "../screen/authentication/SignInScreen";
import SignUpScreen from "../screen/authentication/SignUpScreen";
import SignUpSuccessScreen from "../screen/authentication/SignUpSuccessScreen";
import PasswordResetScreen from "../screen/authentication/PasswordResetScreen";

const Stack = createStackNavigator();

const AuthStackNavigator = () => {
  return (
    <Stack.Navigator
      initialRouteName="Sign In"
      screenOptions={{ headerShown: false }}
    >
      <Stack.Screen name="Sign In" component={SignInScreen} />
      <Stack.Screen name="Sign Up" component={SignUpScreen} />
      <Stack.Screen name="Sign Up Success" component={SignUpSuccessScreen} />
      <Stack.Screen name="Password Reset" component={PasswordResetScreen} />}
    </Stack.Navigator>
  );
};

export default AuthStackNavigator;

Here for MainNavigator.js:

import React, { useContext } from "react";
import { Platform, StyleSheet } from "react-native";
import { createStackNavigator } from "@react-navigation/stack";
import CountryScreen from "../screen/CountryScreen";
import CommunitiesScreen from "../screen/CommunitiesScreen";
import CommunityCreateScreen from "../screen/authorized/CommunityCreateScreen";
import CommunityHomeScreen from "../screen/CommunityHomeScreen";
import PostCreateScreen from "../screen/authorized/PostCreateScreen";
import CommentPostScreen from "../screen/authorized/CommentPostScreen";
import SearchBar from "../component/SearchBar";
import { generalconfig } from "../helper/generalconfig";
import { stylesconfig } from "../helper/stylesconfig";
import { AuthContext } from "../src/context/AuthContext";
import CustomProfileImg from "../component/CustomProfileImg";
import DefaultProfileIcon from "../component/DefaultProfileIcon";
import { Entypo } from "react-native-vector-icons";
import LoginIcon from "../component/LoginIcon";

const MainNavigator = () => {
  const Stack = createStackNavigator();
  const platform = Platform.OS;

  const { width } = generalconfig.device;
  const headerImageContainer = stylesconfig.global.headerImageContainer;
  const { common, ios, aos } = stylesconfig.navigatorHeader;

  const { profileImg, token } = useContext(AuthContext);

  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Search Country"
        component={CountryScreen}
        options={{
          title: "Search",
          headerStyle: {
            backgroundColor: common.backgroundColor,
          },
          headerTitleAlign: "left",
          headerTintColor: common.color,
          headerTitleStyle: {
            fontFamily: platform === "ios" ? ios.fontFamily : aos.fontFamily,
            fontWeight: platform === "ios" ? ios.fontWeight : aos.fontWeight,
            fontSize: platform === "ios" ? ios.fontSize : aos.fontSize,
          },
          headerRight: () =>
            profileImg ? (
              <CustomProfileImg
                activeOpacity={1.0}
                onPress={() => {}}
                src={{ uri: profileImg }}
                style={headerImageContainer}
              />
            ) : (
              <DefaultProfileIcon
                activeOpacity={1.0}
                onPress={() => {}}
                iconSize={55}
                iconPosition={{ height: 65, marginRight: 11 }}
              />
            ),
        }}
      />
      <Stack.Screen
        name="Communities"
        component={CommunitiesScreen}
        options={{
          headerStyle: {
            backgroundColor: common.backgroundColor,
          },
          headerTintColor: common.color,
          headerTitleStyle: {
            fontFamily: platform === "ios" ? ios.fontFamily : aos.fontFamily,
            fontWeight: platform === "ios" ? ios.fontWeight : aos.fontWeight,
            fontSize: platform === "ios" ? ios.fontSize : aos.fontSize,
          },
          headerBackTitle: " ",
          headerBackImage: () => (
            <Entypo
              name="controller-fast-backward"
              size={23}
              style={{ marginLeft: width - 376 }}
              color={common.color}
            />
          ),
          headerRight: () => (token ? <LoginIcon /> : null),
        }}
      />
      <Stack.Screen
        name="Create Community"
        component={CommunityCreateScreen}
        options={{
          headerTitle: "Create a Community",
        }}
      />
      <Stack.Screen name="Community Home" component={CommunityHomeScreen} />
      <Stack.Screen name="Create Post" component={PostCreateScreen} />
      <Stack.Screen name="Comment Post" component={CommentPostScreen} />
    </Stack.Navigator>
  );
};

const styles = StyleSheet.create({});

export default MainNavigator;

LoginIcon.js (component)

import React from "react";
import { TouchableOpacity } from "react-native";
import { stylesconfig } from "../helper/stylesconfig";
import { MaterialCommunityIcons } from "react-native-vector-icons";
import AuthStackNavigator from "../navigator/AuthStackNavigator";

const LoginIcon = () => {
  const { common } = stylesconfig.navigatorHeader;

  return (
    <TouchableOpacity
      onPress={() => {
        <NavigationContainer>
          <AuthStackNavigator />
        </NavigationContainer>;
      }}
    >
      <MaterialCommunityIcons
        name="login"
        size={23}
        color={common.color}
        style={{ marginRight: 15 }}
      />
    </TouchableOpacity>
  );
};

export default LoginIcon;

SignInScreen.js (partial code of the link navigating to Country Screen when it’s pressed)

      <CustomButtonLink
        custBtnLinkName={browseAroundLabel}
        style={[styles.spacing_Browse, styles.align]}
        onNavigate={() => {
          navigation.navigate(MainNavigator, { screen: "Search Country" });
        }}
        onNavigate={() => <MainNavigator />}
      />

CustomButtonLink.js (component)

const CustomButtonLink = ({ custBtnLinkName, style, onNavigate }) => {
  return (
    <TouchableOpacity style={style} onPress={onNavigate}>
      <Text
        style={[
          stylesconfig.global.gtext,
          generalconfig.platform.os === "ios"
            ? stylesconfig.ios.text
            : stylesconfig.aos.text,
        ]}
      >
        {custBtnLinkName}
      </Text>
    </TouchableOpacity>
  );
};

So my questions are:

1. How do I direct the user to the public route (Country Screen) if user is not authenticated?
2. Once user is directed to the public route (say Country Screen), how do I redirect him back to the AuthStackNavigator (Sign In screen) when he clicks the login icon?

I’m quite new to React Native so deeply appreciate it if anyone can help. Thanks!