React-Native Navigation.Navigate to tab.screen not visible in tab bar

Question

Overview

I am building an app that has two main sections called "Auth" and "Authenticated". Auth is for logging in users and Authenticated is the stack for when users are logged in.

Auth uses stack navigation while Authenticated used tab navigation; specifically createBottomTabNavigator.

When Authenticated the user can see a tab bar at the bottom with three links, Book Shelf, Create Book, and Account. I want to navigate the user to an other screen called "Book" which see they from completing a form in "Create Book" or from Opening a book in "Book Shelf".

Question

How can I add this new screen to my Authenticated stack but not have it appear in the tab Bar? This sounds straight forward to me but been looking for hours and have had no luck.

Tutorials seems to also allude to nesting stacks so you can use a blend of bars and hamburger menu. Closest answer I have found was a property I can add to a Tab.Screen called tabBarShowLabel and set it to false. This however still kept room for the icon and label and showed a downwards facing caret for some reason.

Here is my stack code:

export const App = () => {
  const [isMiniumLoadTimePassed, setIsMiniumLoadTimePassed] = useState(false);
  const [loaded] = useFonts({
    Luminari: Luminari,
    LucidaGrande: LucidaGrande,
  });

  // Create a minium load time experience
  const miniumLoadTime = 1300;
  setTimeout(() => {
    setIsMiniumLoadTimePassed(true);
  }, miniumLoadTime);
  if (!loaded || !isMiniumLoadTimePassed) {
    return <SplashScreen />;
  }

  return (
    <AuthContextProvider>
      <StatusBar style="light" />
      <Navigation />
    </AuthContextProvider>
  );
};

const Navigation = () => {
  const authCxt = useContext(AuthContext);
  return (
    <NavigationContainer>
      {!authCxt.isAuthenticated && <AuthStack />}
      {authCxt.isAuthenticated && <AuthenticatedStack />}
    </NavigationContainer>
  );
};

const AuthStack = () => {
  return (
    <Stack.Navigator
      screenOptions={{
        headerShown: false,
      }}
    >
      <Stack.Screen name="Login" component={LoginScreen} />
      <Stack.Screen name="CreateAccount" component={CreateAccount} />
      <Stack.Screen name="ForgotPassword" component={ForgotPassword} />
    </Stack.Navigator>
  );
};

const AuthenticatedStack = () => {
  return <TabBar />;
};

export default App;

Here is the code of TabBar:

export const TabBar = () => {
  const Tab = createBottomTabNavigator();
  return (
    <Tab.Navigator
      screenOptions={{
        headerShown: false,
        tabBarShowLabel: false,
        showIcon: true,
        tabBarStyle: {
          position: "absolute",
          bottom: 25,
          left: 20,
          right: 20,
          elevation: 0,
          backgroundColor: white,
          borderRadius: 15,
          height: 90,
          ...styles.shadow,
        },
      }}
    >
      <Tab.Screen
        name="BookShelf"
        component={BookShelf}
        options={{
          tabBarIcon: ({ focused }) => {
            return (
              <View
                style={{
                  alignItems: "center",
                  justifyContent: "center",
                  top: 10,
                }}
              >
                <FontAwesome5
                  name="book"
                  size={20}
                  color={focused ? orange : background}
                />
                <Text
                  style={[
                    styles.tabText,
                    { color: focused ? orange : background },
                  ]}
                >
                  Bookshelf
                </Text>
              </View>
            );
          },
        }}
      />
      <Tab.Screen
        name="CreateBook"
        component={CreateBook}
        options={{
          tabBarIcon: ({ focused }) => {
            return (
              <View
                style={{
                  alignItems: "center",
                  justifyContent: "center",
                  top: -20,
                }}
              >
                <View
                  style={[
                    styles.createBookIconWrapper,
                    { borderColor: focused ? orange : white },
                  ]}
                >
                  <Image source={logoImage} style={styles.createBookIcon} />
                </View>
                <Text
                  style={[
                    styles.createBookIconText,
                    { color: focused ? orange : background },
                  ]}
                >
                  Create Book
                </Text>
              </View>
            );
          },
        }}
      />
      <Tab.Screen
        name="Account"
        component={Account}
        options={{
          tabBarIcon: ({ focused }) => {
            return (
              <View
                style={{
                  alignItems: "center",
                  justifyContent: "center",
                  top: 10,
                }}
              >
                <FontAwesome5
                  name="user-circle"
                  size={20}
                  color={focused ? orange : background}
                />
                <Text
                  style={[
                    styles.tabText,
                    { color: focused ? orange : background },
                  ]}
                >
                  Account
                </Text>
              </View>
            );
          },
        }}
     
      />
      <Tab.Screen  />
    </Tab.Navigator>
  );
};