javascript - How do you hide the bottom tab navigator when navigating away from a certain screen in React Native v.5?

Question

I only want the bottom tab navigator visible in the home screen; after that I want the bottom tab navigator to be hidden,until the user comes back to the home screen. Below is the example they offer but it only offers as if you were working in the App.js file, as I am not.

const Tab = createBottomTabNavigator();

function HomeTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Feed" component={FeedScreen} />
      <Tab.Screen name="Profile" component={ProfileScreen} />
      <Tab.Screen name="Account" component={AccountScreen} />
    </Tab.Navigator>
  );
}

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeTabs} />
        <Stack.Screen name="Settings" component={SettingsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Answer 1

import { createStackNavigator } from '@react-navigation/stack';
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';

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

function Screen ({navigation}) { //this is the name of your file
        return (
  <Stack.Navigator>
<Stack.Screen name = "HomeScreen1" component={HomeScreens}/> //This is the name of your function below
 <Stack.Screen 
      name = "Home" 
      component={HomeScreen} 
      options= {{
        title: '',
        headerLeft: () => (
          <Icon.Button name = "md-arrow-back" size={15} backgroundColor= "black" onPress={ () => navigation.navigate('HomeScreens')}> </Icon.Button> //This will let you back after you navigate to the next page
          ),         
      }}/>

...

</Stack.Navigator>

)
}

export default Screen;


function HomeScreens({navigation}){

return(

<Tab.Navigator
...
>

<Tab.Screen 
  name = " " 
  component={LandingScreen} //Screen you want the bottom tab to exist in
  options = {{
   tabBarColor = ({'#fff'}) => (
     <Icon name = "icon-name"
   )
}}
/>

<Tab.Screen 
  name = " " 
  component={LandingScreen2} //Other screen you want the bottom tab to exist in
  options = {{
   tabBarColor = ({'#fff'}) => (
     <Icon name = "icon-name"
   )
}}
/>

</Tab.Navigator>
)
}