Hiding tab bar on screens inside a nested stack navigator - react-native

Question

I want to hide the tab bar on certain screens inside a nested stack navigator. I have a bottom tab bar, using a CUSTOM tab bar, set up like so:
const MainAppBottomTabs = createBottomTabNavigator<BottomTabParamList>();
const MainAppBottomTabsNavigator = (): JSX.Element => {
return (
<MainAppBottomTabs.Navigator
initialRouteName="ListScreen"
screenOptions={{
headerShown: false
}}
tabBar={(props: BottomTabBarProps) => (
<TabBar
state={props.state}
navigation={props.navigation}
descriptors={props.descriptors}
insets={props.insets}
/> // this is my custom tab bar
)}>
<MainAppBottomTabs.Screen
name="ListScreen"
component={ListScreen}
/>
<MainAppBottomTabs.Screen
name="ProductsScreen"
component={ProductsScreen}
/>
<MainAppBottomTabs.Screen
name="DetailsStackNavigator"
component={DetailsStackNavigator}
/>
</MainAppBottomTabs.Navigator>
);
};
Here's the nested DetailsStackNavigator:
const DetailsStack = createNativeStackNavigator();
const DetailsStackNavigator = (): JSX.Element => {
return (
<DetailsStack.Navigator
initialRouteName="UsersScreen"
screenOptions={{
headerShown: false
}}>
<DetailsStack.Screen
name="UsersScreen"
component={UsersScreen}
options={{ animation: 'none' }}
/>
<DetailsStack.Screen
name="OptionsScreen"
component={OptionsScreen}
options={{ animation: 'none' }}
/>
<DetailsStack.Screen name="OptionsDetailsScreen" component={OptionsDetailsScreen} />
<DetailsStack.Screen name="UsersDetailsScreen" component={UsersDetailsScreen} />
</DetailsStack.Navigator>
);
};
I want to hide the tab bar on the OptionsDetailsScreen and UsersDetailsScreen inside of the DetailsStackNavigator. I have tried the following which DOES hide the tab bar, but it cuts off the screens at the bottom where the tab bar would be:
const MainAppBottomTabs = createBottomTabNavigator<BottomTabParamList>();
const MainAppBottomTabsNavigator = (): JSX.Element => {
const getTabBarVisibility = (route) => {
const routeName = getFocusedRouteNameFromRoute(route);
const hideOnScreens = ['OptionsDetailsScreen', 'UsersDetailsScreen'];
return hideOnScreens.indexOf(routeName) <= -1 ? 'flex' : 'none';
};
return (
<MainAppBottomTabs.Navigator
// rest of code from above
<MainAppBottomTabs.Screen
name="DetailsStackNavigator"
component={DetailsStackNavigator}
options={({ route }) => ({
tabBarStyle: { display: getTabBarVisibility(route) }
})}
/>
</MainAppBottomTabs.Navigator>
);
};
and then in my custom tab bar:
const TabBar = (screenProps: ScreenProps): JSX.Element => {
const focusedOptions = screenProps.descriptors[screenProps.state.routes[screenProps.state.index].key].options;
if (focusedOptions?.tabBarStyle?.display === 'none') {
return null;
}
return <View>{RenderTabs(screenProps)}</View>;
};
Not sure what else to try. Seems to be way too difficult for what I would assume would be a pretty common scenario.