Hiding tab bar with nested navigation

Question

I used nested navigation for my problem. Currently, however, the tab bar is only displayed on pages listed in TabNavigator. Is it possible to display on other pages as well? It is possible to display the tab bar also on screen5. I also have screen6 where I don't want to display the tab bar, so I solve it this way.

App.js

<NavigationContainer
      ref={ref}
>
    <Navigation />
</NavigationContainer>

Tab.js

const Tab = createBottomTabNavigator();

const Tabs = (props) => {
    return(
        <Tab.Navigator>
            <Tab.Screen name="Screen1" component={Screen1} />
            <Tab.Screen name="Screen2" component={Screen2} />
            <Tab.Screen name="Screen3" component={Screen3} />
            <Tab.Screen name="Screen4" component={Screen4} />   
        </Tab.Navigator>
    );
}

<Stack.Navigator>
    <Stack.Group screenOptions={{ headerShown: false }}>
        <Stack.Screen name="Screen1" component={Tabs}/>
        <Stack.Screen name="Screen2" component={Screen2}/>
        <Stack.Screen name="Screen3" component={Screen3}/>
        <Stack.Screen name="Screen4" component={Screen4}/>
        <Stack.Screen name="Screen5" component={Screen5}/>
        <Stack.Screen name="Screen6" component={Screen6}/>
    </Stack.Group>
</Stack.Navigator>

Screen4

const Screen4 = ({navigation}) => {
    return (
        <SafeAreaView>
            <Pressable onPress={() => {navigation.navigate('Screen5')}}>
                <Text>Screen5</Text>
            </Pressable>
        </SafeAreaView>
    );
}
export default Screen4;

Answer 1

I think you are aksing about this.

const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();

const HomeNavigator = () => {
  <Stack.Navigator>
    <Stack.Screen name="Screen1" component={Screen1} />
    <Stack.Screen name="Screen2" component={Screen2} />
  </Stack.Navigator>;
};

const ProfileNavigator = () => {
  <Stack.Navigator>
    <Stack.Screen name="Screen3" component={Screen3} />
    <Stack.Screen name="Screen3" component={Screen3} />
  </Stack.Navigator>;
};

const Tabs = (props) => {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeNavigator} />
      <Tab.Screen name="Profile" component={ProfileNavigator} />
      <Tab.Screen name="YourOtherNavigator" component={YourOtherNavigator} />
    </Tab.Navigator>
  );
};