react navigation 5 hide bottom tab nav in nested navigation - react-native

Question

The structure of my react navigation is like this : BottomTabNavigator => Navigator => Components
This is the skeleton of the App.js. The whole application is wrapped up in a bottom tab navigation.
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
const BottomTab = createBottomTabNavigator();
function App() {
return (
<NavigationContainer>
<BottomTab.Navigator >
<BottomTab.Screen
name="Main"
component={MyVeranda}
options={{
tabBarLabel: 'Home',
tabBarIcon: //...some icon,
}}
/>
//...some other screens
</BottomTab.Navigator>
</NavigationContainer>
);
}
export default App;
As you can see, inside the bottom tab i have screen name "Main" that uses MyVeranda component. MyVeranda itself is a stack navigator, which have 2 screens components : MyHome and BuyForm
import { createStackNavigator } from '#react-navigation/stack';
const HomeStack = createStackNavigator();
function MyVeranda({ route,navigation }) {
//..some states, props, etc
return (
<HomeStack.Navigator>
<HomeStack.Screen
name="MyHome"
component={MyHome}
options={{/*...some options*/ }}
/>
<HomeStack.Screen
name="BuyItem"
component={BuyForm}
options={{/*...some options*/}}
/>
</HomeStack.Navigator>
);
}
export defaul MyVeranda;
MyVeranda is a parent of MyHome and BuyForm, both are just 2 simple functional components
function MyHome({navigation}){
//..some states, props, etc
return (
<ScrollView contentContainerStyle={{/*...some styling*/}}>
//...some components
</ScrollView>
);
}
function BuyForm({navigation}){
//..some states, props, etc
return (
<ScrollView contentContainerStyle={{/*...some styling*/}}>
//...some components
</ScrollView>
);
}
My question is : how to hide the root bottom tab navigator when navigating to BuyForm component, but not when go to MyHome component?
Based from answer of this question, i know that i can hide the bottom tab if i put this line navigation.setOptions({ tabBarVisible: false }) in MyVeranda component
function MyVeranda({ route,navigation }) {
//..some states, props, etc
navigation.setOptions({ tabBarVisible: false })//this hide the bottom tab navigator
return (
//...
)
}
But this hide the bottom tab entirely when i am at both MyHome and BuyForm component.
Calling navigation.setOptions({ tabBarVisible: false }) in BuyForm seems to do nothing
function BuyForm({ route,navigation }) {
//..some states, props, etc
navigation.setOptions({ tabBarVisible: false }) //this do nothing
return (
//...
)
}
So my guess is i have to call navigation.setOptions({ tabBarVisible: false }) inside MyVeranda when BuyForm is the active screen, but i cannot the proper syntax to get the current active screen from a stack navigator component?

Answer 1

Here is the answer
React Navigation how to hide tabbar from inside stack navigation

Answer 2

Indeed you can use setOptions on the navigation to set custom options. Although it's recommended to rather reorganize the navigation structure. This might be possible if you create a StackNavigator not nested with the TabBar.
React.useLayoutEffect(() => {
navigation.setOptions({ tabBarVisible: false });
}, [navigation]);