My nav structure looks like this
App.js
<Stack.Navigator initialRouteName="Auth">
<Stack.Screen
name="Auth"
component={AuthLayout}
options={{ headerShown: false }}
/>
<Stack.Screen
name="Tabs"
component={Tabs}
options={{ headerShown: false }}
/>
</Stack.Navigator>
Tabs.js
<Tab.Navigator
tabBar={(props) => <CustomTabBar {...props} />}
initialRouteName="Main"
screenOptions={({ route }) => ({
headerShown: false,
})}
>
<Tab.Screen
name="Main"
component={HomeLayout}
options={{ title: "My home"}}
/>
<Tab.Screen
name="Profile"
component={ProfileLayout}
options={{ title: "Profile"}}
/>
</Tab.Navigator>
HomeLayout.js
<Stack.Navigator initialRouteName="Home">
<Stack.Screen
name="Home"
component={Home}
options={{
header: ({ navigation, route, options, back }) => (
<Header
navigation={navigation}
route={route}
options={options}
back={back}
/>
),
}}
/>
<Stack.Screen
name="Screen A"
component={ScreenA}
options={{
header: ({ navigation, route, options, back }) => (
<Header
navigation={navigation}
route={route}
options={options}
back={back}
/>
),
}}
/>
<Stack.Screen
name="Screen B"
component={ScreenB}
options={{
header: ({ navigation, route, options, back }) => (
<Header
navigation={navigation}
route={route}
options={options}
back={back}
/>
),
}}
/>
</Stack.Navigator>
My goal is to hide tab bar on Screen A, Screen B, and some other screens.
I searched for the solution and also tried implementing tabBarVisible
, but I had no luck in my case, the custom tab bar still there. So, how can I hide it for the specific screen only? Why doesn’t tabBarVisible
work?